0

当鼠标悬停在菜单栏中的“故事”按钮上时，我希望屏幕阅读器阅读文本“故事，菜单项”。我已经尝试添加aria-label以及在aria-describedby内部，span但屏幕阅读器仍在阅读“故事”文本，而不是“故事，菜单项”文本。

原始代码：

<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>
4

2 回答 2

3

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

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

所以我猜你的问题更多是关于用户何时导航到该项目，你希望它阅读额外的文本。不仅仅是视觉上显示的。

尽管您在描述中提到了“按钮”，但您发布的代码实际上并没有键盘可聚焦元素。我暂时忽略这一点，并假设您有一个可聚焦的元素，最好是原生语义 HTML 元素。

另一个奇怪的地方是您想要宣布“菜单项”（大概是因为您没有听到宣布的内容）但是应该根据role您的元素（即“menuitem”）宣布文本。您不必强制宣布元素的角色。使用语义 html 元素或正确使用role. 在这种情况下，如果获得焦点的元素有，则应该宣布“菜单项” role="menuitem"。在您的情况下，您的代码示例可能过于简化，但就目前而言， the<li>具有 menuitem 角色，但不是<li>接收焦点的元素。（按钮？）内的元素正在接收焦点。<li>

最后，问题的症结在于，通常不支持aria-labela 上的 a <span>，除非该 span 有作用。请参阅https://www.w3.org/TR/using-aria/#label-support上的倒数第三个要点。但同样，您不必强制宣布“菜单项”。

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

于 2021-09-14T16:57:41.993 回答
1

您只能为屏幕阅读器添加一些附加文本：

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

改编自这个答案。

于 2021-09-13T21:15:48.983 回答