Bring your karma
Join the waitlist today
HUMBLECAT.ORG

Blind and Visually Impaired Community

Full History - 2019 - 04 - 05 - ID#b9teze
5
Tab VS Arrows in your Screen reader? (self.Blind)
submitted by LetsGetAccessible
Hey everyone,

First off, thank you in advance for your insights!

Myself and a colleague have been tasked with making our work's online educational program accessible. To that end, we've been testing using NVDA, and I was wondering...

Do you tend to use the tab key to navigate through pages, or the arrow keys? Specifically, the reason I ask is that we have some user data forms that populate from our database, and the "titles" for those don't come up in the tab order. There is some context for what the user's looking at based on the page that they're navigating, but the fields themselves appear "unlabeled" (beyond the screen reader telling the user that it's a read-only/editable field, and the contents of the field) unless you're using the arrows to navigate through the page (in which case the screen reader picks up the titles of the fields).

We do plan to have some actual regular users of screen readers test our content, but want to get a solid base of functionality down first, so I'd really like to know which way to go with this!

Thanks again!
Marconius 2 points 4y ago
Different screen readers navigate in different ways, so both modes have to work, especially if you are making it keyboard accessible for users with mobility impairments. It sounds like you aren't labeling your form controls properly. Every form field should have a <label> element using the 'for' attribute pointing to the id of the form field. You can also use aaria-label to label the form controls, but the label and the for="id" method is the most accessible. This ensures that tabbing into the field results in the screen reader announcing the label programmatically associated with it, plus allows users to click on the label to interact with and focus the form control.

VoiceOver uses both Tab and arrow keys for navigation, as does Jaws. Be sure to test on both platforms and within Safari, Chrome, Firefox, and Edge, as your design decisions may function differently within each. I primarily use VoiceOver in MacOS in Safari, using QuickNav which is all managed through the arrow keys. I'll very rarely use tab, since QuickNav has a rotor option for form controls, so I can navigate full forms using just the down arrow alone.
LetsGetAccessible [OP] 1 points 4y ago
Yes, you're right! I did some more looking into it... seems some of our stuff just had the name attribute rather than the id attribute... a quick fix, and now all our fields are properly "labeled"! Thank you!
bradley22 1 points 4y ago
I agree completely. Labeling your forms properly must be done for the screen reader user to navigate your form efficiently. We will then be able to tab through your form and fill out what we need to much faster.
Superfreq2 1 points 4y ago
Yeah I think taking the time to properly label is the best bet here as others have mentioned, because it's probably close to a 50 50 split of people using tab or arrows, and sometimes (like if their are many fields close together) we might use both options.

Plus if the labels aren't read with the jump to element commands like "E" for next edit box, "C" for next combo box, "B" for next button ETC, then that's a big problem too as that's how we jump quickly between sections of a form particularly if we already know our way around somewhat.
LetsGetAccessible [OP] 1 points 4y ago
Awesome, thank you! These were things we hadn't even considered (use of element commands).
Superfreq2 1 points 4y ago
Just to clarify, I meant commands built into the screen reader already.
LetsGetAccessible [OP] 1 points 4y ago
Yes, I understand. We hadn't even played with those -- just with tab and arrow keys! Thanks again! :)
SLJ7 1 points 4y ago
Hi,
First, thanks for caring.
NVDA has two modes with specific purposes.
Browse mode allows the user to arrow up and down through the entire page, and use navigation commands like pressing h for the next heading and k for the next link. This is what most people will use most of the time on webpages because it provides a virtual rendering of the page. The tab key works here, but other than that, none of the keyboard commands really correspond with normal windows commands.
Focus mode is what we use to navigate sites like Reddit which have their own keyboard commands built-in, or to fill out forms. In focus mode, we generally tab through the page, and the letters and arrow keys work normally, allowing us to fill in any text boxes or select things in lists. We don't expect NVDA to read every single thing on the page when tabbing through it, since browse mode will catch those things.
You can toggle these by pressing nvda+space (nvda being either insert or caps-lock depending on your settings). If you hear a high beep combined with what sounds like a key press, you're in focus mode. If you hear a lower beep with nothing else, you're in browse mode.
So, if the primary purpose of a page is not data entry (such as a registration form), the user is probably going to be navigating with browse mode, meaning they'll be arrowing through the page and having NVDA read its virtual render of everything. In that case, it's not really important for the tab key to read everything, though it's good practice to try and make the tab key at least move to and highlight every control that someone using only a keyboard might need to access.
I hope this helps; let me know if you have any other questions.
LetsGetAccessible [OP] 1 points 4y ago
Wow, this is all excellent information. Thank you so much for sharing -- this will be a huge help in guiding our efforts, and I may just take you up on the offer to answer other questions!
Duriello 1 points 4y ago
Personally I almost never use tab anywhere with the exception being the old reddit layout precisely because of the problem that you describe, but the way I navigate web pages depends entirely on the screen-reader and operating system since they are all very different. With NVDA I just jump to the highest order heading and then navigate downwards using Control + Down unless I'm already familiar with the layout.
LetsGetAccessible [OP] 1 points 4y ago
Good to know! Thank you very much for sharing your insights!
[deleted] 1 points 4y ago
Tab is most common, especially with JAWS.
LetsGetAccessible [OP] 1 points 4y ago
Awesome, thank you!
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc   •   HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.