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(边距)指定元素之间的确切间隙,并且在源代码中保留空格会根据字体大小添加视觉空间,这也是可选的(特别烦人当元素可点击时,因为当您将光标从一个元素移动到下一个元素时,光标会从pointertext变为 到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 回答