WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Select Lists

for

From: Helen Durrant
Date: May 19, 2013 11:59PM

Hi everyone,

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

I can easily achieve this sort of nested view using whitespace or
punctuation to mark indentation in the <option> tags, but this context will
be lost when the list is read out by a screen reader - and this will be a
problem for nested items with the same name as items further up the
hierarchy.

An accessible option is to have the list as follows:

Inbox
Trash
Newsletters
Newsletters / Cats
Newsletters / Music

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

(except this is not valid, as you cannot have a span inside an option).

Any advice you can offer would be much appreciated.

Kind regards,

Helen Durrant