最近,我一直在听到避免出于可访问性原因而避免“隐性”标签并偏爱明确标签。这是我给出的故事,但感觉好像故事中缺少一些东西。
<!-- Implicit -->
<label>
Text
<input>
</label>
<!-- Explicit -->
<label for="example">Text</label>
<input id="example">
做了一些研究之后,我发现了所有事情,这个故事还有更多细微差别。
- 两者都是100%罚款,并且根据所有语言和可访问性规格完全有效。
- 但是,,规格和现实世界实施是两件事。一些实际的屏幕读取器 do 实际上有问题正确阅读标签。
- 问题与标签中嵌套的代码无关,而是是否涉及
id/for
属性。
来源:
- 屏幕阅读器基准测试:
tldr:
<!--
Bad: Though all screen readers *should* work with this,
some just won't play nice with it.
-->
<label>
Text
<input>
</label>
<!--
Works: This has the same support in screen readers as
the next option, but semantically it's not great, as the
label header contains non-text content
-->
<label for="example">
Text
<input id="example">
</label>
<!--
Best: This separates the label tag and input so their
duties are not conflated, it uses the for/id attributes
that works in all screen readers
-->
<label for="example">Text</label>
<input id="example">
,当然,请确保使用独特的ID。