WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible options for 'select all' options

for

Number of posts in this thread: 3 (In chronological order)

From: D A
Date: Tue, Nov 02 2010 3:18PM
Subject: Accessible options for 'select all' options
No previous message | Next message →

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

I can't say I feel strongly about one over the other. I'm also not
sure what the accessibility consequences of one over the other is (or
if there is another option that would be preferred).

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)'.

Thoughts/suggestions?

-DA

From: Jukka K. Korpela
Date: Tue, Nov 02 2010 3:33PM
Subject: Re: Accessible options for 'select all' options
← Previous message | Next message →

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/

From: D A
Date: Tue, Nov 02 2010 3:48PM
Subject: Re: Accessible options for 'select all' options
← Previous message | No next message

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

Ah! A button! Makes perfect sense. The trick will be styling it to
make it usable (so that it's not overpowering) but that is certainly
doable. Good suggestion!

-DA