隐性/明确表格标签背后的真相
#html #a11y #forms

最近,我一直在听到避免出于可访问性原因而避免“隐性”标签并偏爱明确标签。这是我给出的故事,但感觉好像故事中缺少一些东西。

<!-- Implicit -->
<label>
  Text
  <input>
</label>

<!-- Explicit -->
<label for="example">Text</label>
<input id="example">

做了一些研究之后,我发现了所有事情,这个故事还有更多细微差别。

  1. 两者都是100%罚款,并且根据所有语言和可访问性规格完全有效。
  2. 但是,,规格和现实世界实施是两件事。一些实际的屏幕读取器 do 实际上有问题正确阅读标签。
  3. 问题与标签中嵌套的代码无关,而是是否涉及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。