WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Danger! Testing Accessibility with real people — Medium

for

From: Bryan Garaventa
Date: May 15, 2016 4:24PM

Hi, the bug I was referring to with NVDA isn't actually that they appear on one line when Screen Layout mode is enabled, but rather that you can't intuitively enter Applications Mode by pressing enter on a Tab.

Here is an example that shows why this is important:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Variation%20ARIA%20Tabs%20With%20Right%20Click/demo.htm

The value of the ARIA Tabs implementation in this case is that this also allows for the attachment of ARIA Menus, all of which works accessibly when programmed properly with the correct focus movement and ARIA roles. So it is when dual functionality is involved that the value of ARIA becomes more apparent. For example if the Delete key can be used to remove a tab, or actions like the one above that allows for Shift+F10 or the Applications key to open a menu when focus is on a tab.

When using JAWS on the above page, you simply press Enter on the tab to activate Applications Mode, use the arrow keys to move focus between them, press Shift+F10 to open the attached menu, use the arrow keys to navigate the menu, press Escape or Tab to close the menu and set focus back to the previously focused tab. Verified using the latest JAWS17 in IE11 and in Firefox.

On iOS in contrast, you can tap outside of the menu on any static text to close the menu.

NVDA should enter Applications Mode when you press Enter on a tab to allow for the same functionality, because an ARIA Tab (element with role=tab) is an interactive widget, just like a form field. If this is non-intuitive to accomplish using NVDA, then this is an NVDA bug.

This type of dual functionality is often seen within enterprise web applications, and it is important to be able to make it accessible without having to convert everything to links and hidden offscreen text to simulate the same functionality.

Please feel free to examine the code for this widget if you want to see how it works, which is in the download at
https://github.com/accdc/tsg
Which can be found in the folder
"Coding ArenaARIA MenusVariation ARIA Tabs With Right Click"

Kind regards,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com