屏幕阅读器:如何使用围绕其字母的标签创建一个单词,而不是一系列字母？

Question

我有这样的标题:

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

字母"e"周围的标签会导致Mac OS X画外音分别读取单词的单个字母,而不是完整的单词.所以,它说:

"这是一个测试."

代替:

"这是一个测试."

鉴于我需要在标签*中附上一个单词的字母,我怎样才能确保屏幕阅读器说出正常的单词？

• 注意:任何标签都可以.我试过了<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>）隐藏了麻烦的花絮，而离屏类则在视觉上隐藏了文本的屏幕阅读器版本（<span class="offscreen">test</span>）。

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

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”来解决此问题。

希望您能从中受益。