I want to accessibly trigger a browsers loading behaviour in an SPA

[aarongustafson]

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.

With modern JavaScript techniques, we have the opportunity to load the site's foundation (HTML, CSS, JS) just once and perform page refreshes as we only fetch the changing data via XHR and generate the changed site out of it in the browser (separation of concerns). Visually it is possible to create the feeling, that a site is loaded by changing the URL in the address bar, changing the document's title, changing the site's content and look.

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.
• The documents title can be changed via JavaScript, but there is no way to programmatically transfer this change to assistive technology at the time when loading the data is ready and it can start reading the "new" page from top to bottom again.

I want to have a browser API, that helps triggering all this "loading behaviour" via JavaScript and enables me to offer all the users the known native behaviour of their browser while loading a HTML file, even if they just load JSON via XHR.

---

https://webwewant.fyi/wants/eee2975120694e9a9466b86c27d63682/

[aarongustafson]

Follow up clarifications:

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.

With modern JavaScript techniques, we have the opportunity to load the site's foundation (HTML, CSS, JS) just once and perform page refreshes as we only fetch the changing data via XHR and generate the changed site out of it in the browser (separation of concerns). Visually it is possible to create the feeling, that a site is loaded by changing the URL in the address bar, changing the document's title, changing the site's content and look.

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.
• The documents title can be changed via JavaScript, but there is no way to programmatically transfer this change to assistive technology at the time when loading the data is ready and it can start reading the "new" page from top to bottom again.

I want to have a browser API, that helps triggering all this "loading behaviour" via JavaScript and enables me to offer all the users the known native behaviour of their browser while loading a HTML file, even if they just load JSON via XHR.

[carmacleod]

See also: w3c/aria#1353