WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: dropdown requirements?

for

From: Birkir R. Gunnarsson
Date: Jan 31, 2017 11:19AM

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


--
Work hard. Have fun. Make history.