RE: tab vs. arrow keys with NVDA and Firefox

Phill,

 

Yes, the ARIA Practices Task Force of the ARIA Working Group is actively
developing the WAI ARIA Practices 1.1 and plan to have the first release of
the practices guide ready when ARIA 1.1 becomes a recommendation. If you
want the very latest, go to the editor's draft at:

http://w3c.github.io/aria-practices/

 

Note that as an editor's draft, it often contains content that is not fully
reviewed. However, that is also true of all earlier publications on w3.org
because they were all working drafts. The big milestone I am shooting for is
a fully reviewed and thoroughly edited document for the first release . this
year!

 

This is a community resource. So I encourage anyone interested in this topic
to chip in. You can find our GitHub repo here:

https://github.com/w3c/aria-practices

 

Matt King

 

From: Phill Jenkins [mailto:pjenkins@us.ibm.com] 
Sent: Monday, October 23, 2017 2:10 PM
To: Schafer, Carmen <schafercg@missouri.edu>
Cc: w3c-wai-ig@w3.org
Subject: 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/#grid>
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 <mailto:pjenkins@us.ibm.com> 
Senior Engineer & Accessibility Executive
IBM Research Accessibility
 <https://www.linkedin.com/in/philljenkins/> linkedin.com/in/philljenkins/
 <http://www.ibm.com/able> ibm.com/able
 <http://www.facebook.com/IBMAccessibility> facebook.com/IBMAccessibility
 <https://twitter.com/IBMAccess> twitter.com/IBMAccess
ageandability.com



From:        "Schafer, Carmen" <schafercg@missouri.edu
<mailto:schafercg@missouri.edu> >
To:        "w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> "
<w3c-wai-ig@w3.org <mailto: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