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

我的标题是这样的:
<h1>This is a t<span>e</span>st.</h1>
字母“e”周围的标签使Mac OS X Voiceover分别读取单词的各个字母，而不是完整的单词。因此，它说:



代替:



假设我需要在标签*中加上一个单词的字母，那么如何确定屏幕阅读器会正常显示该单词呢？

N.B:任何标签都可以。我已经尝试过<b>，<i>和<em>，它们都产生相同的效果。

最佳答案

解决此怪癖的一种方法是，在不带屏幕阅读器的小提示旁边提供仅屏幕阅读器的文本版本，例如:

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

最终结果是，屏幕阅读器用户将在页面中听到“这是测试”，而视障用户将看到“这是测试”。