我有一个这样的标题:
<h1>This is a t<span>e</span>st.</h1>
字母“e”周围的标签导致 Mac OS X Voiceover 分别读取单词的各个字母,而不是完整的单词。所以,它说:
“这是一个测验。”
代替:
“这是一个测验。”
鉴于我需要在标签中包含一个单词的字母*,我如何确保屏幕阅读器正常读出该单词?
- 注意:任何标签都可以。我试过了
<b>
,它们都产生相同的效果。<i>
<em>
我有一个这样的标题:
<h1>This is a t<span>e</span>st.</h1>
字母“e”周围的标签导致 Mac OS X Voiceover 分别读取单词的各个字母,而不是完整的单词。所以,它说:
“这是一个测验。”
代替:
“这是一个测验。”
鉴于我需要在标签中包含一个单词的字母*,我如何确保屏幕阅读器正常读出该单词?
<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 类在视觉上隐藏了文本的屏幕阅读器版本(<span class="offscreen">test</span>
)。
最终结果是屏幕阅读器用户会听到“这是一个测试”,而视力正常的用户会在页面中看到“这是一个测试”。
这不是一个解决方案,但如果您的情况允许,它可能是一个有用的解决方法。
我觉得你想包装一个字母来以不同的方式呈现它,而不是你可以通过这样做将单词“test”显示为图像,这样你就可以以任何你想要的方式创建它,并将单词“test”作为图像中的 alt 属性
<h1>This is a <span id="specialWord" ><img src = "testImage.jpg" alt = "test"></span>. </h1>
因此,如果 OS X 旁白会正确读取它。因为如果我没记错的话,它会读取图像的 alt 属性。
现在在这种情况下可能会出现问题。任何人都想选择它作为文本,那么这是不可能的。您可以通过调用 javascript 函数将 span 标签的内部 html(带有 id="specialWord" )动态更改为 img 中的“test”来解决这个问题。
希望你能从中受益。