如何让屏幕阅读器读取span标签内的aria-label而非其内置文本内容

你之前的方案失效的核心原因 #

1. aria-label 默认对无特殊语义的静态<span>元素不生效，屏幕阅读器会直接读取元素内的可视文本，忽略span上的aria标签属性
2. aria-describedby 的属性值需要填写对应描述元素的ID，不能直接填文本内容，你之前的用法不符合该属性的规范，自然无法生效

可生效的实现方案 #

方案1：直接在menuitem元素上加aria-label（最简单）

你的<li>已经设置了role="menuitem"的交互角色，屏幕阅读器会优先读取该元素上的aria-label内容，不管是鼠标悬停还是键盘聚焦到该菜单项都会按设置内容朗读，代码如下：

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

方案2：用aria-describedby追加描述（适合不想覆盖原有文本朗读的场景）

如果你希望屏幕阅读器先读原有可视文本，再追加后缀描述，可以用符合规范的aria-describedby写法，额外加一个仅对屏幕阅读器可见的描述元素：

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

其中visually-hidden是通用的视觉隐藏类，样式如下，确保元素不会在页面上显示，但可以被屏幕阅读器识别：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

内容的提问来源于stack exchange，提问作者superninja