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

htmlxhtmlwai-aria

41

41

以下HTML是由jQuery Grid插件插入的：

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

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

- RPB

4个回答

30

30

这在aria规范中有描述。它提供了一个元素的ID，该元素提供关于当前元素的某些用户可能需要的其他信息。

- Quentin

即使在HTML源代码中没有aria-describedby，我仍然可以清楚地阅读附加信息。那么，问题是：这个标签对谁有用？ - Binar Web

5

@BinarWeb，这对于使用辅助技术如屏幕阅读器的人来说可能会更有用，因此可能不会像视觉用户那样按照相同的方式/顺序浏览或理解页面（尽管从上面的示例中不清楚该插件是否正确实现了它，对于非交互式或没有ARIA角色的元素支持也不确定）。元素aria-describedby引用的内容甚至可能包含对于视觉用户而言被隐藏的文本（例如，如果开发者认为这对于视觉用户来说是显而易见的）。 - Max Starkenburg

10

10

以下是一个示例，展示了如何使用aria-describedby属性。当您有一个包含有关元素信息的文本时，它就会被用到。aria-describedby必须与描述该元素的文本的id相同。

名字: <input aria-describedby="name" type="text">
<em id="name">您的名字必须正确填写.</em>

- jakobinn

6

6

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

但由于role =“gridcell” 覆盖了< td >的语义，所以提供的示例是有效的，如果遵循网格单元格的 ARIA 规范，那么这是一个自定义组件。

总体而言，属性aria-describedby提供了与元素内容一起通报的额外信息给屏幕阅读器（不止此用途，但是最常见的用途之一）。

例如，屏幕阅读器将不仅会通报“注销”，还会通报“注销，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很容易导致显著恶化的可访问性。不要只是因为在代码中拥有一些“酷炫”的东西而使用ARIA，而你并不完全理解。很遗憾，ARIA实现通常会在可访问性方面带来更多问题而非解决方案。这种情况相当普遍，因为视障用户和开发人员不太可能把额外的精力投入到与屏幕阅读器的广泛测试中。另一方面，ARIA规范和验证工具目前远非完美，在某些情况下甚至令人困惑。此外，每个浏览器和屏幕阅读器的ARIA支持都以不统一的方式实现，导致行为存在重大的不一致性。通常，如果不确定ARIA的确切功能、行为方式，并且不会受到所有屏幕阅读器和浏览器的密集测试（或者至少是最常见的组合），那么完全避免使用ARIA可能是更好的主意。免责声明：我打算的不是贬低ARIA，而是其糟糕的ARIA实现。事实上，HTML5没有提供任何其他替代方案，其中实施ARIA将带来较大的可访问性效益，例如aria-hidden或aria-expanded，但前提是实施和测试得当。

关于aria-describedby：

- aria-describedby可以用于引用元素的描述性文本。这尤其适用于表单字段等具有相关标签和/或其他详细信息的元素。

提供元素附加信息
对聚焦元素（如按钮、输入框、链接）有效，对其他元素大多无用（“大多”有例外情况）
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（在 SPAN 上使用）和 role="alert"（在表单控件错误上使用）。来源：W3.org

- Hrvoje Golcic

0

0

基本上，

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

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

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

参考：

- Prateek Gupta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接