E-mail List Archives
Thread: Accessible Select Lists
Number of posts in this thread: 6 (In chronological order)
From: Helen Durrant
Date: Sun, May 19 2013 11:59PM
Subject: Accessible Select Lists
No previous message | Next message →
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
From: Joe Chidzik
Date: Mon, May 20 2013 1:42AM
Subject: Re: Accessible Select Lists
← Previous message | Next message →
> 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
From: Helen Durrant
Date: Mon, May 20 2013 1:45AM
Subject: Re: Accessible Select Lists
← Previous message | Next message →
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 ADDRESS 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
>
>
From: Jukka K. Korpela
Date: Mon, May 20 2013 2:04AM
Subject: Re: Accessible Select Lists
← Previous message | Next message →
2013-05-20 10:45, Helen Durrant wrote:
> 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).
This sounds like such a complicated <select> element that even if it
were possible to implement the requirements, the result would have very
low usability and accessibility. Even simple <select> elements tend to
cause problems, and even more so when their options do not constitute a
simple linear list is in an understandable order.
Technically, you could replace the <select> element by a set of radio
buttons and their labels. Then you could arrange the alternatives
(button/label pairs) in different ways, e.g. using headings or lists.
However, consider first how the interaction could be arranged in a
simpler manner from the user's point of view. Instead of a multi-level
setup where the user needs to go through different levels when making
one choice, you could have a simple one-level choice between
alternatives so that after the choice, a next-level choice is presented,
and so on.
Yucca
From: Joe Chidzik
Date: Mon, May 20 2013 2:04AM
Subject: Re: Accessible Select Lists
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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
From: Helen Durrant
Date: Mon, May 20 2013 2:20AM
Subject: Re: Accessible Select Lists
← Previous message | No next message
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 ADDRESS 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 doesnt semantically convey the structure youre 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 ADDRESS 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 ADDRESS 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****
>
> ** **
>