让屏幕阅读器读出众所周知的首字母缩略词

Question

如何让屏幕阅读器正确阅读以下内容：

<nav>
  <a href="/">Home</a>
  <a href="/faq">FAQ</a>
  <a href="/contact">Contact</a>
</nav>

（即将其读作“FA Q”而不是“faq”）。

在这里使用 <abbr> 没有意义，因为“常见问题解答”是众所周知的。

我试过了：

1. speak-as: spell-out; CSS 属性，但显然它没有得到屏幕阅读器的很好支持，并且似乎有大约 3.5% 的全球浏览器支持
2. <a href="/faq" aria-label="F.A.Q.">FAQ</a> 适用于我的屏幕阅读器 (Orca)。但是，我担心有些人会读出要点，而且我相信 aria-label 是用于交互元素的，所以我不确定它是否是解决 <h1>FAQs</h1> 之类问题的好方法。事实上，我认为很多人会因为 h1 而完全忽略这个标签

   <h1>FAQs</h1> 问题引起了对正确读出它（即添加“s”）的进一步关注。

   有更好的解决方案吗？

Answer 1

如果你想做点什么，唯一真正好的答案是<abbr>。 不过，正如您所说，FAQ 是众所周知的首字母缩略词，因此您无需明确扩展它。

如果你不想用<abbr>，或者像本案一样，判断不需要，因为这个缩写太常用了，其实别干别的。

你可以在链接上使用 aria-label，或者在视觉上隐藏/屏幕外的文本，但实际上这是个坏主意，因为你可能会制造比解决更多的问题。

<abbr> 很好，因为您可以在屏幕阅读器选项中决定是否必须扩展缩写。 对于其余部分，大多数屏幕阅读器都带有发音词典，通常由用户自定义。如果他们不理解“FAQ”这个词的发音，他们可以根据自己的喜好将其添加到字典中，使其发音为“Frequently asked questions”或“F, A, Q”。 如果你在那里干预并强迫用户读出一些他们不知道的东西，他们可能不会理解它是什么；因此，您使体验变得更糟。