WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Lists

for

From: Helen Durrant
Date: May 20, 2013 1:45AM

Hi Joe,

Thanks for the quick response. Unfortunately, I can't use <optgroup>
elements for two reasons - 1. the parent element must also be selectable,
and 2. the tree of data is unlimited in how many levels it may be nested
(and <optgroup> elements cannot be nested).

Thanks for the suggestion, but I'm still looking for something to suit my
use case.

Kind regards,

Helen


On 20 May 2013 19:42, Joe Chidzik < <EMAIL REMOVED> > wrote:

> > 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
>
>