强制屏幕 reader 阅读他全名的首字母缩略词

Question

如何强制屏幕 reader 将 M 显示为 星期一？（使用 https://www.nvaccess.org）我想让它对 WCAG 更友好

问题：

div 不支持 aria-label (https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/)
M 不可点击（所以我不应该使用按钮等）
没有 space 全名（星期一）

代码和视觉：

<section>
  <div  aria-label="Monday">M</div>
  <div  aria-label="Tuesday">T</div>
  ..
</section>

Answer 1

你问题的措辞建议使用<abbr>。您可以使用它，但在这种情况下，您不能强制屏幕阅读器始终阅读完整的扩展文本而不是缩写。

屏幕阅读器通常会提供选项，是始终自动扩展缩写词、仅根据需要、根据上下文扩展缩写词，还是从不扩展。这是用户可以控制的事情，他们可以选择最适合 him/her 的东西。你不应该在 his/her 处口述它。

但是，根据您的具体情况，您实际上可能不是在寻找缩写和 <abbr>。正如您所确定的，您更多的是在寻找一种必须一直阅读全文的标签。

你也很清楚，你不能使用 aria-label，因为 aria-label 是为交互元素保留的，你的元素恰恰不是。

在这种情况下，当您需要一种交互元素之外的标签时，一个好的解决方案是使用视觉隐藏文本，如下所示：

<div>
<span aria-hidden="true">M</span>
<span class="sr_only">Monday</span>
</div>

其中 sr_only 是一个 CSS class，它将文本置于屏幕之外。您可以在 bootstrap 中找到 .sr_only 的 CSS 代码。许多其他框架具有类似的视觉隐藏文本 CSS classes 与其他名称。

Force screen reader to read acronym by his full name