如果复选框的标签是超链接,是否违反WCAG 2.0 AA?

时间:2018-09-19 14:46:46

标签: html checkbox hyperlink accessibility wcag2.0

我有4个复选框,与每个复选框相对应的标签是超链接,可将用户带到该特定主题的起始页。所以基本上选择复选框在激活链接时会具有其他功能,我知道这不是推荐的做法,但是我可以针对任何WCAG标准对其进行标记吗?

enter image description here

1 个答案:

答案 0 :(得分:4)

简单回答“是”,它违反了WCAG 3.2.2 On Input,这是A(单A)要求。

对于任何人来说,它并不是一个很好的用户体验。当您使用for属性通过编程方式将标签与复选框相关联时:

<input type="checkbox" id="foo">
<label for="foo">history</label>

这允许鼠标用户单击框本身或标签上的。如果将标签设为链接,则单击标签将导航到链接目标,而不是选中该框。这将违反WCAG的可理解原则,尤其是3.2.2 On Input

从屏幕阅读器的角度来看,问题并不那么严重。对于以下代码:

<input type="checkbox" id="foo">
<label for="foo">
  <a href="some url">history</a>
</label>

<input type="checkbox" id="bar">
<label for="bar">favorites</label>

当我通过界面 tab 时,我会听到“历史记录复选框,未选中”和“收藏夹复选框,未选中”。那些听起来很正常。但是,在这两者之间,我会听到“历史链接”。历史记录链接似乎只是在两个复选框之间“浮动”。复选框将正确运行且链接将正确运行,但这仅是因为未使用任何视觉的屏幕阅读器用户不会尝试选择链接作为复选框标签。

如果您的视力不佳的用户通过使用屏幕阅读器来增强视力,他们可能会看到一个复选框和一个标签的相似外观,并尝试用鼠标单击该标签,如果将其带到链接目标,则会感到困惑