TL;DR: Regardless how small a component, always make sure you consider a variety of different users and their abilities while implementing. On first glance, input elements such as a checkbox may seem like an easy fix - but there are still a few things to consider in order to make sure they are accessible.
This series will tackle different kinds of input elements and how to make them more accessible, starting with the basics: using the correct input type and associating a label.
Let's have a look.
Choosing the correct Input Type
When using input elements in HTML, we want to make sure to always set the correct input type for the corresponding element. The default input type is text and may work in a range of cases, but being as specific as possible helps all your users - and comes with a bunch of inherent functionality. <input type="number"> for example defines a numeric input field, opens the number pad on mobiles instead of the keyboard and you can restrict the range by using minimum and maximum numbers. <input type="password"> masks the corresponding input and therefore protects the users privacy. Depending on the browser, <input type="date"> opens a date picker,... and so on. By choosing the correct input type, we make our own life easier, being able to use certain inherit functionalities in HTML, and improve user experience at the same time.
Making sure there is always a label associated with your input elements
Regardless of what type of input you are using, make sure you associate a label to your input field. Usually, this can be done with a <label> element and the for attribute.
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
aria-label vs. aria-labelledby
In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible.
aria-label
An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.
<button aria-label="Search"><img src="search-icon.svg" alt=""></button>
aria-labelledby
When another element is used as reference for labelling the input, aria-labelledby comes in handy.
<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
<h2 id="dialog1_label">Add Delivery Address</h2>
</div>
Whenever possible, try to use semantic HTML to provide accessible names for your input elements. Only if you've made sure it's not possible in this specific case, revert to using aria attributes.
Once we've got these basics down, like using semantic structure, adding the correct input type and associating labels, we can have a closer look at the other aspects of making our input elements more accessible, such as disabled input elements, focus style & color contrasts and expected keyboard navigation.
Resources:
Top comments (0)