Can I use tabindex on headlines and important text?

user_3765149 0
Viewed 68

I am testing my website with the [screenreader plugin for chrome]1 and with MacOS built in voiceover utility. As I tab from one interact-able element to another, the screenreader reads the label or aria-label. However, without putting tabindex="0" on headlines and other important items such as product name, product description, pricing information, disclaimers, instructions, etc., the focus never goes to those items and the screenreader never announces them.

I want to put tabindex="0" on headlines and important text, but I've read that I should only put tabindex on interact-able items.

Am I simply not using the screenreader correctly? What am I missing here? I want the user to be able to get an overview of all the important information on the page. It is not enough for the user to just jump between inputs and buttons.

wai-aria screen-readers accessibility html javascript
1 Answers

This is simply unfamiliarity with a screen reader as you said.

You don't want to add tabindex="0" to everything as this would then make keyboard navigation for those not using assistive tech difficult (too many focus stops).

Additionally anything that receives focus should be interactive / clickable as you have already read about so it would confuse AT users too!

this guide will help in learning how to use NVDA screen reader, there are similar guides for JAWS and Orca too.

There are two basic ways most people navigate to start off with. Up and down arrows to get to the next item and previous item, and number keys 1-6 to jump between headings (h1-h6 respectively) are enough to get around most well designed web pages.

user_27028940
Related