DEV Community 👩‍💻👨‍💻

Cover image for A11y tips: don't use links, buttons or headings inside labels
Carlos Espada
Carlos Espada

Posted on • Updated on

A11y tips: don't use links, buttons or headings inside labels

A label should only contain text, do not put interactive elements such as links and buttons inside, since:

  • It is more complicated to activate the form control associated with <label>.
  • Screen readers will have problems announcing the content of <label> (they only read the part that does not contain text).

DON'T

<label for="tac">
  <input
    type="checkbox"
    id="tac"
    name="tac"
  />
  I agree with the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
Enter fullscreen mode Exit fullscreen mode

The best option is to take the interactive element out of <label> and relate it to the form control using the aria-describedby attribute.

DO

<label for="tac">
  <input
    type="checkbox"
    id="tac"
    name="tac"
    aria-describedby="tac-desc"
  />
  I agree with the Terms and Conditions
</label>
<p id="tac-desc">
  Please read <a href="terms-and-conditions.html">our Terms and Conditions</a>
</p>
Enter fullscreen mode Exit fullscreen mode

Also, do not use headings within a label as many assistive technologies have trouble advertising them and are the most frequent navigation resource for their users.

DON'T

<label for="your-name">
  <h3>Your name</h3>
  <input
    id="your-name"
    name="your-name"
    type="text"
  />
</label>
Enter fullscreen mode Exit fullscreen mode

If the label text needs visual adjustments to make it look like a heading, they have to be done using CSS.

DO

<label for="your-name" class="large-label">
  Your name
  <input
    id="your-name"
    name="your-name"
    type="text"
  />
</label>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.