【问题标题】:aria role="application" and tab-trappingaria role="application" 和制表符
【发布时间】:2020-05-09 05:42:07
【问题描述】:

Tab trapping 是一个相当成熟的模式 (example)。通常为了可访问性,它允许键盘用户在下拉菜单和模式中导航。然而,令人担忧的是对用户的影响,因为选项卡事件的本机功能已被新行为(循环)覆盖。对于视力正常的用户来说,这没什么大不了的,但对于像 NVDA 和 JAWS 这样严重依赖原生选项卡功能的辅助技术用户来说,这是一个问题。

WAI-ARIA 有一个解决方案,用于以 aria-role="application" 的形式通知 Assistive Technologies 原生键盘功能何时被覆盖:

键盘交互完全在网络作者的控制之下,并且 可以是与特定小部件相关联的任何东西 实施的。例如,在幻灯片应用程序中,小部件可以是 创建使用箭头键在幻灯片上定位元素, 并通过 ARIA 现场区域使用音频反馈来传达 与其他对象的位置和重叠状态。焦点正在被管理 通过 aria-activedescendant。

tab 、 Space 和 Enter 键以及 Escape 必须由 应用程序。一个例外是如果焦点设置为标准 应用程序内支持键盘导航的小部件 浏览器,例如输入元素。

这意味着任何使用制表符的组件都必须有一个role="application"总是

但是我不相信这种常见的做法。例如,Target.com 之类的网站(在其下拉菜单中使用制表符陷印)将其归类为列表,如网站 Accessibility Tree 中所示:

我将不胜感激任何有经验的观点。我在这里正确解释 ARIA 吗?使用制表符的组件总是应该用role="application"装饰吗?

【问题讨论】:

    标签: accessibility wai-aria screen-readers uiaccessibility web-accessibility


    【解决方案1】:

    简答

    如果您将菜单设置为模式对话框,则无需添加role="application"。对于其他模式,它可能适用(极不可能,role="application" 是一个非常专业的角色)但那时您可能首先实施了错误的模式。

    更长的答案

    只要正确实施,循环模式就很好(而且 target.com 做得很好)

    只要正确实施,这种模式就没有什么问题(target.com 似乎出人意料地做得相当好,只是他们可以做得更好的几件事)。

    以“目标”为例,您会注意到,当您单击“类别”时,显示的菜单实际上被视为模式对话框。

    它有role="dialog",打开它的“按钮”有aria-expanded

    如果您使用的是 tab 键,它们还会在此模式中捕获选项卡焦点并提供一个“关闭”按钮,该按钮显示在列表底部。

    到目前为止一切都很好,在模态对话框中循环并没有错,因为这是预期的行为。

    他们还做对了一些其他事情,一旦“对话框”打开,您将无法访问任何其他内容。例如,在屏幕阅读器中,您可以按 1-6 键来查找下一个标题级别,但您不能在菜单打开时执行此操作,因为它们会将 aria-hidden="true" 应用于菜单模式之外的所有内容(真正的模式陷阱)。

    您还可以关闭菜单模式并将焦点返回到首先打开它的菜单项,因此它们也可以正确管理焦点。

    最后,您可以使用 Escape 键关闭菜单模式,这也是预期的行为。

    因此,如果您想在菜单中遵循这种模式,我会说去吧,它们可以按原样访问,并且屏幕阅读器用户不会费力地使用它们。

    我们能比 target.com 做得更好

    Target 的基础知识正确,只是缺少几个关键步骤。

    打开菜单的“按钮”应该具有aria-controls 属性,以便正确地将它们链接在一起。

    菜单对话框中的菜单项都应该在<ul> 周围有<nav> 元素(尽管可以说这些模态应该只能通过菜单按钮访问,这种关联是隐含的,这是一个小问题)。

    他们使用的箭头精灵有focusable="false",这很好,但他们没有添加role="presentation",或者更好的是aria-hidden="true",所以如果你的屏幕阅读器设置为详细,它们会被宣布。 (aria-hidden="true" 更好,因为支持更好)。

    菜单本身不应该是多层的。即,如果您单击列表顶部的“主菜单”,那么您的位置就会变得混乱,我是否仍在模态对话框中?此外,这是以一种方式实现的,一旦您点击链接(可能是时间问题?),它就不会宣布“主菜单”列表中的第一项,因此它会让人迷失方向。这是他们的实现的最大问题。

    还有其他东西,但你明白了,如果你的菜单只是每个“下拉”(模态)的一个列表,那么这种实现方式是完全可以接受和可用的,并且比我拥有的许多菜单实现更好见过。

    所以我应该使用role="application"

    没有。

    说真的,你可能从不在你的职业生涯中需要使用它,而且它的使用会破坏很多可访问性。

    哦,你想要更多细节吗?没问题!

    不,您不需要在这里使用role="application",实际上这样做会引入更多可访问性问题。

    role="application" 表示所有控件都是自定义的,您应该忽略标准网站控件。 (您基本上是在告诉用户/屏幕阅读器“将其视为桌面应用程序,其中将通过菜单等解释快捷键”和“期望一些与网站无关的奇怪行为,不要依赖您的正常键盘快捷键因为他们可能不会工作')

    由于这遵循标准的网络模式(在模态中捕获焦点),因此添加 role="application" 实际上会使人们感到困惑。

    您提到了 Tab 循环,但在列表中它按预期运行(按列表末尾的向下箭头不会循环),因此 Tab循环只发生在模态中。

    我认为我在role="application" 上链接的页面的以下引用总结了重要信息。我添加了粗体以强调适用于您问题的关键点,并在适当的情况下添加了 cmets。

    应用程序角色向辅助技术表明,这 部分网页内容包含不符合任何 其他已知的 HTML 元素或 WAI-ARIA 小部件。任何一种特殊的 应暂停对 HTML 结构和小部件的解释,并且 控制权应该完全交给浏览器和网络 处理鼠标、键盘或触摸交互的应用程序。

    在这种模式下,网络作者全权负责处理 任何和所有键盘输入、焦点管理和其他交互 不能假设辅助技术会对 他们的结局

    所以基本上如果你添加了role="application",你就不会得到任何元素的原生行为,这会引入很多工作! (实际上大多数屏幕阅读器仍然允许基本功能,但他们这样做是因为人们滥用role="application"

    如果应用程序角色包含的网络应用程序包含 应该像普通网页内容一样对待的部分,一个角色 应使用文档或文章

    因此,您必须将role="article"role="document" 添加到列表、关闭按钮等。基本上整个事情都会有role="article"(因为那将是最合适的角色)。

    除非您正在构建非常复杂的软件,否则不应使用role="application"

    【讨论】:

    • 优秀的答案!我怀疑我在这里对应用程序的使用不正确,但是您指出了一个事实,即制表符陷阱是预期的行为(对于模态),以及解决其“成功”使用的 w3 指南says as much非常感谢!
    • 酷,你有那个网络应用的链接吗?从未见过任何不完整的残骸使用role="application",所以很高兴看到它正确实施。我认为我说的是正确的,90% 的开发人员不处理可访问性,剩下的 90% 将使用 HTML5 构建 Web 应用程序,所以我们所说的只有不到 1% 的开发人员需要经历痛苦管理虚拟光标,构建每个组件的完整状态管理等。
    猜你喜欢
    • 1970-01-01
    • 2014-08-23
    • 1970-01-01
    • 1970-01-01
    • 2021-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-09
    相关资源
    最近更新 更多