aria-describedby 和多级 html 标签
aria-describedby and multiple level html tags
这里是一个使用 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>
屏幕reader像NVDA还是宣布This calendar shows the game schedule for the Boston Red Sox和第一个例子一样吗？
简答
这两个示例都将宣布为“日历，此日历显示波士顿红袜队的比赛时间表。** 在大部分屏幕中 reader / browser combos。这是假设 SVG 被正确处理并且你添加的空 div 确实是空的（见这个答案的结尾）。
长答案
aria-labelledby 将首先公布，aria-describedby 第二 在大多数屏幕中公布 readers。
它们通常不会在同一个元素上一起使用，因为它们都可以包含要公布的 ID 列表。
为了便于维护，我建议您将其更改为：-
aria-labelledby="calendar info"，这将确保阅读顺序在所有浏览器/屏幕 reader 组合中保持一致。
虽然它们会（应该）与您给定的示例相同，但这是假设您使用 aria-hidden="true" 从屏幕 readers 隐藏 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" 吗？您的描述说“这个 calendar` 之前声明“Calendar”是多余的。
始终尽量避免重复。
如果是这种情况，那么您可以进一步简化您的示例，只需要 aria-labelledby="info".
此外，最后一个观察 role="application" 应该谨慎使用，因为它会导致所有键盘事件跳过屏幕 reader 并直接进入你的申请。使用它时要非常小心，因为在大多数情况下不需要它，并且会导致很多可访问性问题。 Here is a brief article that explains a bit more about the pros and cons of the role.
如果删除 role="application"，则 aria-labelledby 可能无法在静态 div 上工作，因此请将其替换为适当的角色。
这里是一个使用 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>
屏幕reader像NVDA还是宣布This calendar shows the game schedule for the Boston Red Sox和第一个例子一样吗？
简答
这两个示例都将宣布为“日历，此日历显示波士顿红袜队的比赛时间表。** 在大部分屏幕中 reader / browser combos。这是假设 SVG 被正确处理并且你添加的空 div 确实是空的（见这个答案的结尾）。
长答案
aria-labelledby 将首先公布，aria-describedby 第二 在大多数屏幕中公布 readers。
它们通常不会在同一个元素上一起使用，因为它们都可以包含要公布的 ID 列表。
为了便于维护，我建议您将其更改为：-
aria-labelledby="calendar info"，这将确保阅读顺序在所有浏览器/屏幕 reader 组合中保持一致。
虽然它们会（应该）与您给定的示例相同，但这是假设您使用 aria-hidden="true" 从屏幕 readers 隐藏 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" 吗？您的描述说“这个 calendar` 之前声明“Calendar”是多余的。
始终尽量避免重复。
如果是这种情况，那么您可以进一步简化您的示例，只需要 aria-labelledby="info".
此外，最后一个观察 role="application" 应该谨慎使用，因为它会导致所有键盘事件跳过屏幕 reader 并直接进入你的申请。使用它时要非常小心，因为在大多数情况下不需要它，并且会导致很多可访问性问题。 Here is a brief article that explains a bit more about the pros and cons of the role.
如果删除 role="application"，则 aria-labelledby 可能无法在静态 div 上工作，因此请将其替换为适当的角色。