Adding tabindex to all the DIVs

Question

I know DIVs and P elements are not inherently focusable and can be made to be one by adding tabindex attribute. I am trying to make a Screen Reader friendly website and was wondering if it is necessary to have tabindex on each and every DIVs and P on my site so that the screen reading software like JAWS, NVDA and Chrome Vox can read its content.

Right now using Chrome Vox, it does not read a Paragraph content unless I have a "tabindex = 0" as an attribute. Am I testing it incorrectly? Do people who use screen reading software use some other way to read the page content then hitting tab to shift focus from element to element?

Answer 1

Only controls you want people to interact with (e.g. click or type into) should be focusable.

You should not need to make them focusable just to allow them to be read (and no screen reader I've ever tested (which doesn't include Vox) has required it).

Making them focusable would make it harder for people to use the site since they would have to tab through more elements to get the ones they want to interact with.

---

From the Chrome Vox documentation:

To navigate through the text on a screen, you can use the ChromeVox modifier keys. On a ChromeBook, the ChromeVox keys are Shift and Search, on Mac OS X the ChromeVox keys are Control and Command and on other platforms, such as Windows, the ChromeVox keys are Control and Alt. To move through a page, press the ChromeVox keys alongside the Up and Down arrow keys to navigate through the page.

Answer 2

you only have to put a tabindex="-1" on div tags which are the target of an anchor link

<a href="#targetanchor">Go to anchor</a>
[...]
<div id="targetanchor" tabindex="-1">

Using Chromevox, you have a list a shortcut to navigate through the page that you should be aware of, see here: http://www.chromevox.com/en/keyboard_shortcuts.html (ChromeVox + Down to navigate backward for instance)