WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Lists

for

From: Joe Chidzik
Date: May 20, 2013 1:42AM

> I have a list of nested items that I would like to display to users in a <select>. For
> example:
>
> Inbox
> Trash
> Newsletters
> -- Cats
> -- Music

<snip>

> - however I was hoping to be able to add some extra context somehow to the
> nested <option> tags to provide screen reader only information about their parent
> folder, for example:
>
> <option><span class="screen-reader-only">Newsletters</span>-- Cats</option>

This sounds like a job for the <optgroup> element. This can be used for grouping similar options within a select element, similar to what you're wanting. The optgroup element provides a visible, but non-selectable, heading for the options listed below. In your case you might want a newsletter optgroup e.g.

<select>
<option>Inbox</option>
<option>Trash</option>
<optgroup label="Newsletter">
<option>Cats</option>
<option>Music</option>
</optgroup>
</select>

For more info, and an example, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

Cheers
Joe