The Inaccessible HTML

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.

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>

The markup renders this way:

With that multiple attribute set, the user can select multiple pets. How does the user select multiple options?

Selecting multiple via mouse

If you were to use your mouse only, the best you could do is select multiple consecutive options. If you wanted to select non-consecutive options (such as “Dog” and “Hedgehog”), you’d be out of luck. As far as I can tell, that’s impossible with a mouse only.

Selecting multiple via mouse and keyboard

You can select consecutive and non-consecutive options using the mouse and keyboard. To select consecutive items, you can select one end of the range (either the first or the last of the options you wish to select) hold the Shift…