accessibility - 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与第一个示例相同？

标签： accessibilitywai-ariascreen-readersnvda

Answer 1

简答

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

长答案

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

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

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

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

尽管它们会（应该）在您给定的示例中以相同的方式宣布，但这是假设您使用aria-hidden="true". 它还假设<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"是应该谨慎使用，因为它会导致所有键盘事件跳过屏幕阅读器并直接进入您的应用程序。使用它时要非常小心，因为在大多数情况下它是不需要的，并且可能会导致很多可访问性问题。这是一篇简短的文章，更多地解释了这个角色的利弊。

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