WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Select Lists

for

From: Helen Durrant
Date: May 20, 2013 2:20AM

Joe,

It certainly seems as though this will be the most simple way to achieve
what I'm after - and you're right, provides contextual information for all
users. I'll go with that.

Thanks for your suggestions.

Cheers,

Helen


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

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