Accessibility - Tabbing doesn't match the screen reader

Question

I'm trying to test the accessibility of a web page.

I'm using Apple Voice Over as screen reader on my MacBook and if I use voice over key short cuts, everything's working fine. I can use voice over shortcuts (Ctrl + option + arrow-keys) to go through all elements of the page.

But if I turn the voice over off and try to navigate the web page using just the tab key, it doesn't work properly. Tabbing just considers elements such as header, links and buttons but it ignores normal text.

Is this normal? Is this acceptable?

Answer 1

It is totally normal, and it is actually the expected behaviour.

It is also acceptable because focus is meant to let user interact with some elements in the DOM. Only interactive elements are meant to be focused, the rest will just be ignored from the focus cycle.

The screen reader allows focusing pretty much any content on a page, as long as it is not set to be ignored by the screen reader (using aria-hidden="true" for example), and its behaviour can't really be compared to the tab cycle.

Using tab on a web page simply allows cycling through elements considered being interactive (i.e. focusable).

Text elements such as span, paragraphs, and even headers are not considered as focusable unless they are explicitly configured to be so. For example, specifying the tabindex attribute is one straightforward way to make an element focusable.

HTML 5.1 - User Interaction - Focus describes the focus mechanism in-depth and is worth reading.

Note that aria-hidden and tabindex can be used to make elements being focusable using keyboard but not being processed by a screen reader, or the opposite.