在悬停时删除链接下划线是否不符合 WCAG 标准？

Question

我正试图找到这个可访问性问题的明确答案。如果我默认在所有链接上设置下划线...

a {
    text-decoration: underline;
}

...并删除悬停时的下划线...

a:hover {
    text-decoration: none;
}

...这不再符合 WCAG 2.0 标准了吗？

W3C 的成功标准有一点灰色地带。根据“Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision”：

链接下划线或其他一些非颜色视觉区分是必需的（当链接对有色觉的人来说是可辨别的时）。

我们知道，不包含下划线的默认样式链接不符合成功标准，即使在悬停时应用了下划线。因为如上所述，“需要其他非颜色视觉区分”。反过来也是一样吗？

我已经看到一些可访问性工具（例如 SiteImprove）标记悬停时缺少下划线，即使它存在于默认样式中也是如此。有谁确切地知道答案是什么？

Answer 1

@graham 很正确，但还有一些其他需要考虑的事情无法放入评论区。

请记住，你不有给链接下划线。你只需要让它们在视觉上可识别，而不仅仅是颜色。

你不一定有如果链接都是单独的，则用颜色来区分。如果您在纯文本段落中嵌入了链接，这通常只是一个问题。然后除了仅使用颜色之外，您需要确保链接看起来与其他文本不同。

同样与您的评论：

我们知道，不包含下划线的默认样式链接不符合成功标准，即使在悬停时应用了下划线。

我们其实别知道它不符合成功标准。这取决于上下文和设计，我将在下面解释。

关于 WCAG 可访问性的一个重要部分是了解文档/规范可以是normative或者非规范的（后者也被称为informative).

规范性是一致性所必需的，非规范性/信息性则不是。然而，非规范通常是很好的建议（最佳实践），因此遵循它通常是个好主意，但不遵循它并不意味着您不符合 WCAG。

参见“5.1 Interpreting Normative Requirements”：

WCAG 2.1的主要内容是规范的并定义影响一致性声明的要求。介绍性材料、附录、标记为“非规范”的部分、图表、示例和注释是翔实的（非规范）。非规范性材料提供咨询信息以帮助解释指南，但不会创建影响一致性声明的要求。

例如，intro section of WCAG 表示它是非规范的。

你引用的失败，F73，是非规范的.即使您有这种模式，“没有色觉在视觉上不明显的链接”，这并不意味着您一定无法通过 WCAG。这可以追溯到我对链接本身的第一条评论。 F73 甚至提到：

尽管从页面设计和上下文来看，某些链接可能在视觉上很明显，例如导航链接，文本中的链接通常只能从它们自己的显示属性中直观地理解。

换句话说，这取决于设计。

例如，查看https://webaim.org/。段落文本颜色为黑色。 “WebAIM 的结果……”。

文本下方有一个带下划线的蓝色链接，这是一种典型做法，但暂时忽略该链接。请注意，段落文本是黑色的。

页面顶部附近是导航链接列表。他们也是黑色的。

所以现在有黑色的纯文本和黑色的链接，当只看颜色时，你无法区分。然而设计页面的顶部文字显然是链接，因此它不会失败1.4.1 或F73。

即使这没有失败，WebAIM 仍然有一个悬停和焦点状态，它会改变链接的颜色，并且在悬停和聚焦时它们会有轻微的阴影。这有助于提供更好的用户体验，但 WCAG 不一定需要这样做。

综上所述，如果您在悬停时删除关于 WCAG 一致性的下划线，您就可以了，但您仍然应该问问自己，这是否是一种良好的用户体验。

Answer 2

恐怕你不太可能找到一个确定的“你能够做那个”或“不能去做”。

但是，在这种情况下，由于下划线而无需悬停即可在文本中识别链接，我想不出任何成功标准，如果在悬停时删除该下划线，您会失败。

我假设如果有一些焦点链接，当然会有一个可见的焦点指示器。

我还假设您不更改光标行为，并且当您悬停链接时会有 cursor: pointer。

请记住，你不有强调链接。你只需要让它们在视觉上可识别，而不仅仅是颜色。

这可能会使文本变粗、斜体、变大等。

如果您完全担心，那么将它们加粗并加下划线（或者甚至在悬停时只是加粗并在悬停时删除下划线）将确保链接在所有状态下始终具有一些视觉区别。

唯一需要考虑的另一件事...链接状态可以仅通过颜色来识别（例如，已访问和活跃）所以我认为悬停只是另一种状态。

我唯一的其他最终“论点”是预期的功能.它是可访问性的最大方面之一。用户会预计悬停时要删除的下划线？这会导致焦虑症患者感到困惑或不安吗？

我会说这很好，但这可能是用户测试以获得明确答案的方法！

我知道这个答案最终变成了“意见”，但它至少是有根据的意见，简短的回答是“根据提供的信息，它通过了 WCAG”……我只是想解释一些如果我是的话我会考虑的因素评估它的可访问性。

Answer 3

第一个答案是，您提供的链接是从 2008 年开始的一个完全过时的非常早期的工作草案。在 W3 网站上要小心，这是一个有点乱不幸的是，很容易卡在错误的文件上。

• 免责声明：作为 W3C 的特邀专家，我在这篇文章中的陈述仅代表我个人，并不一定反映 W3C 或 AGWG 的官方观点。?

第二是阅读当前的页。除非你有特殊需要，否则不要使用 WCAG 2.0，使用当前的推荐，2.1，或者当前的草案正在走向共识2.2.

• 这是actual 2.0中的正确页面

• 这是current 2.1中的那个页面

• 这是pending 2.2中的那个页面

第三如果我还没有惹恼你，你可能会对 APCA 的 github 上的 Advanced Readability Forum 感兴趣，尤其是这篇文章：

A Discussion of Inline Links (Theory and Practice)

这是一个线程的开始，还有很多其他类似的主题，当然欢迎 cmets。

笔记：该链接指向讨论，还不是规范标准的一部分。