是否在悬停时删除 link 下划线不符合 WCAG 标准?

Is removing a link underline on hover not WCAG compliant?

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

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”:

Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).

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

我见过一些辅助工具(例如 SiteImprove)标记悬停时缺少下划线,即使默认样式存在下划线也是如此。有谁确切知道答案是什么?

恐怕您不太可能找到明确的“您可以那样做”或“不能那样做”。

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

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

我还假设您不更改光标行为,并且当您将鼠标悬停在 link 时会有一个 cursor: pointer

请记住,您 没有 给 link 加下划线。你只需要让它们在视觉上可识别,而不仅仅是颜色。

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

如果您完全担心,那么将它们加粗并加下划线(或者甚至在悬停时加粗并在悬停时删除下划线)将确保 link 始终具有一些视觉区别州。

唯一需要考虑的其他事情...link state 可以单独通过颜色来识别(例如已访问和活跃)所以我会考虑悬停成为另一个州。

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

我会说这很好,但这可能是用户测试以获得明确答案的一个!

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

@graham 是对的,但还有一些其他需要考虑的事情无法放入评论区。

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.

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

与您的评论一样:

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.

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

关于 WCAG 可访问性的一个重要部分是了解 documentation/specs 可以是 normative or non-normative (the latter is also called informative).

规范是一致性所必需的,而 non-normative/informative 则不是。但是,non-normative 通常是非常好的建议(最佳实践),因此遵循它通常是个好主意,但不遵循它并不意味着您不符合 WCAG。

参见“5.1 Interpreting Normative Requirements”:

The main content of WCAG 2.1 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.

例如,intro section of WCAG 表示它是 non-normative。

您引用的失败 F73non-normative。即使您有这种模式,“links that is not visually design without color vision”,这并不意味着您一定会通过 WCAG。这可以追溯到我自己对 links 的第一条评论。 F73 甚至提到:

While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes.

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

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

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

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

所以现在有纯文本是黑色的,links 是黑色的,当只看颜色时,您无法区分。然而,页面的 design 显然顶部的文本是 links 所以它不会失败 1.4.1F73.

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

综上所述,如果您在悬停时删除下划线就符合 WCAG 一致性,那么您没问题,但您仍然应该问问自己,这是否是一种良好的用户体验。