HTML and CSS tips #10 "How the label element can improve accessibility"

github logo Updated on ・1 min read

Don't forget to add the label element for form fields. It enables the autofocus mechanism on the field. So when users click on the text, focus jumps on the field which is related with that text.

Don't do it

<form class="form">
  <div class="form__group">
    <span class="form__hint">Email</span>
    <input class="form__input" type="email">
  </div>
</form>

You can use it instead

<form class="form">
  <label class="form__group">
    <span class="form__hint">Email</span>
    <input class="form__input" type="email">
  </label>
</form>

P.S: If you'd like to read more tips, articles or other content from me, go to my LinkedIn profile 👉 https://www.linkedin.com/in/melnik909/

twitter logo DISCUSS (1)
Classic DEV Post from Feb 5

Clean up your code with these tips!

Learning new patterns to make your code smaller, and more clear.

Stas Melnikov profile image
I write training materials for designers, developers, managers and publish it on my LinkedIn profile

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️