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

【问题标题】：What is the meaning of the 'aria-describedby' property?'aria- describeby' 属性的含义是什么？
【发布时间】：2011-06-02 17:35:47
【问题描述】：

以下 HTML 由 jQuery Grid 插件插入：

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

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

【问题讨论】：

标签： html xhtml wai-aria

【解决方案1】：

基本上，

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

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

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

供参考：

【讨论】：

【解决方案2】：

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

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

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

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

    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 通常用于改善屏幕阅读器的可访问性（不仅是但主要是 atm。）。
使用 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 的糟糕实现。事实上，HTML5 不提供任何其他替代方案来实现 ARIA 将为可访问性带来显着好处的情况并不少见，例如aria-hidden 或 aria-expanded。但前提是正确实施和测试！

关于aria-describedby

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

【讨论】：

【解决方案3】：

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

【讨论】：

即使在 HTML 源代码中没有aria-describedby，我也可以清楚地阅读附加信息。所以，问题是：这个标签对谁有用？
@BinarWeb，它最有可能对使用屏幕阅读器等辅助技术的人有用，因此可能不会以与视力正常的用户相同的方式/顺序“阅读”页面导航或理解页面（尽管从上面的示例中不清楚该插件是否正确实现了它，并且对非交互式元素或没有 ARIA 角色的元素的支持是不确定的）。元素 aria- describeby references 甚至可能包含对视力正常的用户隐藏的文本（例如，如果开发人员认为这对视力正常的用户是显而易见的）。

【解决方案4】：

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

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

【讨论】：