Adding Tabindex To All The Divs

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 wonderi

Solution 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.

Solution 2:

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

<ahref="#targetanchor">Go to anchor</a>
[...]
<divid="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)