如何指示屏幕阅读器将“DoIT”发音为“do it”？答案

【问题标题】：How do I instruct screen readers to pronounce "DoIT" as "do it"?如何指示屏幕阅读器将“DoIT”发音为“do it”？
【发布时间】：2022-01-26 22:13:13
【问题描述】：

我正在开发一个全面使用首字母缩略词的网站（“DoIT”，发音为“do it”）。不幸的是，视障人士的屏幕阅读器读错了首字母缩写词（“duh-I.T.”）。

我认为有两种解决方案之一：

找到整个网站 (HTML5) 中使用“DoIT”的每一个元素，并以某种方式添加一些内容，告诉屏幕阅读器不要阅读显示的文本，而是用“do it”替换“DoIT”的替代文本……哪个我什至不知道该怎么做……
添加某种类型的脚本，当使用屏幕阅读器时，将“DoIT”一词替换为“do it”→ 我不知道该怎么做。

整个网站有很多文字、段落、标题、图片等。我知道我可以在某些地方使用alt 属性，但不是全部，例如：

<h3 alt="Test for do it">Test for DoIT</h3>

我应该使用一些标签组合（span、label、alt），还是已经存在更好但我无法立即找到的东西？

【问题讨论】：

【解决方案1】：

如果“DoIT”是首字母缩略词，您应该首先将其标记为这样（我们会使用 <acronym>，但它在 HTML5 中已被弃用，所以让我们使用替代方案：<abbr>DoIT</abbr>）。

然后您可以使用title 属性：a) 标记首字母缩略词的实际含义，或 b) 标记您希望它的阅读方式 (<abbr title="Do it">DoIT</abbr>)。

屏幕阅读器用户通常可以设置他们希望他们的首字母缩写词和缩略语被朗读给他们的方式（通过“尝试发音”、逐个字母或通过其标题属性）。

如果您不想更改正常网站查看的外观，只需添加一些 CSS 规则，例如：abbr[title] { border-bottom-width: 0; font-variant: none; }

【讨论】：

我尝试使用标签。屏幕阅读器在阅读之前只是暂停了，点击选项卡只是阅读显示的文本，而不是标题......我正在使用 NVDA，我是新手。这会是因为我没有正确设置它 - 就像你建议的那样可以做到吗？
@katiea 我真的不知道...很多年前我做过类似的事情（使用而不是），并被告知屏幕阅读器用户可以让它改变向他们朗读的方式：我自己从未使用过它们
@katiea 根据this url，它似乎无法像您期望的那样与 NVDA 一起工作，根据this one，JAWS 有一个选项（“扩展缩写”）。我想这一切都归结为屏幕阅读器的特定实现......我怀疑是否有一个默认值可以按照你对所有阅读器的期望：你能做的最好的就是提供最合适的标记。大多数文档都说针对您的具体情况使用<acronym>（而不是<abbr>），但遗憾的是它已被弃用，所以我不知道。
我正在阅读有关的信息，太糟糕了，它已被弃用。我现在将坚持使用并测试更改 NVDA 的默认设置。我将把这个问题留到另一天，以防其他人想到更好的解决方案，但它看起来确实像将是目前最好的方法。
客户对标签很满意。感谢您帮助了解更多关于 ARIA 标准和与标签的信息，@Jcl!

【解决方案2】：

你可以使用属性 aria-label

<h3 aria-label="Test for do it">Test fir Doit</h3>

【讨论】：

我正在使用 NVDA - 添加 aria 标签并没有导致正确的读数。我不确定为什么......但是谢谢你的建议 - 它看起来很有希望，我想知道我是否只是遗漏了一些明显的东西......
尝试在 <h3 aria-label="Test for do it"><span aria-hidden="true">Test for Doit</span></h3> 文本上使用 aria-hidden true