Question

jQuery Grid插件插入以下HTML：

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

'aria-describedby'属性是什么意思？

Answer 1

aria specification中对此进行了描述。它给出了一个元素的id，它提供了一些用户可能需要的当前元素的附加信息。

Answer 2

以下是如何使用aria-describedby属性的示例。当您拥有包含该元素信息的文本时，可以使用它。 Aria-describedby必须与描述它的文本的id相同。

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

Answer 3

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

但是由于role="gridcell"覆盖了<td>的语义，因此特定示例稍微复杂一些，因此，如果提供的示例遵循ARIA specification for gridcell，则该示例有效。这是一个自定义组件。

通常来说，属性aria-describedby为屏幕阅读器提供了额外的信息，该信息将随元素的内容一起发布（不是唯一的，也是最常见的用例）。 / p>

例如，屏幕阅读器将宣布"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：

ARIA通常用于改善屏幕阅读器的可访问性（不仅限于自动取款机）。
使用ARIA不一定会使事情变得更好！轻松ARIA can lead to significantly worse accessibility if not implemented and tested properly。不要使用ARIA只是为了让您理解一些“很酷的代码”。令人遗憾的是，在可访问性方面，ARIA实现经常引入比解决方案更多的问题。这是相当普遍的，因为有视力的用户和开发人员不太可能在屏幕阅读器上进行广泛的测试，而另一方面，ARIA规范和验证程序目前还不完善，甚至在某些情况下令人困惑。最重要的是，每个浏览器和屏幕阅读器都实现了对ARIA支持的不一致，从而导致行为上的重大不一致。通常最好的方法是，在不清楚ARIA的功能，行为方式且不会在所有屏幕阅读器和浏览器（或至少the most common combinations）上进行严格测试的情况下，完全避免使用ARIA。免责声明：我的意图不是贬低ARIA，而是贬低ARIA的不良实现。实际上，在实施ARIA会为可访问性带来重大好处的情况下，HTML5不提供任何其他替代方案并不少见。 aria-hidden或aria-expanded。但前提是必须正确实施和测试！

关于aria-describedby

提供沿元素内容的附加信息
在可聚焦元素（例如按钮，输入，a）上按预期工作。在其他元素上通常无用（“大多数情况下有例外”）
IE 11有点棘手。有时它会被忽略。如果在a或button上实现，以及如果隐藏了引用的元素（display:none），其位置（是否引用了内部元素？）或具有{{ 1}}或tabindex="-1"（例如role）等。请确保测试所有屏幕阅读器
如果在焦点模式（TAB键）或虚拟模式（使用箭头键读取内容）中使用屏幕阅读器，则行为可能会有所不同
Firefox和Internet Explorer都仅在焦点模式下遵守role="none"。因此，将其添加到不可聚焦的元素没有任何意义。发件人：ADG
虽然NVDA会立即宣布说明，但JAWS有时会提示手动按 JAWS + Alt + R 进行宣布。发件人：ADG
如果隐藏了被引用的元素，则无法使用aria-describedby进行搜索（这是用户喜欢浏览网站以快速找到所需内容的常见方式）。发件人：ADG
我们真正推荐使用Ctrl+F的唯一情况是将其他信息附加到交互式元素（例如，将可见信息与表单控件相关联）。发件人：ADG
好主意：将aria-describedby（在表单控件上）和aria-describedby（在SPAN上）组合使用以解决表单控件错误。发件人：W3.org

Answer 4

基本上，

aria-scribedby 属性用于通过使用 id 引用列表（一个 id 引用列表包含一个或多个唯一的 HTML 标记 ID）将描述性信息附加到一个或多个 HTML 标签).

aria-scribedby 属性与 aria-labelledby 属性非常相似（一个描述 HTML 标签本质的标签），但是 < strong>aria-writtenby 属性提供了有关用户可能需要的 HTML 标记的更多信息。

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

供参考：

'aria-describedby'属性是什么意思？

4 个答案:

关于ARIA：

关于aria-describedby