屏幕阅读器：如何使带有标签的单词被作为一个单词而不是一系列字母来发音？

Question

我有一个像这样的标题：

This is a test.

字母“e”周围的标签会导致Mac OS X Voiceover单独读取单词中的每个字母，而不是整个单词。因此，它会说：

"This is a t e st."

而不是：

"This is a test."

如果我需要在标签中包含单词的一个字母*，如何确保屏幕阅读器正常发音单词？

注意：任何标签都可以。我尝试过、和，它们都产生了相同的效果。

- peterhartree

---

这听起来像是OS X Voiceover中的一个严重的错误。除了提供一个专门编辑/压缩内容的屏幕阅读器友好网站之外，我想不出任何解决方法... - Pekka

有一些HTML属性可以影响Voiceover的工作方式，例如参考http://alxgbsn.co.uk/2011/06/06/making-web-content-more-accessible-with-ios-voiceover/可能在那个方向上可以找到帮助。 - Pekka

我们也遇到了这个问题。很糟糕。 - nouveau

滥用abbr[title]会有帮助吗？即使这很烦人，但我认为这不是一个错误。一个单词由连续的字母组成，而不是连续的元素。 - FelipeAls

@Felipe 如果元素不用于在视觉上分隔单词，则不需要这种行为。我认为这种行为在现实世界中完全没有意义。这就像因为某些部分是红色、斜体或者下划线，就把一个单词在 Word 文档中分开 - 只是因为内部格式的更改需要将其分成多个技术单元（如标签）。 - Pekka

Answer 1

解决这个问题的一种方法是提供一个仅供屏幕阅读器使用的文本版本，与导致屏幕阅读器出现问题的文本并列，例如：

CSS 代码片段：

.offscreen
{
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

标记示例：

<h1>This is a 
    <span aria-hidden="true">t<strong>e</strong>st</span>
    <span class="offscreen">test</span>.
</h1>

在这里，aria-hidden 属性将让屏幕阅读器无法读取到麻烦的细节 (<span aria-hidden="true">t<strong>e</strong>st</span>)，而offscreen class 则能使视觉用户看不到文本的屏幕阅读器版本 (<span class="offscreen">test</span>)。

结果是：屏幕阅读器用户将听到“This is a test”，而视觉用户会在页面中看到“This is a test”。

- Ashley Bischoff

Answer 2

这不是一个解决方案，但如果您的情况允许，它可能是一个有用的解决方法。

我感觉你想要将一个字母包装起来以呈现不同的效果，而不是这样，你可以将单词“test”显示为图像，通过这样做，你可以按照任何你想要的方式创建它，并将单词“test”作为图像的alt属性放置。

<h1>This is a <span id="specialWord" ><img src = "testImage.jpg" alt = "test"></span>.  </h1>

如果是这样，OS X语音助手将正确读取它。因为如果我记得正确的话，它会读取图像的alt属性。

现在，在这种情况下可能会出现问题。任何人想将其选择为文本，则不可能。您可以通过调用JavaScript函数来动态更改span标记（id =“specialWord”）的内部HTML，从img中更改为“test”来解决此问题。

希望您能从中受益。

- Muhammad Raihan Muhaimin

---

不幸的是，这样做会带来更多问题而不是解决问题。嵌入在图像中的文本很难维护，在视网膜屏幕上看起来很糟糕，并且无法进行本地化处理。 - Marcy Sutton