如何使屏幕阅读器读取内部的咏叹调标签<span>？

Question

我希望屏幕阅读器能够读取"故事"、"菜单项"等文本。当鼠标停留在"故事"上时;按钮。我试图在span内添加aria-label和aria-describedby，但屏幕阅读器仍在阅读"故事"。文本，而不是"故事"，菜单项";文本。

原始代码:

<li role="menuitem">
<span class="">Stories</span>
</li>

我尝试过但不成功的事情:

(1)添加aria-label

<li role="menuitem">
<span class="" aria-label="stories, menu item">Stories</span>
</li>

(2)添加aria-describedby

<li role="menuitem">
<span class="" aria-describedby="stories, menu item">Stories</span>
</li>

Answer 1

这里发生了一些奇怪的事情。

首先，在您的OP中，您询问了当"鼠标悬停在"上时如何阅读文本。元素。大多数屏幕阅读器用户不会使用鼠标，也不会将鼠标悬停在元素上。NVDA屏幕阅读器具有鼠标悬停选项，因此将鼠标移动到元素上将读取它，但该功能主要用于视力正常的测试人员。我从来没有发现一个使用鼠标悬停NVDA功能。

所以我猜你的问题更多的是关于当用户导航到项目时，你希望它阅读额外的文本。

你发布的代码实际上没有键盘聚焦元素，尽管你提到了一个"按钮"在你的描述中。现在我将忽略这一点，并假设您有一个可聚焦的元素，最好是一个本地语义HTML元素。

另一个奇怪的地方是你想宣布"菜单项"(可能是因为您没有听到该声明)，但是应该根据元素的role声明该文本，即"menuitem"。您不应该强制声明元素的角色。当使用语义html元素或正确使用role时，您可以免费获得此功能。在本例中，菜单项如果元素接收到焦点，则应该宣布有role="menuitem"。在您的情况下，您的代码示例可能过于简化，但就目前而言，<li>具有菜单项角色，但<li>是而不是接收焦点的元素。<li>(按钮?)中的元素正在接收焦点。

最后，问题的关键是<span>上的aria-label通常不被支持，除非该span有一个角色。请参阅https://www.w3.org/TR/using-aria/#label-support上的最后第三个要点。但是，你不应该强迫"菜单项"待定

旁注:您的第三个示例使用aria-describedby，该属性的值应该是一个空格分隔的id列表。它不应该是一个字面值字符串。

Answer 2

您可以为屏幕阅读器添加一些额外的文本:

<li role="menuitem">
Stories<span class="screen-reader-only">, menu item</span>
</li>

CSS取自Bootstrap 3:

.screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

改编自此回答。