带有标签链接的可访问假复选框

Question

我正在尝试访问一个假复选框。我有这个标记：

<label role="checkbox" aria-checked="false" aria-labelledby="acceptedAgreementLabel" tabindex="0" >
    <span><!-- FAKE CHECKBOX ICON --></span>
    <span id="acceptedAgreementLabel">Jag bekräftar att jag tagit del av och godkänt 
        <a target="_blank" href="/anvandarvillkor">användarvillkoren</a> för Vinos.
    </span>
</label>

但是，当使用VoiceOver尝试此操作时，它会跳过该复选框，仅停在说明内的链接处。我不确定自己在做什么错吗？

Answer 1

您正在有效地尝试将input元素和label元素变成一件事，这几乎肯定会带来不可预测的结果。这就是为什么在可访问性方面遵循既定标准如此重要的原因。

使用Voiceover进行测试非常好，但是在其他屏幕阅读器/浏览器配置中，您在此处所做的操作结果可能非常难以预测。此外，您今天得到的行为可能会随着产品更新而改变。

如果出于某种原因，您不能为复选框使用真实的输入元素，那么请考虑使用具有div角色的通用div代替此处的操作。

• MDN Web Docs -- ARIA checkbox role documentation
• W3C Form Labeling Controls -- Implicit Labeling of HTML Inputs

Answer 2

代替标签尝试使用锚标签，它将按预期工作