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

Question

jQuery Grid插件插入以下HTML:

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

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

Answer 1

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

Answer 2

乍一看，我想说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，而是要羞辱它糟糕的 ARIA 实现。事实上，HTML5 不提供任何其他替代方案的情况并不少见，而实施 ARIA 将为可访问性带来显着的好处，例如aria-hidden或aria-expanded。但前提是正确实施和测试！

关于aria-描述的

• 提供元素内容的附加信息
• 在可聚焦元素（例如按钮、输入、a）上按预期工作。对其他元素来说大多没用（“大部分”也有例外）
• IE 11 有点棘手。有时它会被忽略。a如果在or上实现button，如果引用的元素被隐藏 ( display:none)、它的位置（是否引用了内部元素？）或者它上面有tabindex="-1"or role（例如）等，可能会产生影响。role="none"请确保测试所有屏幕阅读器
• 如果屏幕阅读器在焦点模式（TAB 键）或虚拟模式（使用箭头键阅读内容）下使用，则行为可能会有所不同
• Firefox 和 Internet Exploreraria-describedby仅在焦点模式下尊重。因此，将其添加到不可聚焦的元素中是没有意义的。来自：ADG
• 虽然 NVDA 会立即公布描述，但 JAWS 有时会提示手动按JAWS+ Alt+R来公布描述。来自：ADG
• 如果引用的元素被隐藏，则它不可搜索Ctrl+F（这是用户喜欢导航网站以快速找到他们要查找的内容的常见方式）。来自：ADG
• 我们真正推荐使用aria-describedby, 的唯一情况是将附加信息附加到交互元素（例如，将可见信息关联到表单控件）。来自：ADG
• 好主意：使用aria-describedby（在表单控件上）和role="alert"（在 SPAN 上）的组合来解决表单控件错误。来自：W3.org

Answer 3

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

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