如何让屏幕阅读器在 <span> 中读取 aria-label？

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> 具有 menuitem 角色，但 <li> 不是接收焦点的元素。 <li>（按钮？）内部的元素正在接收焦点。

最后，问题的症结在于<span> 上的aria-label 通常不受支持，除非该跨度有作用。请参阅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>

来自 Bootstrap 3 的 CSS：

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

改编自this answer。