DEV Community

Discussion on: SPA-like instant navigation in static sites

Collapse
 
merri profile image
Vesa Piittinen

This works visually and is technically clever, but have you considered what happens to a person who uses a screen reader as their only tool to interact with the site?

Collapse
 
kartiknair profile image
Kartik Nair

I had not actually could you please help me out here I'm always trying to improve accessibility.

Collapse
 
merri profile image
Vesa Piittinen

I don't have a real answer other than "I don't know". These are things that I haven't had the time to expirement on with NVDA and Firefox, and I haven't had the time to start specializing on the topic.

Doing the same the browser does with regular HTML navigation is likely to be closest to the right answer, but it might also make sense to just jump straight to the actual content that the link indicates and thus save some interactions to make an attempt to improve usability.

My best guess is moving focus to the first tabbable element of the page, thus mimicking the typical "jump to content" behavior that you get on regular page loads. However there are other things to consider, like what happens when you go back or forward in browser history. I don't know how native browser behaves in these cases where you have old page scroll position, no clue where the default interaction goes to with a screen reader.

This kind of issues have really made me question the whole SPA stuff. There is just so much native navigation does for you so you don't need to worry about getting it right!

Thread Thread
 
kartiknair profile image
Kartik Nair

Thanks for the reply. It seems like focussing the first element is a good idea considering that reach-router also does the same. Not that difficult to implement either:

document.querySelector('body').firstElementChild.focus()