标签中带有 link 的可访问假复选框

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 尝试此操作时，它会跳过复选框并仅停在描述中的 link 处。我不确定我做错了什么？

Answer 1

尝试使用锚标记而不是标签，它将按预期工作

Answer 2

您实际上是在尝试将输入元素和标签元素合二为一，这几乎肯定会产生不可预知的结果。这就是为什么遵循既定的可访问性标准如此重要。

很高兴您使用 Voiceover 进行测试，但您在这里所做的结果在其他 screen-reader/browser 配置中可能非常不可预测。此外，您今天获得的行为可能会随着产品更新而改变。

如果出于某种原因，您不能为复选框使用真正的输入元素，请考虑使用具有复选框角色的通用 div 而不是您在此处所做的。

标签中带有 link 的可访问假复选框

Accessible fake checkbox with link in label

accessibility

wai-aria

voiceover