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

Question

我有 4 个复选框，每个对应的标签是一个超链接，可将用户带到该特定主题的起始页。所以基本上选择复选框有不同的功能，同时激活链接执行另一个功能。我知道这不是推荐的做法，但我可以根据任何 WCAG 标准对其进行标记吗？

Answer 1

简短的回答，“是”，它违反了 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通过界面时，我会听到“历史复选框，未选中”和“收藏夹复选框，未选中”。这些听起来很正常。但是，在这两者之间，我会听到“历史链接”。历史链接似乎只是在两个复选框之间“浮动”。复选框将正确运行，链接将正确运行，但这仅仅是因为未使用任何视觉的屏幕阅读器用户不会尝试选择链接作为复选框标签。

如果您有一个低视力用户使用屏幕阅读器来增强他们的视力，他们可能会看到一些复选框和标签的外观，并尝试用鼠标单击标签，如果转到链接目的地，他们会感到困惑。