html - 屏幕阅读器 : How to make a word with tags surrounding its letters be spoken as a single word, 而不是一系列字母？

Question

我的标题是这样的:

<h1>This is a t<span>e</span>st.</h1>

字母“e”周围的标签导致 Mac OS X Voiceover 单独读取单词的各个字母，而不是整个单词。所以，它说:

"This is a t e st."

代替:

"This is a test."

鉴于我需要在标签*中包含一个单词的字母，我如何才能确保屏幕阅读器正常读出该单词？

• 注意:任何标签都可以。我试过了 <b> , <i>和 <em>它们都产生相同的效果。

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>)。

最终结果是屏幕阅读器用户会听到“这是一个测试”，而有视力的用户会在页面中看到“这是一个测试”。