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.

Daniel Berryhill
Published in
7 min readDec 10, 2023

A single red umbrella among several gray umbrellas
Photo by Noah Näf on Unsplash

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>

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (1)

Write a response

I loved this article. Yes some elements are totally shit. It is important that user is communicated “contextually” and we do not start from the ground up. When a user focuses on the element, they should be informed what it is - “Pets, Select Pets…