删除鼠标悬停时的链接下划线是否不符合 WCAG 规定？
我正在尝试找到这个可访问性问题的明确答案。如果我默认在所有链接上设置下划线...
a {
text-decoration: underline;
}
...并删除悬停时的下划线...
a:hover {
text-decoration: none;
}
...这不再符合 WCAG 2.0 要求吗？
W3C 的成功标准存在一些灰色地带。根据“由于创建的链接而导致成功标准 1.4.1 失败如果没有色觉，视觉上不明显”：
需要链接下划线或其他一些非颜色视觉区分（当有色觉的人可以辨别链接时）。
我们知道，即使在悬停时应用了下划线，不包含下划线的默认样式的链接也不符合成功标准。因为如上所述，“需要其他非颜色视觉区别”。反过来也是如此吗？
我见过一些辅助工具（例如 SiteImprove）标记悬停时缺少下划线，即使默认样式存在下划线也是如此。有谁确切知道答案是什么？
I'm trying to find a definitive answer to this accessibility question. If I set the underline on all links by default...
a {
text-decoration: underline;
}
...and remove the underline on hover...
a:hover {
text-decoration: none;
}
...is this no longer WCAG 2.0 compliant?
There's a bit of gray area with the W3C's Success Criterion. Per "Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision":
Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).
We know that a link with default styling that doesn't include an underline fails the success criterion even if the underline is applied on hover. Because as stated above, "other non-color visual distinction are required". Is the same true in reverse?
I've seen a few accessibility tools (e.g., SiteImprove) flag the lack of underline on hover even when it's present for default styling. Does anyone know definitively what the answer is?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
@graham 说得很对，但还有一些其他需要考虑的事情不适合评论区。
如果链接都是单独的，您不一定必须仅通过颜色来区分。如果您在纯文本段落中嵌入了链接，通常只会出现问题。 然后除了仅使用颜色之外，您还需要确保链接看起来与其他文本不同。
同样的你的评论：
我们实际上不知道它不符合成功标准。这取决于上下文和设计，我将在下面解释。
关于 WCAG 的可访问性的一个重要部分是了解文档/规范可以是 规范或非规范（后者也称为信息）。
规范性是一致性所必需的，非规范性/信息性则不需要。然而，非规范通常是很好的建议（最佳实践），因此遵循它通常是一个好主意，但不遵循它并不意味着您不符合 WCAG。
请参阅“5.1 解释规范性要求”：
例如，WCAG 的介绍部分表示它不规范。
您引用的失败，F73，非规范。即使您有这种模式，“如果没有色觉，链接在视觉上不明显”，这并不意味着您一定会失败 WCAG。这可以追溯到我对链接本身的第一个评论。 F73甚至提到：
换句话说，这取决于设计。
例如，请查看 https://webaim.org/。段落文本颜色为黑色。 “WebAIM 的结果......”。
文本下方有一个带有下划线的蓝色链接，这是一种典型做法，但现在请忽略该链接。请注意，段落文本是黑色的。
页面顶部附近是导航链接列表。他们也是黑色的。
因此，现在有黑色的纯文本和黑色的链接，当仅查看颜色时，您无法分辨出区别。但是，页面的设计表明顶部的文本是链接，因此不会失败1.4.1 或 F73。
即使这不会失败，WebAIM 仍然具有悬停和聚焦状态，该状态会更改链接的颜色，并且在悬停和聚焦时它们会产生轻微的阴影。这可以带来更好的用户体验，但 WCAG 不一定需要。
话虽这么说，如果您在悬停时删除下划线以符合 WCAG 一致性，那就没问题，但您仍然应该问自己这是否是一个良好的用户体验。
@graham is spot on but a few other things to consider that can't fit into a comment area.
You don't necessarily have to distinguish with more than color if the links are all by themselves. It's usually only a problem if you have links embedded in a paragraph with plain text. Then you need to make sure the links look different from other text besides using just color.
Likewise with your comment:
We actually don't know that it fails the success criterion. It depends on the context and design as I'll explain below.
An important part of accessibility with regards to WCAG is to understand that documentation/specs can be normative or non-normative (the latter is also called informative).
Normative is required for conformance and non-normative/informative is not. However, non-normative is usually pretty good advice (best practice) so it's often a good idea to follow it, but not following it doesn't mean you're not conformant to WCAG.
See "5.1 Interpreting Normative Requirements":
As an example, the intro section of WCAG says it's non-normative.
The failure you quoted, F73, is non-normative. Even if you have that pattern, "links that are not visually evident without color vision", that doesn't mean you necessarily fail WCAG. It goes back to my first comment about links by themselves. F73 even mentions that:
In other words, it depends on the design.
As an example, look at https://webaim.org/. The paragraph text color is black. "The results of WebAIM's...".
There's a link below the text that is blue and underlined which is a typical practice but ignore that link for now. Just note that the paragraph text is black.
Near the top of the page is a list of navigation links. They are black too.
So now there is plain text that is black and links that are black and when looking at just color, you can't tell the difference. However, the design of the page makes it apparent that the text at the top are links so it wouldn't fail 1.4.1 or F73.
Even though this doesn't fail, WebAIM still has a hover and focus state that changes the color of the link and they have a slight shadow when hovered and focused. That makes for a better user experience but isn't necessarily needed for WCAG.
All that being said, you are ok if you remove the underline upon hover with regards to WCAG conformance but you should still ask yourself is it's a good user experience.
恐怕您不太可能找到明确的“您可以这样做”或“不能这样做”。
然而，在这种情况下，链接可以在文本中识别，而无需由于下划线而悬停，我无法想到任何成功标准，如果在悬停时删除下划线，您会失败。
我假设如果有一些焦点链接的话，会有一个可见的焦点指示器。
我还假设您不更改光标行为，并且当您将鼠标悬停在链接上时，将会出现一个
cursor:pointer。请记住，您不必必须在链接下划线。你只需要用颜色以外的东西使它们在视觉上可识别。
这可能会使文本加粗、斜体、更大等。
如果您完全担心，那么将它们加粗并加下划线（或者甚至在悬停时加粗并在悬停时删除下划线）将确保链接始终有一些所有状态下的视觉区别。
唯一需要考虑的其他事情......链接状态可以单独通过颜色来识别（例如访问和活动），所以我认为悬停只是另一种状态。
我唯一的最终“论据”是预期功能。这是可访问性的最大方面之一。用户期望鼠标悬停时下划线会被删除吗？这会导致焦虑症患者感到困惑或不安吗？
我想说这很好，但这可能需要用户测试才能得到明确的答案！
我知道这个答案最终成为“意见”，但它至少是受过教育的意见，简短的答案是“鉴于所提供的信息，它通过了 WCAG”......我只是想解释一下如果我是的话我会考虑的一些因素评估其可访问性。
I am afraid you are unlikely to find a definitive "you can do that" or "can't do that".
However in this scenario where the link is identifiable in text without hovering due to the underline, I cannot think of any success criterion you would fail by removing that underline on hover.
I am making the assumption that there is a visible focus indicator if some focuses links of course.
I am also assuming that you don't change the cursor behaviour and there will be a
cursor: pointerwhen you hover the links.Bear in mind that you don't have to underline links. You just have to make them visually identifiable with something other than just colour.
This could be making the text bold, italicised, larger etc.
If you are at all worried then making them bold as well as underlined (or even just bold when hovered and remove the underline on hover) would make sure the link will always have some visual distinction in all states.
The only other thing to consider...link state can be identified by colour alone (visited and active for example) so I would consider hover to just be another state.
The only other final "argument" I have is that of expected functionality. It is one of the largest aspects of accessibility. Would a user expect the underline to be removed on hover? Could that cause confusion or unsettle someone with an anxiety disorder?
I would say it is fine but that might be one for user testing to get a definitive answer!
I am aware this answer has ended up as "opinion", but it is at least educated opinion and the short answer is "it passes WCAG given the information provided"...I just wanted to explain some considerations I would have if I were assessing this for accessibility.
第一个答案是，您提供的链接指向 2008 年完全过时的早期工作草案。在 W3 站点上要小心，它有点混乱不幸的是，很容易陷入错误的文档。
The first answer is, the link you provided is to a completely obsolete very early working draft from 2008. And be careful at the W3 site, it's a a bit of a mess and unfortunately fairly easy to get stuck on the wrong document.
Second is to read the current pages. Unless you have a specific need to, don't use WCAG 2.0, use the current recommendation, 2.1, or the current draft moving toward consensus 2.2.
Here is the correct page in the actual 2.0
Here is that page in the current 2.1
Here is that page in the pending 2.2
Third if I haven't annoyed you yet, you might be interested in the Advanced Readability Forum at the github for APCA, and this post in particular:
A Discussion of Inline Links (Theory and Practice)
It's the start of a thread and there's a lot of other similar topics, comments of course are welcome.
Note: the link is to a discussion, and is not part of a normative standard yet.