实现Vue.js应用程序无障碍访问的5种方法

653 阅读6分钟

所以你已经听到了很多关于无障碍设施的讨论。也许你甚至听说过人们起诉大公司提供无障碍服务的事情。但你知道无障碍性到底意味着什么吗?

幸运的是,一旦你致力于此,无障碍性并不难理解或实施。一旦你学会了什么是可访问性,你就可以通过编写可访问的Vue.js应用程序将这一理论付诸实践。

什么是可访问性?

可访问性是网络上的一个流行语,但它到底是什么意思?事实证明,这个名字很有描述性。可访问性只是衡量一个网络应用对所有类型的人的可用程度的一个标准。

不是每个人都以同样的方式体验网络。有些人有障碍,可能影响他们的听力或视力。有些人无法使用现代硬件或高速互联网,人们经常需要在不太理想的条件下使用网络。可访问性就是要确保所有这些人仍然能够尽可能顺利地使用网络应用。

为什么可访问性很重要?

可访问性很重要,因为当一个应用程序具有高度可访问性时,它可以为尽可能多的人服务。当有人在网站上提供服务或信息时,他们的目标是让其他人使用该服务或阅读该信息。

对无障碍性进行优化,可以确保尽可能少的人无法使用该网络应用程序。此外,更具可访问性的网络应用程序在搜索结果中的排名通常更高。这使得更多的人能够找到并使用更多的无障碍网络应用。

损害无障碍性的常见开发者错误

许多网络应用程序的可访问性比它们可能的要差。这通常是那些建造它们的人的错误造成的。开发者在构建应用程序时犯的一些常见的可访问性错误是。

使用不可访问的库

当你开发你的应用程序时,你可能依靠第三方库来节省时间和精力。不幸的是,并不是所有的库都认真对待无障碍性,而且可能很难识别好的库。这样很容易意外地降低了你的应用程序的可访问性。

在构建组件时忽略了语义HTML

语义性HTML是指其含义和结构都是正确的HTML。每一个HTML标签都有一个固有的目的,辅助技术利用这个目的来推断其内容的含义。例如,页眉标签标志着网站的页眉。屏幕阅读器应该能够宣布,标题标签内的任何内容都是网站的标题。

不幸的是,没有什么能阻止你将标签用于错误的目的。另一个常见的例子是,使用按钮标签来充当链接,或者反之亦然。

以这种方式编写HTML会损害无障碍性,因为辅助技术不能再确定任何HTML元素的目的。它最终可能会对技术的使用者产生混乱或令人沮丧的输出。为了获得最大的可及性,你应该总是写语义的HTML,即使这意味着更多的工作。

不进行可及性测试

构建一个网络应用程序往往是一项艰巨的任务,有着苛刻的截止日期。在急于完成功能和测试软件其他方面的负担之间,无障碍性测试被置于次要地位。你可能很想在测试无障碍性问题之前就把一个应用程序部署到生产中。

为什么?测试需要时间,并且可能需要对应用程序的代码进行广泛的修改。但是,测试一个网络应用程序是开发过程中不可缺少的一部分。你应该像其他方面一样严格测试你的应用程序的可及性。

编写Vue.js时提高可访问性的工具

值得庆幸的是,有一些工具可以帮助解决这些问题。以下五个工具可以帮助你编写更多的无障碍Vue.js应用程序。

1.WAVE

WAVE是一个工具集合,帮助开发者自动测试他们的应用程序的可访问性问题。虽然WAVE不能替代终端用户测试,但它仍然可以帮助你捕捉到许多无障碍性问题。

WAVE在其网站上提供了一个在线测试工具。它还提供浏览器扩展,以及其他一些工具来帮助许多类型的网络应用程序进行无障碍测试。

2.Vue-Announcer

许多网络应用程序用来交流活动的线索,如进度条和加载指示器,都是纯粹的视觉。有视觉障碍的人或使用屏幕阅读器的人无法感知它们。

Vue-announcer是一个库,可以让你以每个人都可以访问的方式宣布Vue.js应用程序中的变化。

3.Vue-Skip-To

Vue-skip-to是一个库,允许使用屏幕阅读器的人直接跳到Vue.js应用程序的主要内容。这很有用,因为许多网络应用在主要内容之前有导航链接和其他元素。这些对一些用户来说很容易跳过,但在使用屏幕阅读器时可能会很麻烦,令人沮丧。

4.ESLint插件

ESLint是一个工具,通过分析你的代码和检查它的错误,帮助你写出更好的JavaScript。

这个工具是一个ESLint插件,它可以帮助你确保你的Vue.js组件的结构符合可访问性规则。

安装后,这个插件会分析所有Vue.js文件并指出有问题的代码。然后,你可以在编写应用程序时最大限度地提高可访问性,而不是在测试阶段后再去修改代码。

5.Vuetensils

应用程序中可访问性问题的一个重要来源是使用不可访问的组件库。Vuetensils是一个Vue.js的组件库。

这些组件被优化为最小的尺寸,最大的可访问性,易于使用,以及易于造型。你可以节省时间,在不损害你的应用程序的可访问性的情况下使用这些预建的组件。

Vue.js的可访问性是很容易的

可访问性是指确保每个人都能在任何情况下使用你的应用程序。最大限度地提高可访问性对于确保一个应用程序能够被尽可能多的人使用非常重要。

开发人员在构建他们的应用程序时,经常会犯一些常见但可预防的无障碍性错误。常见的问题包括没有测试和编写非语义的HTML。但在一些工具的帮助下,编写高度可访问的Vue.js应用程序变得更加容易。