WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Lists

for

From: Joe Chidzik
Date: May 20, 2013 2:04AM

In your initial suggestion of adding in additional text to describe the hierarchical position of an element, you used this example:

<option><span class="screen-reader-only">Newsletters</span>-- Cats</option>

But this "Newsletter" prefix is valuable information for sighted users as well as screenreader users, so no need to encase it within a span and provide it for screenreaders only. Instead just display this prefix information visually:

<option>Newsletters </option>
<option>Newsletters: Cats</option>
<option>Newsletters: Music</option>

Further nesting levels could be achieved with:
<option>Newsletters: Music</option>
<option>Newsletters: Music: Disco</option>
<option>Newsletters: Music: Funk</option>

Whilst this doesn't semantically convey the structure you're wanting, this does not seem possible with the available structural elements, unless you start looking at treeview type selection systems, but these seem unnecessarily complex when the simpler solution above may work.

Cheers
Joe

From: Helen Durrant [mailto: <EMAIL REMOVED> ]
Sent: 20 May 2013 08:45
To: Joe Chidzik
Cc: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Select Lists

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