To ARIA! The Cause of, and Solution to, All Our Accessibility Problems

当WebAIM评估客户网站的可访问性时,我们通常花费更多时间来评估和报告ARIA使用情况,而不是任何其他问题几乎我们撰写的每份报告都包括一个警告反对ARIA滥用的部分,并概述需要纠正的ARIA用途,或者最常被删除Ironically, this is often followed by a list of issues that can only be addressed with ARIA.

像许多90年代青少年的成年人一样,我可以想到辛普森一家的报价几乎适合任何情况In one popular episode, Homer holds up a mug of beer and proposes a toast "To alcohol: the cause of, and solution to, all of life’s problems." With just a bit of tweaking, this quote represents my feelings about ARIA.

To ARIA! The cause of, and solution to, all our accessibility problems.

每个咏叹调角色、州、或财产可以提高可访问性当正确使用,反之亦然然而,在查看了数百个真实的ARIA使用和滥用之后,很明显一些ARIA属性通常以导致问题的方式使用而不是解决,而其他属性应该更频繁地用于解决特定问题以下是每个类别中一些最常见的ARIA属性:

的原因…

大多数有问题的ARIA属性共享一个类似的问题 - 它们通常用于覆盖正确的HTML语义,从而向屏幕阅读器用户呈现不正确的信息或交互例如:

角色= "菜单"

这可能是最坏的罪犯咏叹调角色= "菜单"(要么菜单栏)不是页面顶部的简单链接集合它是一个类似软件的选项列表,其中箭头键用于导航菜单和子菜单我遇到的大多数“菜单”都应该标记出来<NAV>(要么角色=“导航”),而不是其它。

角色=“网格”

应使用箭头键(如电子表格)导航网格它不应该用在简单的数据表或使用Tab键导航的项目网格上将此角色添加到数据表可以将表内容呈现给屏幕阅读器用户。

角色= "工具栏"

这意味着使用箭头键而不是Tab键导航,并保留用于复杂的应用程序工具栏,而不是基本的链接或按钮组这里似乎是一个模式……

作用=“应用程序”

与前三个角色一样,这会导致Windows屏幕阅读器从“读取/浏览”模式切换到“表单/聚焦”模式但是,除了非常复杂的小部件之外,很少需要高级键盘交互大多数交互可以使用本机表单控件或使用具有明确定义的设计模式的ARIA角色来解决。

角色=“标题”

一个真正的标题(<H1>-<H6>几乎总是可以使用)如果正确使用此角色,它也应该具有适当的咏叹调级别,但在现实世界中,这通常会丢失。

角色=“警报”

这应该是用于重要信息应该读的屏幕阅读器就出现如果正确实施,ARIA警报可能很有用,但警报可能出现的方式有很多种几个例子:

  1. 一个隐藏的元素角色=“警报”在页面加载时应用,因此屏幕阅读器立即读取警报(即使它在视觉上被隐藏),而不是在它出现时读取它。
  2. 焦点在出现时设置为警报,因此它被读取两次(一次因为它是一个警报而且因为它有焦点)。
  3. 反复触发ARIA警报,使屏幕阅读器用户不堪重负。

角色=“按钮”

如果使用正确,它可以告诉屏幕阅读器一个元素的功能就像一个按钮,但这个角色经常被外部使用(<按钮的作用= "按钮" >),或用于应该使用真正按钮的地方我也看到它用于不起按钮作用的元素例如,如果给出了链接角色=“按钮”,JAWS会告诉用户使用空格键激活按钮,但链接只能通过Enter激活这将需要关键事件检测,以确保按下空格键将激活“按钮”。

aria-label

这可以是标记没有文本标签的表单控件的有效方法,或者为使用图标字体和CSS背景图像的交互元素提供替代文本然而,aria-label还可以覆盖其他重要信息,如链接文本它经常被过度使用,或者只呈现特殊的屏幕阅读器信息,这会给屏幕阅读器用户带来不一致的体验此外,因为没有视觉迹象表明它是在使用,它是经常被忽视的测试我看过无数的例子,其中ARIA标签是完全错误的。

的解决方案……

我们经常建议您更频繁地使用一些ARIA属性其中大部分填补了HTML语义的显着差距。

咏叹调扩展

这可以告诉屏幕阅读器用户激活按钮或链接将导致内容在下面展开和折叠(例如,手风琴),以及它当前是否被折叠或扩展。

ARIA-haspopup

此属性允许屏幕阅读器用户知道按钮或链接将导致弹出某些内容ARIA 1.0声明这将与弹出的菜单和子菜单一起使用,我们绝对建议在这些情况下使用它通常用于其他类型的弹出,所以咏叹调1.1有扩大使用,包括其他一些弹出类型(最明显aria-haspopup = "对话框"),但它的支持仍然有限。

ARIA-describedby

ARIA-describedby属性将描述关联到表单控件和其他交互元素它不会覆盖表单标签,链接文本或替代文本,因此当它被误用时,影响通常不那么显着。

aria-labelledby

这个属性可用于提供多个标签一个表单控件,等等它有一些危险aria-label,就像覆盖链接文本一样但是,由于它与页面中出现的文本一起使用,因此几乎不会经常滥用。

咏叹调压

这可能是有用的识别的状态切换按钮,可以按unpressed,比如视频播放器的静音按钮。

角色=“开关”

由于开/关或切换开关在网站上变得越来越常见,因此ARIA 1.1包含了识别此类交互的新角色支持仍然不一致,但正确实现的ARIA交换机的后备应该是一个复选框,这是一个可接受的后备,直到支持改进。

角色=“演示”

这个角色会从一个元素删除默认的语义它是有用的在隐藏布局表从屏幕阅读器。

......的原因和解决方案

我经常发现自己鼓励正确使用并阻止不正确使用以下ARIA标记:

角色=“对话”

这个属性正在经历一些成长的痛苦。ARIA 1.0为对话框提供了非常具体的定义粗略地说,对话框被定义为一个中断进程并需要响应的窗口,但许多人将此角色用于原始范围之外的其他类型的对话框。ARIA 1.1扩展了对话的定义: "A descendant window of the primary window of a web application." It also has new attributes ofaria-haspopup = "对话框",和ARIA模态=“真”这可以进一步增强对话框的可访问性但是,仍然缺乏对这些新属性的支持,以及当前的实现角色=“对话”可能令人困惑和不一致It also causes reading problems in the NVDA screen reader (although this should change in the future)出于这个原因,我和这个角色的最佳使用斗争,和我们的建议可以根据具体的实现和时间不同的客户。

角色=“标签列表”

一组选项卡可以显示大量重要信息:选择选项卡将更改后面的内容部分,当前选择的选项卡,可用的选项卡数量等ARIA选项卡在正确实施时向屏幕阅读器用户显示相同的信息,但如果实施不正确或不完整,则会导致问题多于解决问题。

tabindex = " 0 "

tabindex属性从技术上讲,它不是ARIA属性,它与ARIA密切相关使用正确,它允许不“可聚焦”的元素(例如,<DIV>s)接收键盘焦点在实施时,附加的技术是必要的,如给元素一个适当的角色和使用脚本触发元素的功能,当输入和/或空格键事件被检测到然而,tabindex = " 0 "经常使用的元素不是“可行的”,这意味着用户可以导航到它与键盘但不能与元素呢例如,可以给出表格中的重要说明tabindex = " 0 "因此,屏幕阅读器用户在使用Tab键导航时会发现它们,但更好的技术可能是将这些指令与aria-describeby关联到表单控件,或重组表单以便在开头显示指令。

tabindex = " 1 "

这可以用于设置“编程”的关注,否则不能接收焦点,这意味着用户将跳过它当按下Tab键,但可以通过设置脚本或链接有时使用它而不考虑链接或控制tabindex = " 1 "将不再是键盘万才体育网官网。

地标和HTML5地区

这些可以在适当使用时增强方向和导航至少,大多数网站应该有一个<头><NAV><主>,和<页脚>使用不正确或过度(通常是),地标比帮助产生更多的噪音两个地区/地标,也经常过度使用:<NAV>/角色=“导航”<头>(ARIA等效 -角色=“大旗”- 似乎没有经常过度使用<头>)。

ARIA Design Patterns拯救

如果你在怀疑关于咏叹调的适当的实现,是首先要考虑的问题WAI-ARIA创作实践文档,尤其是部分设计模式和小部件本节概述了20多种常见ARIA小部件的正确模式每个小部件都包含以下信息。

  1. 正确的窗口小部件类型的描述Does the element that you are creating match the widget description in this section? If it does not, maybe you should be using different ARIA attributes, or no ARIA at all或者您可能应该更改正在构建的小部件,以使其与定义一致。
  2. 键盘交互本节将识别必需和可选的击键例如,如果你创建一个滑动条,用户必须能够增加和减少的价值上升/下降左/右箭头键,而不是一套Home和End键还必须将滑块值设置为开头和结尾页面向上/向下翻页可以可选地被编程为跳过更大的值(例如,10)。
  3. 正确的咏叹调角色、状态和属性与键盘控件一样,它将识别窗口小部件的必需和可选ARIA属性例如,滑块需要角色滑块ARIA-valuenowaria-valuemin,和ARIA-valuemax其他值如ARIA-valuetext咏叹调取向某些滑块可能是必要的标签也需要提供aria-labelledbyoraria-label
  4. 例子对于许多但不是所有小部件,提供了工作示例不幸的是,在线发现了许多不正确的ARIA示例,因此通常最好先从提供的示例开始WAI-ARIA创作实践文档。

如果开发人员在将ARIA添加到其页面之前参考此文档,则可以避免许多ARIA可访问性问题,并且ARIA解决方案会增加。

评论

  1. 我注意到,人们滥用“aria-expanded”通常,放在扩大区域而不是正在扩大它的按钮。