1

我想知道拥有这个 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>

我在屏幕阅读器的背景下思考：它会正确识别它们是两个不同的词，而不是“隐私条款”吗？如果我使用<span>或任何其他元素而不是有区别<a>吗？

我有时删除空格的原因是我喜欢用 CSS（边距）指定元素之间的确切间隙，并且在源代码中保留空格会根据字体大小添加视觉空间，这也是可选的（特别烦人当元素可点击时，因为当您将光标从一个元素移动到下一个元素时，光标会从pointer到text变为 到default）。如果有更好的方法来解决这个问题，我很想听听。

4

2 回答 2

3

在您的链接示例中，现在屏幕阅读器不太可能出现问题。它们将被视为单独的链接，并因此而公布。通常，用户会听到每个人的“链接”角色：“隐私，链接。条款，链接。”

在相邻跨度的情况下，结果因浏览器、操作系统和屏幕阅读器的不同组合而异。这些跨度作为一个单词一起运行，这有时会导致不寻常的发音。我建议在相邻跨度之间使用空格，只要单词之间通常有空格。

例如，在最近的 Drupal 问题中， a<button>包含两个跨度，但没有空格：

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

该按钮的可访问名称被计算为“CollapseDevelopment”，一些屏幕阅读器将其宣布为“Collaps-ey Development”，带有一个额外的音节。最终我发现它归结为屏幕阅读器使用的声音（一些屏幕阅读器可以使用多个文本到语音引擎）。

历史记录：WCAG 1.0（已过时，使用 WCAG 2...）建议如下。注意强调“直到”。

在用户代理（包括辅助技术）清楚地呈现相邻链接之前，在相邻链接之间包含非链接、可打印字符（由空格包围）。（WCAG 1.0 检查点 10.5）

现在这不是问题：“直到”条款在几年前就已经得到满足。屏幕阅读器确实会区别对待相邻链接。

于 2018-08-04T19:55:32.750 回答
3

从视觉上看，您的第一个示例看起来像一个链接，但它们将是单独的制表位，因此屏幕阅读器将单独阅读它们。其他两个示例在视觉上看起来像单独的链接。屏幕阅读器将对所有三个示例一视同仁。

如果您有两个<span>没有空格的元素，则 JAWS 和 NVDA 等 PC 屏幕阅读器将连接文本并将其作为一个元素读取。但在 iOS 上的 VoiceOver 上，它们将被视为单独的元素。

于 2018-08-04T17:29:17.840 回答