A11y wiki SPA recommendations, Navigation

[ajfarkas]

Is your feature request related to a problem? Please describe.
The Navigation of pages section has two issues:

1. Tab index is to make an element focusable is incorrectly shown as -1. This removes an element from the tab order.
2. I would also recommend against relying on a focusable h1 to announce to screen readers that the page has changed. There's no guarantee that the user will navigate to that element to hear the change, plus it adds an unnecessary extra step for keyboard navigation.

Describe the solution you'd like

1. The appropriate tab index for including an element in the tab order is tabindex="0".
2. Adding an element with an aria-live="assertive" attribute will announce to screen readers that the page has changed without affecting the experience of other users.

Describe alternatives you've considered
There may be a way in 2025 to notify SR software that the entire page has changed, but I'm not aware of that.

Additional context
I've made a Codepen example you can play with to see what I'm talking about.

It's worth noting that screen readers have many built-in ways to navigate a page. For instance, a list of headings or a list of links. If a SR user notices a page change, the headings list will announce the h1 change without the user having to navigate to it. Likewise, screen readers have methods to allow users to navigate through all text, regardless of the tab index (ie in VoiceOver, VO + → will read an h1 that is out of the tab order).