【问题标题】:ARIA Roles: Can an 'owned element' be nested arbitrarily deep in the DOM?ARIA 角色:“拥有的元素”可以任意嵌套在 DOM 中吗?
【发布时间】:2015-05-01 22:45:38
【问题描述】:

W3C 的 Accessible Rich Internet Applications (WAI-ARIA) 1.1 将拥有的元素定义如下(来自第 4 部分):

自有元素:“自有元素”是该元素的任何 DOM 后代、通过 aria-owns 指定为子元素的任何元素,或拥有的子元素的任何 DOM 后代。

(让我们忽略aria-owns,该属性允许您通过元素 ID 在 DOM 中的任何元素之间指定父/子关系 [在可访问性树中]。)

了解什么是自有元素很重要,因为许多角色都有required owned elements(反之亦然:必需的上下文角色)。

该定义表明任何 DOM 后代都算数。然而,特别是在网格和树等复杂结构的情况下,可访问性树似乎无法识别多个级别的拥有元素——尽管很难说,因为所有屏幕阅读器都不同,所有浏览器也不同。此外,还有许多角色似乎没有添加任何无法从 DOM 树中推断出的值(例如,大多数 group 子类,尽管提到与本机 HTML 表的并行性作为 @ 的目的) 987654329@) 并且可能只是作为中介存在。此外,在示例代码中,我不记得曾见过所需元素相隔不止一层的复杂结构。在我遇到的少数情况下,中间元素通常具有presentation 角色。

随意在一般或特定级别上回答这个问题,但我个人关心的是主要由 <div>s 和 <span>s 组成的 DOM 层次结构,而不是原生 HTML 语义。 This page on ARIA practices 谈到表格小部件并确实提到:

如果您决定不使用原生 HTML <table> 元素并选择更灵活的元素,例如 <div><span>s,在本节中应用了 WAI-ARIA 角色,您应该在结构上布局您的元素符合您对 HTML 的期望。您的所有rowheaders 都应该在row 中,并且您的gridcells 应该是每个后续行的子级,其格式与<td>s 和<th>s 内<tr>s 内的HTML 格式相同。

...但我不确定这是必要的还是只是建议;通常,文档使用“必须”来描述严格的规范。

【问题讨论】:

    标签: html dom accessibility wai-aria


    【解决方案1】:

    所有子关系必须是直接关系,除非在临时结构上使用了 role="presentation"。不这样做可能/将导致计数和值混乱。

    通常,当存在临时结构时,它们是样式或脚本的挂钩,您可以重组代码以摆脱它们(这肯定会使 HTML 更清晰)。

    您提到的有关表格的示例使用了“应该”一词,但并不规范。它真的应该说“必须”。您不能错过网格中的任何结构,并且仍然希望公告和导航正常工作。这意味着您最好拥有规范文档规范部分中所需父子角色中列出的所有结构。

    【讨论】:

    • 谢谢,这正是我需要知道的!目前我正在努力连接ng-grid 以实现可访问性;我在您的个人资料中看到您使用 Angular,所以您可能明白我正在使用 div 中的 div... :)
    • 哦,是的,我非常了解您在处理什么...我所做的这篇博文可能会为您提供一些关于更普遍的 Angular 可访问性问题unobfuscated.blogspot.com/2015/02/… 的链接以查找详细信息
    猜你喜欢
    • 2011-10-22
    • 2021-02-11
    • 1970-01-01
    • 2013-11-01
    • 2012-12-09
    • 2022-10-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多