WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: dropdown requirements?

for

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

From: Anne.Naber
Date: Tue, Jan 31 2017 9:46AM
Subject: dropdown requirements?
No previous message | Next message →

Hi-
I am wondering if there are any requirements regarding dropdowns? Should you be able to arrow through controls, tab, or both?
Thanks.
Anne


Anne Naber
Legal UX- accessibility specialist
651-687-6214
= EMAIL ADDRESS REMOVED =

From: Rob Dodson
Date: Tue, Jan 31 2017 10:55AM
Subject: Re: dropdown requirements?
← Previous message | Next message →

Folks can correct me if I'm wrong, but I believe for a dropdown you'd want
to use the behavior described in the ARIA menu button pattern
https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

On Tue, Jan 31, 2017 at 8:46 AM < = EMAIL ADDRESS REMOVED = > wrote:

> Hi-
> I am wondering if there are any requirements regarding dropdowns? Should
> you be able to arrow through controls, tab, or both?
> Thanks.
> Anne
>
>
> Anne Naber
> Legal UX- accessibility specialist
> 651-687-6214 <(651)%20687-6214>
> = EMAIL ADDRESS REMOVED =
> > > > >

From: Birkir R. Gunnarsson
Date: Tue, Jan 31 2017 11:19AM
Subject: Re: dropdown requirements?
← Previous message | Next message →

What do you mean by "dropdown"
Do you mean a typical dropdown element , such as one coded using the
<select> element in HTML (the corresponding ARIA Authoring Practices
1.1 entry for that is Listbox).
Menu buttons rae slightly different, so are tabs, though tabs behave
almost ike dropdowns with respect to keyboard navigation (except
horizontal tabs should be operated with right and left arrows, typical
dropdowns should always be vertical and operated with rrows up/down).
Check the ARIA Authoring Practices spec entries for listbox, tabs and
menubutton to get a feel for the differences.
If you can code your dropdown using the <select> element, most of yur
accessibility worries are over, just label it correctly.
You can navigate through it with the arrow keys.

You need to be careful when selecting an option in the dropdown causes
page content to be updated.
If you use the onchange event, you cannot automatically move the focus
away from the dropdown, load another webpage or update content that is
not screen reader discoverable (content that comes, in content order,
before the dropdown).
To do these things, you need to place a button next to the dropdown
that user can click to initiate those types of changes.
You can check WCAG 3.2.2 for more details.



On 1/31/17, Rob Dodson via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
> Folks can correct me if I'm wrong, but I believe for a dropdown you'd want
> to use the behavior described in the ARIA menu button pattern
> https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
>
> On Tue, Jan 31, 2017 at 8:46 AM < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi-
>> I am wondering if there are any requirements regarding dropdowns? Should
>> you be able to arrow through controls, tab, or both?
>> Thanks.
>> Anne
>>
>>
>> Anne Naber
>> Legal UX- accessibility specialist
>> 651-687-6214 <(651)%20687-6214>
>> = EMAIL ADDRESS REMOVED =
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.

From: Jonathan Avila
Date: Tue, Jan 31 2017 11:38AM
Subject: Re: dropdown requirements?
← Previous message | Next message →

> Folks can correct me if I'm wrong, but I believe for a dropdown you'd want to use the behavior described in the ARIA menu button pattern https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

I'd also add on mobile such as with iOS VoiceOver won't be able to send up and down arrows through to the page-- so for drop downs on mobile you will need to consider making it work without relying on specific keycodes for the arrows.

Jonathan

From: Patrick H. Lauke
Date: Tue, Jan 31 2017 12:36PM
Subject: Re: dropdown requirements?
← Previous message | No next message

On 31/01/2017 16:46, = EMAIL ADDRESS REMOVED = wrote:
> Hi-
> I am wondering if there are any requirements regarding dropdowns? Should you be able to arrow through controls, tab, or both?

Clarifying that there's no *requirement* (in the WCAG sense)
specifically around dropdowns, but that the usual WCAG SCs apply (e.g.
2.1.1 being able to use it with a keyboard).

While ARIA gives a suggested pattern for how it should be behave, what
roles it should have, etc, there is no stringent requirement to follow
that one exactly. It's only one possible technique that satisfies WCAG SCs.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke