Member-only story
The Inaccessible HTML
Inaccessible native HTML: <select multiple>
The <select multiple>
control doesn’t work well, but there may be a solution on the (far) horizon.
You’ve probably been told by many accessibility advocates (including me) that you should avoid or minimize your use of third-party UI frameworks and libraries. We tell you that using native HTML (as opposed to some home-rolled, ARIA-infused <div>
and <span>
rave) is always the way to go.
That’s true… almost always.
There are a few native HTML implementations that are less than accessible. This article will focus on the <select multiple>
element.
How it works
The idea of a <select multiple>
element is that the user can select multiple options for a control, similar to a grouped list of checkboxes.
However, as you’ll find, not only is it inaccessible, it’s also not very user-friendly. Here’s the markup:
<label for="lbmPets">Pets</label>
<select id="lbmPets" multiple>
<option>Dog</option>
<option>Cat</option>
<option>Hedgehog</option>
<option>Snake</option>
<option>Pony</option>
<option>Rock</option>
</select>