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

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，保持视觉效果但提高可访问性的正确方法是什么？

我猜是 zero-width 个空格，但我不确定。

Answer 1

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

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

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

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

Answer 2

其实要看屏幕reader是否单字读。 Jaws 肯定会将您的文本作为一个单词来阅读，而 VoiceOver 会阅读三个单词，甚至可能在它们之间进行夸张的停顿。

理想情况下，为了安全起见，您应该在单词之间放置一个实际的 spaces，以确保所有内容在任何地方都能被很好地阅读。 space 是在 </span> 之前还是在 <span> 之后并不重要。事实上，如果你删除所有 HTML 标签，很明显你应该把 spaces.

放在哪里

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

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

其中 .space 实际上可能是 .sr-only，将宽度减小到 1px，发送 off-screen 或任何其他相同类型的常用 CSS 技巧。

在我看来，

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

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

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

Jaws 或 NVDA 没问题，但我已经看到 VoiceOver 在此类代码上明确地说 "period"，夸张地将 "blue" 从句子中分离出来。但是，在那种情况下，我认为没有一种简单的方法可以更改 HTML 以便在任何地方都有正确的读数。

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

How do screen readers handle text separated by tags (not spaces)?

html

accessibility

screen-readers