html - 'aria- describeby' 属性的含义是什么？

Question

以下 HTML 由 jQuery Grid 插件插入：

<td role="gridcell" style="" aria-describedby="list_createdBy">Sam</td>

'aria- describeby' 属性的含义是什么？

score 27 · Accepted Answer

这在aria 规范中有所描述。它给出了一个元素的 id，该元素提供了一些用户可能需要的有关当前元素的一些附加信息。

score 8 · Accepted Answer

下面是如何使用 aria- describeby 属性的示例。当您有一个包含有关元素信息的文本时使用它。Aria- describeby 必须与描述它的文本的 id 相同。

First name: <input aria-describedby="name" type="text"> <em id="name">Your first name must be correct.</em>

score 4 · Accepted Answer

乍一看，我会说aria-describedby这里可能会被忽略，因为它是定义在<td>. aria-describedby大多数浏览器和屏幕阅读器在设置在非交互式（可聚焦）元素上时会忽略信息。

但是具体的例子有点复杂，因为role="gridcell"它覆盖了的语义，<td>因此如果它遵循gridcell 的 ARIA 规范，则提供的例子是有效的。这是一个自定义组件。

一般而言，该属性aria-describedby为屏幕阅读器提供了要随元素内容公布的附加信息（不是唯一的，而是最常见的用例）。

例如，不仅"Logout"屏幕阅读器会宣布"Logout, John Doe"：

    Logged-in as <span id="user">John Doe</span>.
    <a aria-describedby="user" href="/logout">Logout</a>

或带有工具提示的示例（提示：此处缺少 Javascript 部分）：

    <button type="button" aria-describedby="my-tooltip">Snipping Tool</button>
    <div hidden id="my-tooltip" role="tooltip">
        It can take still screenshots of an open window,
        rectangular areas, a free-form area,
        or the entire screen.
    </div>

或者带有表单元素的示例，另一个常见的用例：

    <form ...>
        <label for="my-name">Full name</label>
        <input aria-describedby="my-name-desc" id="my-name" type="text"/>
        <p id="my-name-desc">
            Please tell us your full name.
        </p>
    </form>

当用户关注输入字段时，上面的示例将立即宣布两者<label>和附加描述（由定义）。aria-describedby它不仅消除了阅读环境以了解预期输入的内容的需要，而且当<form>屏幕阅读器用户可能更复杂时，它还可以阅读除表单控件之外的所有元素。这是与阅读页面其余部分不同的体验。因为键盘事件可以与屏幕阅读器或表单控件交互，但很难同时与两者交互。更不用说屏幕阅读器提供了许多有用的键盘快捷键，例如按“H”将跳转到下一个标题，但显然不是在<input>聚焦字段时。然后将输入“H” <input>。

关于咏叹调：

ARIA 通常用于提高屏幕阅读器的可访问性（不仅但主要是 atm。）。
使用 ARIA 并不一定会让事情变得更好！如果没有正确实施和测试，ARIA很容易导致可访问性显着下降. 不要仅仅为了在代码中加入一些你不完全理解的“很酷的东西”而使用 ARIA。遗憾的是，在可访问性方面，ARIA 实现经常引入比解决方案更多的问题。这是相当普遍的，因为有视力的用户和开发人员不太可能在屏幕阅读器的广泛测试中付出额外的努力，而另一方面，ARIA 规范和验证器目前还远非完美，在某些情况下甚至令人困惑。最重要的是，每个浏览器和屏幕阅读器均不统一地实现 ARIA 支持，从而导致行为中的主要不一致。通常最好完全避免 ARIA，因为它不清楚它究竟做了什么，它的行为方式，并且不会使用所有屏幕阅读器和浏览器（或至少是最常见的组合）进行密集测试）。免责声明：我的目的不是要羞辱 ARIA，而是要羞辱 ARIA 的糟糕实现。事实上，HTML5 不提供任何其他替代方案来实现 ARIA 将为可访问性带来显着好处的情况并不少见，aria-hidden例如aria-expanded. 但只有在正确实施和测试的情况下！

关于aria- describeby

提供元素内容的附加信息
在可聚焦元素（例如按钮、输入、a）上按预期工作。在其他元素上大多没用（“大部分”有例外）
IE 11 有点棘手。有时会被忽略。如果在被引用a的元素被隐藏（buttondisplay:nonetabindex="-1"rolerole="none"
如果屏幕阅读器在焦点模式（TAB 键）或虚拟模式（使用 ARROW 键阅读内容）下使用，可能会有不同的行为
Firefox 和 Internet Exploreraria-describedby都只尊重焦点模式。因此，将其添加到不可聚焦的元素是没有意义的。来自：ADG
虽然 NVDA 会立即宣布描述，但 JAWS 有时会提示手动按JAWS+ Alt+R来宣布它。来自：ADG
如果引用的元素被隐藏，则无法搜索Ctrl+F（这是用户喜欢浏览网站以快速找到所需内容的常见方式）。来自：ADG
我们真正推荐使用 , 的唯一情况aria-describedby是将附加信息附加到交互元素（例如关联可见信息，例如与表单控件）。来自：ADG
好主意：使用aria-describedby（在表单控件上）和role="alert"（在 SPAN 上）的组合来处理表单控件错误。来自：W3.org

score 0 · Accepted Answer

基本上，

aria- describeby属性用于通过使用 id 参考列表将描述性信息附加到一个或多个 HTML 标记（id 参考列表包含一个或多个唯一的 HTML 标记 id）。

aria- describeby属性与aria-labelledby属性（描述 HTML 标签本质的标签）非常相似，但aria- describeby属性提供了用户可能需要的有关 HTML 标签的更多信息。

aria- describeby和aria-labelledby属性主要对使用屏幕阅读器等辅助技术的用户有用。

以供参考：

html - 'aria- describeby' 属性的含义是什么？

4 回答 4

关于咏叹调：

关于aria- describeby

Related

Reference