The Truth behind Implicit/Explicit form labels

Recently I’ve been hearing to avoid “implicit” labels and to favor explicit labels for accessibility reason. This was the story I was given, but it felt like there was something missing from the story.

  Text
  



 for="example">Text
 id="example">

After doing some research I found, like with all things, there is some more nuance to the story.

1. Both are 100% fine and completely valid according to all language and accessibility specifications.
2. HOWEVER, specs and real world implementations are two different things. Some actual screen readers do in fact have problems reading labels properly.
3. The issue is not related to the code being nested in a label, but instead whether there is an id/for attribute involved.

Sources:

• Screen reader benchmark testing:
  • https://a11ysupport.io/tests/html_label_element_implicit
  • https://a11ysupport.io/tests/html_label_element_explicit

TLDR:

  Text
  



 for="example">
  Text
   id="example">



 for="example">Text
 id="example">

And of course, make sure to use unique ID’s.