删除两个文本元素之间的空格是否存在可访问性问题? (例如跨度,a)

Are there accessibility concerns with removing the whitespace between two text elements? (e.g. span, a)

我想知道它是否以任何方式损害可访问性 HTML:

<a href="privacy.html">Privacy</a><a href="terms">Terms</a>

而不是这个:

<a href="privacy.html">Privacy</a> <a href="terms">Terms</a>

或者这个:

<a href="privacy.html">Privacy</a>
<a href="terms">Terms</a>

我在屏幕上下文中思考 reader:它会正确识别它们是两个不同的词,而不是 "PrivacyTerms" 吗?如果我使用 <span> 或任何其他元素而不是 <a>,会有区别吗?

我有时删除白色space的原因是我喜欢用CSS(边距)指定元素之间的确切间隙,并在其中保留白色space source 根据字体大小添加了一个可视化 space,这也是可选择的(当元素可点击时尤其烦人,因为光标从 pointer 变为 text 再变为 default 当你将它从一个元素移动到下一个元素时)。如果有更好的方法来解决这个问题,我很乐意听取他们的意见。

从视觉上看,您的第一个示例看起来像一个 link,但它们将是单独的制表位,因此屏幕 reader 将分别读取它们。其他两个示例在视觉上看起来像是单独的 links。屏幕 reader 将同样对待所有三个示例。

如果您有两个没有 space 的 <span> 元素,那么 JAWS 和 NVDA 等 PC 屏幕 reader 将连接文本并将其作为一个文本读取。但在 iOS 上的 VoiceOver 中,它们将被视为单独的元素。

在您带有链接的示例中,现在屏幕 readers 不太可能出现问题。它们将被识别为单独的链接,并以此方式公布。通常,用户会听到每个角色的 "link" 角色:"Privacy, link. Terms, link."

在相邻跨度的情况下,结果因浏览器、OS 和屏幕 reader 的不同组合而异。跨度 运行 一起作为一个单词,有时会导致发音不正常。我建议 whitespace 在相邻的跨度之间,通常在单词之间有 space 的地方。

例如,在recent Drupal issue中,<button>包含两个span,但没有白色space:

<button><span>Collapse</span><span>Development</span></button>

按钮的可访问名称被计算为 "CollapseDevelopment",并且某些屏幕 reader 将其宣布为 "Collaps-ey Development",并带有一个额外的音节。最终我发现 它归结为屏幕 reader 使用的 语音 (某些屏幕 reader 可以使用多个文本到语音引擎)。

历史记录:WCAG 1.0(过时,使用 WCAG 2...)建议如下。注意强调 "Until".

Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. (WCAG 1.0 checkpoint 10.5)

现在这不是问题:"until" 条款在几年前就已得到满足。屏幕 reader 会区别对待相邻链接。