aria- describeby和多层HTML标签 最终思想

问题描述

以下是使用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？

解决方法

简短答案

这些示例都将宣布为“ 日历”，此日历显示了波士顿红袜队的比赛时间表。** 在大多数屏幕阅读器/浏览器组合中 。这是假设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，因此请用适当的角色替换它。