问如何让屏幕阅读器读取<span>内部的唱段标签？

EN

有一些奇怪的事情正在发生。

首先，在您的操作中，您询问了当鼠标悬停在元素上时如何读取文本。大多数屏幕阅读器用户不会使用鼠标，也不会将鼠标悬停在元素上。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的空格分隔列表。它不应该是文字字符串。

您可以仅为屏幕阅读器包含一些附加文本：

<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;
}

改编自this answer。