Question

我有这样的标题：

<h1>This is a test.</h1>

字母“e”周围的标签会导致Mac OS X画外音分别读取单词的单个字母，而不是完整的单词。所以，它说：

“这是一个问题。”

而不是：

“这是一个测试。”

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

N.B：任何标签都可以。我已尝试，和，但它们都会产生相同的效果。

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属性隐藏了屏幕阅读器（test）的麻烦，而offscreen class在视觉上隐藏了文本的屏幕阅读器版本（test）

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

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标记的内部html（带有id =“specialWord”）从img“更改为”test“来解决这个问题。

希望你能从中受益。

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

2 个答案: