W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2017

RE: tab vs. arrow keys with NVDA and Firefox

From: ALAN SMITH <alands289@gmail.com>
Date: Mon, 23 Oct 2017 13:11:09 -0400
Message-ID: <59ee22ae.42f80d0a.2f15e.de51@mx.google.com>
To: "Schafer, Carmen" <schafercg@missouri.edu>, Steve Green <steve.green@testpartners.co.uk>, Jim Homme <jhomme@benderconsult.com>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>

Your original example was just showing the differences between tabbing with a screen reader which as you mentioned was in focus or forms mode.

All screen readers will move into their virtual or browse mode with arrow keys in most cases. That was what you had explained as happening at you tabbed to one button and then arrowed around and heard the content such as letters and words. Down arrow will move through the DOM and when landing on a focusable element you can select with the enter key. If you arrow left or right you go through the letters of words in most cases.

This allows non-visual users the ability to hear content around the selectable item or just to hear content on the page as it appears in the DOM.

For select lists, some will automatically switch modes for the user so that they can use the down arrows. Some do not so the down arrow does not function unless you change modes.

Tabbing to a radio button group, for example will allow arrow keys to change focus on radio buttons.

I hope this helps.

Alan Smith

From: Schafer, Carmen
Sent: Monday, October 23, 2017 1:02 PM
To: Steve Green; Jim Homme; w3c-wai-ig@w3.org
Subject: RE: tab vs. arrow keys with NVDA and Firefox

Thank you for the responses.  We will try it with JAWS and see what happens.  Thanks again!

-----Original Message-----
From: Steve Green [mailto:steve.green@testpartners.co.uk] 
Sent: Monday, October 23, 2017 11:04 AM
To: Jim Homme <jhomme@benderconsult.com>; Schafer, Carmen <schafercg@missouri.edu>; w3c-wai-ig@w3.org
Subject: Re: tab vs. arrow keys with NVDA and Firefox

NVDA does this with horizontal lists of links, which means that the main menu of just about every website is affected. I don't know why it has been designed this way, but it has always done it. It means that you can arrow down to the menu but you have to use the Tab key to navigate through the horizontal list of links.

It is not a WCAG non-compliance because there is nothing wrong with your code. The links should ideally be in a list element rather than a paragraph, but that would not change the behaviour with NVDA. If you test it with JAWS and pretty much any other screen reader it will work fine.

Steve Green
Managing Director
Test Partners Ltd

From: Jim Homme <jhomme@benderconsult.com>
Sent: 23 October 2017 16:22
To: Schafer, Carmen; w3c-wai-ig@w3.org
Subject: RE: tab vs. arrow keys with NVDA and Firefox

This does not answer your question, but the user needs to be able to read all of the content on the page. This means that most of the time they will arrive at the buttons by arrowing onto them. Second, NVDA is probably looking for a true control, such as what you would get with a button tag or an input control. Without knowing what your page is like, I am guessing that you have a span or div with a button role, and this is what is causing the problem.



Jim Homme,
Team Lead and Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,

From: Schafer, Carmen [mailto:schafercg@missouri.edu]
Sent: Monday, October 23, 2017 10:51 AM
To: w3c-wai-ig@w3.org
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:

Arrow Keys Used:
Banner banner landmark
heading  level 3
<h3 class="open">Find a Job</h3>
<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.

Received on Monday, 23 October 2017 17:11:49 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 6 December 2017 16:04:47 UTC