Accessibility is an often overlooked feature for websites. It’s not until after the design, development and launch is complete that organizations and businesses start thinking about accessibility. So here’s a few things you can do to get your site’s forms accessible.

Semantics matter

Having HTML markup that is semantic is good not just for forms but for your entire website. When anyone or anything digs through your site semantic elements help them by suggesting what kind of content is stored within them. For example, there is a form element which not surprisingly looks like this:

<form></form>

Once the form is declared any other content contained within relates to that form. Which leads us to some of the content contained within like labels and inputs.

Labels and inputs

Labels, like the word suggests, label what’s expected when a user inputs some content into a form. Forms have a variety of inputs. Some inputs are for collecting a user’s name. Other inputs are for collecting a user’s email. Whatever the input does, a label that echo’s the input’s intent is a good first step in ensuring users understand what the input is for.

When an input has a label, screen readers can announce what kind of data it’s expecting the user to input. Here’s an example of an input that collects a user’s email address with a label that expresses that intent.

<label for="email">Email address<label>
<input id="email" type="email">

Another way to do this without using the for and id attributes is to enclose the input within the label element like this:

<label>Email Address
    <input type="email">
</label>

See how simple it is to add a label to your inputs? Still, you’ll see many websites without any labels.

Important attributes

Next you’ll want to add a few more attributes to your input tag to ensure it performs well. Change it to look like this:

<label>Email Address
  <input name="email" type="email" aria-invalid="true" autocomplete="email" required>
</label>

Add the name attribute and fill it with email to help the browser’s autocomplete understand this field wants an email address. You can see autocomplete is set the same.

Also, aria-invalid is set to true so when a user forgets to add their email or has provided some invalid content, the input field will be put in focus automatically by the browser.

The last attribute is the required attribute which means that this data is required for the form to function. Screen readers will announce it as such.

Putting it together

So far we’ve looked specifically at one label and input in our form… email. However, forms rarely only have one input. Let’s say this form is for taking a users name and email address for the purpose of subscribing them to a newsletter. Then here’s what the form would look like:

<form>

  <label>Name<br>
    <input name="name" type="text" aria-invalid="true" autocomplete="name" required>
  </label>
  <br>
  <label>Email Address<br>
    <input name="email" type="email" aria-invalid="true" autocomplete="email" required>
  </label>
  <br>
  <label>Submit<br>
    <input name="submit" type="submit" value="Submit">
  </label>

</form>

Adding some <br> tags breaks the label onto another line so it sits above the input field. This is just personal taste but I think it looks better stacked vertically. What do you think?

Exception to the rule

This isn’t styled elegantly but it does the job. To make it a little better looking let’s get rid of the label and in its place use the aria-label attribute.

<input name="submit" type="submit" value="Submit" aria-label="submit">

Some will argue the label on a submit button is as important as it is on an input tag. However, unlike an input field where placeholder text would be removed once a user clicks into it, the button has the term Submit permanently displayed… even after it’s been clicked. To a user there’s no confusion about what it does – with or without a label. The same can’t be said of an input field that doesn’t have a label.

Still it needs to be identified to a screen reader so using an aria-label attribute with the term submit can substitute for the missing label. A screen reader will always read what’s written in the aria-label attribute.

Here’s what our final markup looks like along with how it looks visually:

<form>

  <label>Name<br>
    <input name="name" type="text" aria-invalid="true" autocomplete="name" required>
  </label>
  <br>
  <label>Email Address
    <input name="email" type="email" aria-invalid="true" autocomplete="email" required>
  </label>
  <br>
  <input name="submit" type="submit" value="Submit" aria-label="submit">

</form>

There’s lots more to cover on making forms accessible. This is just a quick overview. To learn more about other input fields and tips on how to make forms accessible, check out the WebAIM website.