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

【问题标题】：How do screen readers handle text separated by tags (not spaces)?屏幕阅读器如何处理由标签（而不是空格）分隔的文本？
【发布时间】：2018-08-13 06:38:55
【问题描述】：

出于文体原因，我的 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，那么保持视觉效果但提高可访问性的正确方法是什么？

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

【问题讨论】：

如果您想询问 SEO 的影响，您可以在 Webmasters.SE 上询问。其余的都是主题

标签： html accessibility screen-readers

【解决方案1】：

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

理想情况下，为了安全起见，您应该在单词之间放置一个实际的空格，这样您就可以确保在任何地方都能很好地阅读所有内容。空格是在</span> 之前还是在<span> 之后都没有关系。事实上，如果你删除所有的 HTML 标签，很明显你应该在哪里放置空格。

很遗憾，我不是 CSS 专家，但我很确定有一个解决方案，其代码具有正确的空格。例如，您不能为这样的事情更改代码吗？

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

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

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

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

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

Jaws 或 NVDA 没有问题，但我已经看到 VoiceOver 在此类代码上明确表示“句号”，夸张地将“蓝色”一词从句子中分离出来。然而，在这种情况下，我认为没有一种简单的方法可以更改 HTML 以便在任何地方都有正确的阅读。

【讨论】：

【解决方案2】：

您说得对，缺少空格会导致屏幕阅读器和盲文设备出现问题。标题将读作“Bigyellowbananas”，并将在盲文设备上显示为一个单词。

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

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

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

【讨论】：