Basic accessibility for your HTML forms
Tags: webdev, html
Published: 2020-04-11 01:21:38

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_FJ7rdJgXtmfR-dR" /><figcaption>Photo by <a href="https://unsplash.com/@glenncarstenspeters?utm_source=medium&amp;utm_medium=referral">Glenn Carstens-Peters</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Today I want to write about a simple, yet powerful element you <strong>must</strong> include when building an HTML form: <strong>labels.</strong></p><p>You probably know what a label is. It tells the user <strong>what the field is all about.</strong> For example, when you see this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/506/1*xUCpjPEJSbkj7Bs4gacrCQ.png" /></figure><p>You know that <strong>you’re supposed to write your name</strong> in this input field.</p><p>You can write that code in two different ways. This is one option:</p>
```html
Name:
<input type="text" />
```
<p>And this is the second option you have:</p>
```html
<label>Name: </label>
<input type="text" />
```

<p><strong>For a person who can see, there is no difference</strong>. Both pieces of code will display the same on the screen.</p><p>But blind users use a <strong>screen reader,</strong> and <strong>without the </strong><strong>label tag, they won’t know</strong> what the input expects them to write 😕</p><p>So now we know that we need to use label tags for every field in our forms. These are the elements that use explicitly associated labels:</p><ul><li>input type=&quot;text&quot;</li><li>input type=&quot;checkbox&quot;</li><li>input type=&quot;radio&quot;</li><li>input type=&quot;file&quot;</li><li>input type=&quot;password&quot;</li><li>textarea</li><li>select</li></ul><h3>But it’s not enough… 🛑</h3><p>Just because we added a label tag it doesn’t mean our form is ready. We’re missing the most important part, which is <strong>associating the label to the input element.</strong></p><p>These are the two best ways to do it:</p><p><strong>1- Put the </strong><strong>input inside the </strong><strong>label tag</strong></p>
```html
<label>
  Name
  <input type="text" />
</label>
```
<p><strong>2- Add </strong><strong>"for" attribute on the label and </strong><strong>"id" attribute on the input</strong></p>
```html
<label for="last-name">Last name:</label>
<input id="last-name" type="text" />
```
<p>The <strong>value</strong> must be the <strong>same</strong> for both attributes.</p><p>There is a third way of associating a label to the input, which is this one:</p>
```html
<input aria-label="username" />
```
<p>This works for screen readers, but it <strong>removes the visual label</strong> from the screen. This is not good because the users <strong>won’t know what they are supposed to write</strong> in the input.</p><p>You may think that adding a placeholder can fix the issue, but only partially. When you type, the placeholder <strong>disappears</strong>. Once you end filling out the form and you want to check what you wrote, you’ve again the same problem: <strong>you don’t know what each field is about</strong>.</p><p>So it’s better to <strong>use one of the first two options</strong>. When you successfully associate a label with an input element, the label area becomes clickable as well 🎉 This is a good way to check if you did a good job: <strong>click the label and the input should be focused.</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/332/1*HL-FFyeeV_FQqP-mL71CLQ.gif" /></figure><h3>One more thing</h3><p>When you are done building a form, <strong>always</strong> check if you can fill all the fields by <strong>just using your keyboard</strong>.</p><p>This seems obvious, but a lot of forms (and I mean <strong>a lot</strong>) are impossible to use without a mouse. You need to think there are lots of people that unfortunately <strong>cannot use a mouse</strong>, and therefore they won’t be able to fill out your form.</p><h3>That’s all!</h3><p>Thanks for reading ❤️</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=65aab327dfb" width="1" height="1">