Derek Oware
Derek Oware

Derek Oware

TIP TO IMPROVE ACCESSIBILITY IN YOUR SINGLE PAGE APPLICATION

TIP TO IMPROVE ACCESSIBILITY IN YOUR SINGLE PAGE APPLICATION

Derek Oware's photo
Derek Oware
·Oct 2, 2020·

1 min read

Navigating in a multi-page application is done by refreshing the webpage. In this case, the screen-reader announces to the user when the page is done loading. However, In single-page applications, navigation is done via JavaScript which makes the screen-reader unaware of the navigation.

The solution is easy. When the navigation is done, just set the focus on the <h1></h1> element on the loaded page. The screen-reader will read the text content of the <h1></h1> element, hence making the user aware that the page has finished loading.

 
Share this