I want to accessibly trigger a browsers loading behaviour in an SPA
Submitted by Accessabilly
This idea is currently being discussed.
In a Single Page App (SPA) we only load content via XHR in the background, while we have to do a lot of trickery to make sure, e..g screen reader users are informed of a the new page beeing loaded, when loading is ready and the new pages title.
If I click on a link in a regular website, the browser starts to indicate the loading procedure visually and semantically to the users. For example: NVDA then reads "busy" when loading, then the page title, while a sighted user can see a loading indicator in the tab (depending on what browser you use).
I want to create the same user experience for all users when a website's content is loaded, regardless if I'm loading a regular HTML file or just fetching data via XHR.
But there is a big difference in the user experience compared to a regular page refresh (e.g. loading a HTML file) for all users:
- There is no indicator, that the browser is loading a new site (new content) from the point, when a user clicks a link. Not visually and not semantically, like a spinning animation or a something that makes assistive technology indicate, that the browser is "busy".
- The expected loading time is not indicated, like visually via a progress bar or semantically via written percentage of loaded data.