Question

出于风格上的原因，我有如下HTML标记：

h1 {
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
}

h1 span {
  font-weight: 100;
  color: yellow;
}

<link href="https://fonts.googleapis.com/css?family=Heebo:100,900" rel="stylesheet">
<h1>Big<span>yellow</span>bananas</h1>

这使我可以为yellow设置不同的样式，并且由于其样式不同，因此我可以删除单词之间的空格，以使文本看起来不错，但仍可以被人类阅读。但是，这让我开始思考。搜索引擎和屏幕阅读器如何处理此类文本？假设他们将标题视为单个字符串Bigyellowbananas而不是Big yellow bananas，那么维护视觉效果但改善可访问性的正确方法是什么？

我的猜测是零宽度的空格，但是对此我不确定。

Answer 1

您是正确的，缺少空格会导致屏幕阅读器和盲文设备出现问题。该标题将被读取为“ Bigyellowbananas ”，并在盲文设备上显示为一个单词。

您可以通过在标题上使用aria-label来解决此问题。

<h1 aria-label="big yellow bananas">Big<span>yellow</span>bananas</h1>

aria-label覆盖屏幕阅读器和盲文设备标题中的文本。

Answer 2

实际上，是否将其读取为单个单词取决于屏幕阅读器。 Jaws肯定会以一个单词的形式阅读您的文本，而VoiceOver会阅读三个单词，甚至可能在它们之间造成夸张的停顿。

为安全起见，理想情况下，应在单词之间放置一个实际的空格，以确保所有内容在任何地方都可以正确阅读。空格是在</span>之前还是在<span>之后都没关系。实际上，如果删除所有HTML标记，很明显可以看到应该在何处放置空格。

不幸的是，我不是CSS专家，但我很确定有一种解决方案，其中的代码具有正确的空格。例如，您不能更改代码吗？

<h1>My<span class="space"> </span><span class="big">yellow</span><span class="space"> </span></h1>

.space实际上可能仅是.sr，将宽度减小到1px，发送屏幕外或任何其他相同类型的常见CSS技巧。

就我而言，ARia-label在这里并不是一个完整的解决方案。它通常用于元素交互中，但是在您只有文本而没有交互的情况下，不能保证它总是有效。一些屏幕阅读器需要角色，否则，如果没有角色，他们将忽略aria标签。但是，这里<h1 role="heading">是一个不好的做法，您明确地赋予了某些隐式角色（这可能会带来其他麻烦）。 role="text"或role="presentation"更糟，当从标题导航到标题或列出页面的所有标题时，它们都使标题被完全跳过。

要回到主要问题，请注意VoiceOver并不总是正确的预期行为。考虑一下：

<p>This is <span style="color: blue;">blue</span>.</p>

Jaws或NVDA没问题，但是我已经看到VoiceOver明确地在此类代码上说了“句号”，从情意中轻易地分离出了“ blue”一词。但是，在那种情况下，我认为没有一种简单的方法可以更改HTML，以便在任何地方都能正确读取内容。

屏幕阅读器如何处理用标签（而不是空格）分隔的文本？

2 个答案: