W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2016

RE: Question: Key Operation of Dropdown menu

From: Jonathan Avila <jon.avila@ssbbartgroup.com>
Date: Wed, 20 Jul 2016 13:52:13 +0000
To: WAI IG <w3c-wai-ig@w3.org>
Message-ID: <BY2PR03MB27287CBB4BC27D2575770629B080@BY2PR03MB272.namprd03.prod.outlook.com>
Satoko, in short it think what Bryan is getting at is it's ok to rely on arrow keys for desktop as long as the proper ARIA roles are there that would allow these keys to be sent from desktop screen readers and would be assumed by the user based on the appropriate roles.  If the appropriate roles are not used use of only arrow keys would likely not be available to desktop screen reader users and may not be apparent for use even if the user was an advanced screen reader user.  On mobile you will likely have a different situation as some browsers like Safari do not pass keystrokes through from the keyboard to the web page.


Jonathan Avila
Chief Accessibility Officer
703.637.8957 (Office)

Visit us online: Website<http://www.ssbbartgroup.com/> | Twitter<https://twitter.com/SSBBARTGroup> | Facebook<https://www.facebook.com/ssbbartgroup> | Linkedin<https://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog/>
Check out our Digital Accessibility Webinars!<http://www.ssbbartgroup.com/webinars/>

From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com]
Sent: Wednesday, July 20, 2016 2:04 AM
To: Tanaka, Satoko; WAI IG
Subject: RE: Question: Key Operation of Dropdown menu

In looking at the code shown on that page, it looks like the only roles present are role=menubar and role=menu for the construct plus embedded links with no roles. I'm unable to locate a working example that shows this in action though both in IE11 and FF. Is this present on the page? I can't tell if the required child roles are being added dynamically.

The containers with role=menubar or role=menu require focusable children with role=menuitem, or role=menuitemcheckbox, or role=menuitemradio. All ARIA Menu constructs require owned children with these roles.

To visually see these roles in action, try using Visual ARIA at

When the bookmarklet is active and you are using the keyboard, any elements that receive focus that don't include these roles will be shown in red font.

The following Menubar example shows how keyboard functionality is programmed according to spec, which also includes the requisite keyboard information for relevant nodes:

                Within the global.css file, the classes are set up so that the required roles plus supporting attributes plus focusability is clearly conveyed as implemented.

Though ARIA 1.1 supports the use of aria-orientation to convey the horizontal or vertical layout of role=menubar or role=menu now, there is little to no support for conveying this to screen reader users at present, so the above example includes logic to accomplish this accessibly in the meantime.

All the best,

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
415.624.2709 (o)

From: Tanaka, Satoko [mailto:sako-t@jp.fujitsu.com]
Sent: Tuesday, July 19, 2016 7:29 PM
To: WAI IG <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: Question: Key Operation of Dropdown menu


I would like to ask a question about implementation of dropdown menu created with WAI-ARIA.

In this example, there are three types of dropdown menus at the top left corner. The labels are "Section 1", "Section 2", and "Section 3". A breadcrumbs menu is placed just below of the dropdown menu.
When tabbing this example page, the focus is on the menu of "Section 1" first, and next, it moves to "Home" in the breadcrumbs rather than to "Section 2" which is next to "Section 1".
To move to "Section 2" from "Section 1", the right arrow key must be used, which means users can operate the dropdown menu with keyboard as long as following a specific key operation.

I'm wondering if this example is surely sufficient to WCAG 2.0. I think it might have to provide an instruction of how to operate the dropdown beforehand.

My question is:
Is this key operation sufficient to WCAG 2.0? (the point is this implementation does not depend on tab key operation)
In this case, is it necessary to describe how to operate the dropdown menu with keyboard in order to meet SC of WCAG 2.0?

I would highly appreciate, if someone kindly would give some good advice to me. Thanks in advance.

Many thanks and kind regards,
Received on Wednesday, 20 July 2016 13:52:57 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 20 July 2016 13:52:58 UTC