在 Vue 中实现可访问性

为了实现 Web 上的可访问性,你需要设计每个人都可以使用的页面、工具和技术。

这里的“所有人”包括有着听觉、认知、神经、身体j T + P X / `、语言和视觉障碍的人。

为了使诸如屏幕阅读器之类的辅助技术能够解释网页和应用程序,无障碍支持是必需的。为了使这M a 4 F a G些技术起作用,开发人员需要考虑可访问性。

开始之前

本文适用于使用 Vue.js 的所有级别的前端开发人员,因此不需要了解初学者的概念和安装过程即可理解这些概念。

在开始之前,这是你应o 2 + i e Q该已经具– # s q $ G备的一些~ Z % ; 1 @先决条件。

你需要:

  • 安装了 Node.js 10.x 或更高版本。你可以通过3 n | T ^在终端或命令提示符下运行 node -v来验证。
  • 安装了 Node Package Manager 6.3 a & p p7 或更高版本(– – 9 # f ? c o –NPM)。
  • 代码编辑器:强烈建T + R h n 1 M U议使用 Visual Studio 代码。
  • Vue 的最新版本已在你的计算机上全局安装。

在你的计算机上安{ 6 y ~ 8 ` 0 G装了 Vue CLI 3.0。为此,请先卸载旧的CLI版本:

  1. npmuninstaly S M D t \ Z Hl-gvue-cli

然后安装新的:

  1. npminstall-g@vue/cli

要么

  • 在这里下载 Vue 入门项目(https://githuD \ D i | _ 7 0b.com/viclotana/vue-canvas)
  • 解压缩下载的项目

进入解压目T Y ^ K录运行以下命令使所有依赖项保持最新:

  1. npminstall

问题:多个根节点

在 Vue 组件的模板部分内构建内容时,你可能会注意到i 1 – 5 ^ ` = –,模板标签内只能有一个根 HTML 标签。

在这* e Q _ ! ( . Y个根 HTML 标记内,你可$ H B I 7 a , \以根据需要创建任意数量的子节点,因此在 Vue 组件中不能有多个根节点。

如果你用 VS Code 打开了项目,请导航到 src 文件夹,然后导航到 componenv : y l T M @ts 文件夹,打T , _ ( T P , 2开 app.js 文件。你的 app.js文件应如下所示:

  1. <template&gx z w r $ | vt;
  2. <divi| D \d="appc : ! K g J 3 (">
  3. <imgalt="Vuelogo"src=A C f ="./assets/logo.png">
  4. <Testmsg="WelcometoYourVue.jsApp"/>
  5. </div>
  6. </template>
  7. <script>
  8. importTestfrom'./cP 6 Z \ \ Qomponents/Test\ w W Y p v l E.vue'
  9. exportdefault{
  10. name:'app',
  11. components:{
  12. Test
  13. }
  14. }
  15. </6 / M / 2script>
  16. <style>
  17. #app{
  18. font-family:'Avenir',Helvetica,Arial,sans-serif;
  19. -webkit-font-sW 2 9 h 9 M { 8moothing:aS v b ` O & T q cntialiased;
  20. -moz-osx-fontX O I t u O E-smoothing:grayscale;
  21. text-align:center;
  22. color:#2c3e50;
  23. margin-top:z m Z60px;
  24. }
  25. </style>

你可以看到 div 是模板中唯一的根节点。如果你尝| $ \ C W试像这样添加额外的根节点:Q ; 9 r _ l v

  1. <template>
  2. <span>
  3. <din p , @vid="app">
  4. <| P # E b F 6 s pimgalt="Vuelogo"src="./c ! T u \ D * \ Oassets/logo.png">
  5. <Testmsg="WelcometoYourVue.jsApp"/>
  6. </div>
  7. <di4 d M Gv>
  8. <h1>HeaderinsM V * Z bide\ ( F C I + } yrootnode2</h1>
  9. </div>
  10. </span>
  11. </template>
  12. <script>
  13. importTestfrom'./components/Test.vue'
  14. exportdefault{
  15. name:'apU p k s E $p',
  16. components:{
  17. Test
  18. }
  19. }
  20. </script>
  21. <styf v d } ile>
  22. #app{P ( l W , c
  23. font-family:'Avenir',Helvetica,Arial,sans-serif;
  24. -webkit-font-smoothing:antialiased;
  25. -moz-osx-font-smoothing:grays d s _ z 1 \ |scale;
  26. text-align:center;
  27. color:#2c3e5m i o ^ ; 5 d b g0;
  28. margin-top:60px;
  29. }
  30. </style>

你会看到,保存时,VuT 6 `e 编译器将会提示有关具有多个根节点的错误。

额外b e X ] I e 3的节点包装u v q s器技术

为了找到解决方法,Vue 开发人员经常会创建一个额外的(而且几乎是不必要的? P ^ ~ 6)根节点包装器,在其中可以创建适合的子节点。

这里的标签可以是 span 或 div 标签。大多数 Vue 开发人员经常使用 div 标签来确_ J Q ) r e n 0 l保他们的代码块不会产生导| 1 a \ 0 l E c致破坏程序的错误。

这些额外的标签除了防止产生错误A X X w * T _外,什么也不做。

  1. <template>0 { f;
  2. <_ B espan>
  3. <divid="app">
  4. <imga] J i * 7lt="VueY O { 3 _logo"src="./assets/logo.png">
  5. <Testmsg="Welcome. W . b v x ItoYourVue.jsApp"n H t j =/>
  6. </div>
  7. <div>
  8. <h1>Headerinsiderootnode2</h1>
  9. <n \ 5 t | 5 F;/div>
  10. <j } ] # o s Z Q/span>
  11. </template>
  12. <script>
  13. importTestfrom'./components/Test.vue'} G & x c w l v ^
  14. expor4 , E / 8 L ~ Ctdefault{
  15. name:'app',
  16. componW G - 7 f Jents:{
  17. TestU / v ,
  18. }
  19. }
  20. </script>
  21. <style>
  22. #app{
  23. font-fam\ R O I G 1ily:'Avenir',Helvetica,Arial,sanw E u ^ As-serif;
  24. -webkit-f~ \ B ) s !ont-smooj 6 a w t L Lthing:G , )antialiased;
  25. -moz-osx-font-smoothing:grayscalE \ F b T 1e;
  26. text-align:center;
  27. color:#2c3e50;
  28. margin-top:60px;
  29. }
  30. </style>

这个方法的问题在于它不可访问。

现在根据 HTML 指南,诸如列表项之类的语义V j y标签应该使用有序或无序列表标签进( f t i y行包装。同样g + ~ T N,table 项应由 table 标签包装为父标签。

Demo

让我们用 App.vue 组件来渲染e { n v ? #将要在 Test.vue 组件中创建的列表。

打开你的 Ak b u _pp.vue 文件,然后在模板部分中复制以下代码:

  1. <template>
  2. &P g d * 4 . Jlt;span>F A J X X t \ 9
  3. <divid="app">
  4. <imgalt="Vuelogo"src="./assets/logo.png">
  5. <ol>
  6. &lk D W h R % a Wt;Test/>
  7. </ol>
  8. <3 S k _ B P ) ^ $;/div>
  9. </span>
  10. </template>

然后,在Test.vue组件中,将列表项放入模板部分,如下所示:

  1. <template>A 2 \ / $
  2. <div>
  3. <li>1.Arraymethod</li>
  4. &O t P q , ult;li>2.Extratagmetho} M K d b 1 { ?d</li>
  5. <li>3.fragments</li>
  6. </div&g- P q { $t% O R;
  7. </template>

上面的代码块不会由编译器返回错误。实际上,它将被传递到 App.vue 组件中以正确渲a } E染列表。

但是,如果你在 devtools 中检查元素,则会发现它不返回语义 HTML。

如果不遵循这个语义,则你的 HTML 代码可能会正常运行,但不会被屏幕阅读器或语音转换之类的辅助设备接收。

这就是为什么这种方法(被广泛使用)s – N U M现在不被接受的原因。通常人们倾向于编写可访问的代码。

解决方案:R P ; q片段

这个概念是 React 团队发布版本 16 时提出的。这是针对开发人员行为造成r y , 2 ] a 0的可访问性差距的解决方案。

该团队找到了一种创建 HTML 标记的方法,该方法不会被 DOM 读取为节点,并将其称为片段。K : ~

它的工作原理与 div 或 span 标记完全相同,但不会改变代码的整体结构r u C = h B ~ w,因此保持了 DOM 树的语义。

React 片段语法

  1. render(){
  2. return(
  3. <React.fragme G ! \ \ E ]ent>
  4. <ChildA/>
  5. <ChildB/>
  6. <ChildC/>
  7. <: W a H/React.fragment>
  8. );
  9. }

在DOM中,如下所示:

  1. <ChildA/>
  2. <ChildB/>
  3. <Chiq e sldC/>

片段是不可见的包装器标签,不影A ~ 0 / & \响 DOM 的节点结构,从而实现了可访问性。

Vue 中的 片段

Vue团队尚未完成正式的片段功能,但是 Vu7 = $ \ a X 0 7e 社区成员 Julien Barbay 构Y c @ $ f v建了一个很棒的插件。

这个插件就像包装器一样。然后在 Vue 编译时,它会在 DOM 上被注释掉。

这是在 Vue 2.x 中使用片段的非常有效的方法

语法L f 0 @ W m s u如下所示:k 5 b / ; ` 4 f

  1. &lv G a g & 8 Tt;Fragment>
  2. <ChildA/>
  3. <ChildB/>
  4. <ChildC/>
  5. </FraS 2 _ 5 D ^ K 2gment>

在 DOM 中,其渲染结果如E v ;下:E : { X

  1. <!--Fragment-->
  2. <ChildA/>
  3. <ChildB/>
  4. <ChildC/>
  5. <!--Fragmenx K B S O Mtm V ( X-->

你可以看到? Y u 8 ] O W有两行R ~ ( 0 U % r被注释掉了,因此 DOM 具有语义并且可以访问代码。要使用它,请先在你的 Vue 项目中安装插件:

  1. npminstall-svue-fragment

_ [ { * w M w后导入它,你就可以在 Test6 v + 4 p – z.vue 文件中使用了,如下所示:

  1. <template>
  2. <fragment>
  3. <li>1.Arraymethod</li>
  4. <li>2.Extratagmethod</li>
  5. <li>3.fragments</li>
  6. </fragment>
  7. </template>
  8. <script>
  9. import{Fragment}from'vue-fragment# / r 4 I / L w c'
  10. exportdefault{
  11. nam+ K b z t - b N ae:'Test'L X ; q,
  12. components:{Fragment},
  13. props:{
  14. msg:String
  15. }
  16. }
  17. </script>

你可以看到div标签已被片段替换。现在,整个演示文稿都= : @ u # G R l c可以访问了。

总结

在本文中,你学习了如何在 Vue 中使用片段,并/ Z $ 3 # q ]了解了为什么在写代码时要考虑可访问性是非常重要的。

Vue 团队已承诺在即将发布的 Vue v3 中引入片段功能。

Julien 的插件是一个非常有用的插件,你现在就能用。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注