aria- describeby 和多级 html 标签

Question

这里是一个使用aria-describedby的例子

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <p id="info">
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>

假设我改成这样：

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <div id="info">
        <svg />
        <div></div>
        <div>
          <p>This calendar shows the game schedule for the Boston Red Sox.</p>
        </div>
    </div>
    <div role="grid">
        ...
    </div>
</div>

像 NVDA 这样的屏幕阅读器是否仍然像第一个示例一样宣布This calendar shows the game schedule for the Boston Red Sox？

Answer 1

简答

这些示例都将被宣布为“日历，此日历显示波士顿红袜队的比赛时间表。** 在大多数屏幕阅读器/浏览器组合中 . 这是假设正确处理了 SVG 并且您添加的空 div 确实是空的（请参阅此答案的结尾）。

长答案

aria-labelledby 将首先公布，aria-describedby 在大多数屏幕阅读器中排在第二位。

它们通常不会在同一个元素上一起使用，因为它们都可以包含要宣布的 ID 列表。

为了便于维护，我建议您将其更改为：-

aria-labelledby="calendar info"，这将确保所有浏览器/屏幕阅读器组合的阅读顺序一致。

虽然它们会（应该）在您给定的示例中以相同的方式公布，但这是假设您使用 aria-hidden="true" 对屏幕阅读器隐藏 SVG。它还假定您添加的 <div> 确实为空（而不仅仅是占位符）。

顺便说一句，确保您还将focusable="false" 添加到您的 SVG 以考虑 Internet Explorer 用户（否则他们可以专注于 SVG）。与此问题中的公告问题无关，只是一种好习惯。

我建议您的第二个示例应标记如下，以节省大量麻烦并允许 SVG 成为文档的一部分（如果您愿意）：-

<div role="application" aria-labelledby="calendar info">
    <h1 id="calendar">Calendar</h1>
    <div>
        <svg focusable="false" aria-hidden="true"/>
        <div></div>
        <div id="info">
          <p>This calendar shows the game schedule for the Boston Red Sox.</p>
        </div>
    </div>
    <div role="grid">
        ...
    </div>
</div>

最后的想法

您真的需要读出<h1 id="calendar" 吗？您的描述说“这个日历`，在此之前声明“日历”是多余的。

总是尽量避免重复。

如果是这种情况，那么您可以进一步简化您的示例，只使用aria-labelledby="info"。

另外最后一个观察role="application" 应该谨慎使用，因为它会导致所有键盘事件跳过屏幕阅读器并直接转到您的应用程序。使用它时要非常小心，因为在大多数情况下它是不需要的，并且可能会导致很多可访问性问题。 Here is a brief article that explains a bit more about the pros and cons of the role.

如果您删除 role="application"，则 aria-labelledby 可能无法在静态 div 上工作，因此请用适当的角色替换它。