Re: tab vs. arrow keys with NVDA and Firefox

What is the keyboard behavior (expected & actual) in Firefox & Chrome 
without JAWs or NVDA loaded?  I always check with and without a screen 
reader loaded, and check for efficiency too.

Keyboard behavior, as mentioned in WAI-ARIA spec, should also be designed 
to be efficient.  The Tab key should NOT stop at each and every control 
(e.g. button, tab panel, etc.) within a structure.   The semantics 
communicated in the visual representation and the semantics communicated 
to the screen reader should usually be similar, although some interactive 
designers have different opinions. 

In your example, the visual representation appears as a heading with 3 
buttons (I'm not sure with the limited info in the example if the results 
of click the button makes changes to the DOM, or if it takes the user to a 
new page.) 
while the code seems to communicate a heading with 3 links,
        <a class="btn btn-yellow" href="/jobseeker/physician" 
tabindex="0">Physicians</a> . . .

Is there a "best practice" keyboard interactive pattern documented 
somewhere? This should help you choose your design based on a set of 3 
buttons, 3 links, 3 menu items, 3 tab panes, etc.
Unfortunately, often when asking new designers about keyboard behavior, 
that have no idea why or how keyboard interaction should be designed. 
Hence the need for repositories of documented keyboard patterns.

I'm not sure if this resource is current or not, but seems pretty recent: 
https://www.w3.org/TR/wai-aria-practices-1.1/ 
anyone have a better choice to use, or an additional reference?
__________
Regards,
Phill Jenkins
pjenkins@us.ibm.com
Senior Engineer & Accessibility Executive
IBM Research Accessibility
linkedin.com/in/philljenkins/
ibm.com/able
facebook.com/IBMAccessibility
twitter.com/IBMAccess
ageandability.com



From:   "Schafer, Carmen" <schafercg@missouri.edu>
To:     "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Date:   10/23/2017 10:07 AM
Subject:        tab vs. arrow keys with NVDA and Firefox



Hi all,
I have question regarding arrow keys vs. the tab key using NVDA and 
Firefox. When I use the tab key on three buttons (see screenshot below), 
NVDA announces each one individually as I tab and they are accessible 
using the enter key.  I believe this is called focus mode.  However, when 
using arrow keys it announces the heading level and a clickable list (see 
speech output below).  I believe this is called browse mode.  Using the 
arrow keys, NVDA doesn?t announce each button individually and I cannot 
access the link with the enter key.  Is this a WCAG 2.0 violation since 
the buttons can be comprehended and accessed using the tab key, but not 
with arrow keys? 
 
NVDA Speech Output
Tab Key used: 
PHYSICIANS  link
NURSING  link
ALL OPENINGS  link

Arrow Keys Used:
Banner banner landmark 
heading  level 3
FIND A JOB
clickable
list
Code
<h3 class="open">Find a Job</h3>
<div>
<p>
<a class="btn btn-yellow" href="/jobseeker/physician" 
tabindex="0">Physicians</a>
<a class="btn btn-yellow" href="/jobseeker/nursing" 
tabindex="0">Nursing</a>
<a class="btn btn-yellow external" href="/jobseeker/allopenings " 
target="_blank" tabindex="0">All Openings</a>
</p>
</div>
 
I appreciate anyone?s insight into this. 
 
Regards,
Carmen