RE: Question: Key Operation of Dropdown menu

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

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>
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

Hi,
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.
E.G
http://whatsock.com/training/matrices/#menubar
and
http://whatsock.com/training/matrices/#menu

To visually see these roles in action, try using Visual ARIA at
                                http://whatsock.com/training/matrices/visual-aria.htm

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:
https://github.com/accdc/aria-menubar

                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


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>
415.624.2709 (o)
www.SSBBartGroup.com<http://www.SSBBartGroup.com>

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

Hi,

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

https://wet-boew.github.io/v4.0-ci/demos/menu/menu-en.html
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,
Satoko