How can I determine the order of HTML elements read by a screen reader?

Question

Is it possible to determine the order of HTML elements read by a screen reader (like TalkBack or VoiceOver) regardless of their position in the DOM? I'm wondering if there is an id, an HTML attribute like "voiceindex" (analogous to tabindex ) or another option to control the sequence. The corresponding webpage is embedded as webview inside the app. Therefore I don't have access to native Android or iOS code.

Answer 1

No, there is no attribute or anything like you describe to control the reading order of a web page. Something like this exists in PDF and it's a big mess; for sure it was a very bad idea, making PDF accessibility quite complex.

A web page is read in the same order as elements appear in the DOM and this is always so, regardless of your CSS. It ahs a great advantage over having to manually specifiy an order: it's simple, you just have to structure your web page using structural elements appropriately; then, to verify that it makes sense for a screen reader user, just read your HTML code from top to bottom and completely forget about visual placement. This later exercise is widely known as linearization; that's basicly what screen readers do and how screen reader users perceive web pages

If the exercise isn't convaincing enough, imagine that you have recorded your page on an audio CD. You can listen to each title one after the other, or jump directly to the beginning of a track, but not easily jump directly to the middle of a song. Jumping to the beginning of a track is a metaphore for the jump to next heading or next section of screen readers. Selecting a track from the tracklist is also possible with screen readers as most of them provide a list of sections or headings to jump to.

With the hope that this image will help you structure your page well for screen reader users, and why you should carefully think about it. This was in fact certainly your foundamental problem when you posted your question.