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
and 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 element.
The idea of a 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:
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…
