WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible options for 'select all' options

for

From: Jukka K. Korpela
Date: Nov 2, 2010 3:33PM

D A wrote:

> I'm trying to find some established design patterns to handle 'select
> all' scenarios for long lists of checkboxes.
>
> There seems to be two somewhat standard approaches. One is to use
> links:
>
> Select: all | none
>
> And the other is to use another checkbox:
>
> [ ] Select All

My intuitive reaction is that neither approach is really adequate, but a
checkbox is less unnatural.

Links are not appropriate, as a link is a reference to a resource, typically
an external one. Something that is marked up as a link but really isn't a
link may pollute a list of links (which some users find essential) and may
be misunderstood as a link.

A checkbox that turns a set of checkboxes on (or off) isn't really
comparable to checkboxes.

I would use a button, e.g. <input type="button">, generated dynamically with
JavaScript (so that the button isn't there if it can't work). The risk is
that some users might mistake it as a submit button, but using a good
descriptive button text will probably make the risk fairly ignorable.

> In either case, I'm pretty sure 'all' would not suffice as a
> descriptor of what one is selected so we'd want to at least provide
> more context such as 'select all (options in this list)'.

Button text should normally consist of a verb and possibly something else;
"Select all" would probably be the minimum here. Maybe "Select all options"
is more descriptive. And "Unselect all options" for a button for unchecking
all.

Rule of thumb: buttons correspond to actions, so their texts should contain
verbs; checkboxes and radio buttons correspond to alternatives, so their
labels should normally have nouns as central constituents

--
Yucca, http://www.cs.tut.fi/~jkorpela/