想象一下,你已经失去了你的能力。想想曾经琐碎的事情会突然变得多么困难。在全世界范围内导航将变得非常麻烦。但是,比如使用触摸屏手机呢?还是用电脑?突然做一些像在线支付水电费一样简单的事情变成了一个非常困难的任务。忘了用鼠标点击东西,你必须从这里开始使用你的键盘。而且您仍然需要知道您正在“查看”的网站的哪个部分,但现在您必须依靠专门的软件来大声读取屏幕上的元素,以便您这样做。听起来很难?那么,如果我告诉你这个功能的存在不是给定的呢?如果我告诉你有很多网站在那里你怎么办?甚至不能使用你的键盘?页面上的项目甚至没有以任何方式标记或描述?

The 美国残疾人法案最初专注于防止对残疾人的歧视,并要求企业和组织为身体障碍者提供住宿,在后几年进行了重新诠释,以鼓励网站所有者创建功能,使视障人士更容易穿越他们的产品。在2018年7月,19位检察长签署了一份请愿书,致当时的美国司法部长杰夫塞申斯,使网站无障碍成为ADA的正式认可部分,因此忽视网站的无障碍性。仅在2018年6月和7月,就网站提起的诉讼超过150起,未能为盲人提供便利。

作为一名网络开发者,我不仅开始同情那些视力受损的人,而且还开始关注如何遵守这些可能的未来法规。我怎样才能确保那些有视力障碍的人能够有效地使用我的网站?此外,怎么会有人?幸运的是,答案很简单。它以ARIA属性的形式出现,或者可访问的富Internet应用程序属性完整,可以直接添加到HTML代码中,无需进一步安装或设置。

通常,Tab按钮可以轻松访问HTML元素。在网页上尝试按Tab键。诸如按钮,链接,输入字段等元素甚至可能是一些图像可以非常容易地聚焦。但是当元素不属于这些类别时,事情会变得棘手。使用Javascript,尤其是与Angular或React等Web框架结合使用时,通常会导致使用Javascript

’s or 并且使用导航元素或滚动滑块,旋转木马,使用flexbox和CSS网格的特殊表等重要功能,并使用它们。按原样,div和span不能被选项卡,因此任何div / span元素您的网站要求用户使用它们做任何事情都会被丢失。说真的,如果没有你的帮助,视力不佳的用户绝对没有办法访问这些元素。所以how你能帮我吗?简单。那个div还是跨度?只需为其添加tabIndex属性,并将其设置为“0”。

请参阅tabIndex属性,指示使用Tab键时可以在网页上关注的内容。可以选项卡的项是自动使tabIndex等于0的项。这些是上述链接,输入字段,按钮等。默认情况下,div和spans等项的tabIndex等于“-1”。就键盘导航用户而言,tabIndex低于零的任何项目都是不可见的。因此,要使这些不可见的项目再次可见,就像将tabIndex设置为零一样简单。您还可以将其tabIndex设置为正数,例如1或2.具有较高tabIndex的项目将在按Tab键时首先关注,然后按照数字顺序使用较低tabIndex的那些(例如,按Tab将首先关注tabIndex为5的项目。再次按Tab键将关注tabIndex为4的项目。依此类推。)但要小心设置tabIndex大于0的元素。它往往会打破事物的流动,在页面上的默认可聚焦项目之前有一个聚焦的项目,你会发现自己必须通过将任何其他项目设置到正确的tabIndex来确保选择能力的正确顺序(想象一下)只在页面底部设置一个tabIndex为5的链接。这是用户按下Tab键选择的第一件事,然后再次按Tab键将关注tabIndex为零的元素,比如说是一个导航链接at在您的页面顶部。用户正在全程打乒乓这一页。它有助于制造混乱。)

键盘导航是一个相当深刻的主题。使用键盘绕过而不仅仅是按Tab键ad-infinitum还有许多事情需要担心。点击即可找到更多信息here.

使用tabIndex时,视力不佳的用户可以遍历您的网页。但他们怎么会知道他们在哪里?他们使用屏幕阅读器,这是一种软件,基本上决定了屏幕上的内容。它将读取您网页上的文本,它将读取关注的元素上的文本,但仅限于该元素包含所述屏幕阅读器支持的文本。如果您的网站由div和span组成,则屏幕阅读器无法知道它们包含的内容,除非您明确告诉它包含它的内容。此外,没有办法知道你的div或span应该代表什么。它是一个用于滚动页面的菜单滑块吗?或者它是一个导航标签,用于浏览网站的不同部分?谁说?你猜怎么着?你要说。

这里是ARIA再次发挥作用的地方。通过向元素“aria-role”添加属性,您可以定义该元素应该表示的内容。它是滑块吗?然后输入'slider'作为它的咏叹调角色。是一个div的风格和脚本作为按钮?然后'aria-role =“按钮”'它起来。屏幕阅读器现在将告诉视障用户这是他们关注的按钮。

但是如果该按钮被禁用或隐藏在视图之外怎么办? ARIA也可以处理这个问题。向元素添加aria-disabled属性,或者aria-hidden = true以确保用户的屏幕阅读器正确地传递该信息。

ARIA的另一个非常重要的功能是允许您在元素上添加描述性标签。通过在元素中添加“aria-label”属性,您可以键入将由屏幕阅读器直接读取的文本。因此,如果您在网页上创建了一个按钮,当用户点击时向用户收取2.99美元的费用时,请务必通过添加“aria-label =”点击购买该项目的$ 2.99“”属性来告知该用户。

ARIA易于使用,无论您是否使用框架,都可以直接添加到HTML代码中。甚至像React这样的框架也支持在使用JSX创建组件时使用ARIA。

单击可以找到有关使用ARIA角色和标签的更多详细信息here.

如果您有兴趣使用屏幕阅读器来测试您的网站如何遇到视力受损的用户,那么您最好使用JAWS如果在Windows上,因为这是迄今为止使用最广泛的屏幕阅读器。如果在Mac上,Voiceover可以使用,并与OS一起打包,因此无需安装或购买。更节俭的Windows用户可以测试NVDA,这是免费的捐赠选项。

网站可访问性 - 帮助视力障碍者参见