Recommendations for Single Page ApplicationsAssociated themes :
Warning: SPAs should never become the norm. If your need can be met with the help of a standard site you don't need to succumb to the hype. A standard website natively offers accessibility support and spares you the need to get started with a complex framework, skills training, maintenance or compatibility problems with old browsers.
Update page title #
Browsing through an SPA does not cause the browser to reload the page. However, it is important that each page has a unique title.
document.title). Refer to the documentation of the framework used to know if an implementation of this mechanism is proposed or if it must be created from scratch.
Notify user of page changes #
Screen readers used by visually impaired people inform the user automatically when a new page is loaded by the browser. In the context of an SPA, page changes do not lead to reloading by the browser. The screen reader therefore has no way of warning the user.
An acceptable solution is to move the focus to the first heading
<h1> of the current page. This will cause it to be read by the screen reader, so the user will be warned that a new page is displayed.
Note that by default an
tabindex="-1" attribute to it.
Notify the user of updates inside the page #
If the information is dynamically updated in the page (confirmation message, loading in progress, error display, etc.). It is important to have screen readers announce these changes. Several methods are available depending on the case:
- Move the focus to an element that has just been updated.
- Use ARIA as indicated in the following articles: Use ARIA status, status or contextual messages and The aria-live attribute and the role alert.
Move focus #
On a classic website, when a user clicks on a link and a new page is displayed, the focus is automatically repositioned at the top of the page (on the
body). So for users who navigate using the keyboard, just use the
TAB key to move around the page.
In a SPA, if a user clicks on a button that causes a content update, the focus is not moved (it remains on the button). More importantly, if the page change made the element that was in focus disappear, the user will no longer know where he is on the page. It can also cause vocalization issues for people who navigate using a screen reader.
Use HTML 5 semantics #
SPA are often used in web applications. The user sometimes has to deal with an interface that looks more like a native application than that of a website. It is important to ensure that the different areas are correctly identified: navigation, content, search area, etc.
If your application has specific areas, it is recommended to assign them a
label so that they are quickly identifiable. For example using a
<region> tag and an
<div role="region" aria-label="activity monitor"> <!-- region content --> </div>
<div role="region" aria-label="cost simulator"> <!-- region content --> </div>
See the article: ARIA regions or landmarks, to get more information on the use of these tags.
Manage browser history #
Nothing could be more annoying than exiting an application when you simply wanted to go back to the previous page using the browser's
previous button. However, this is what sometimes happens in SPA.
next buttons of the browser.
Summary of good practices
- Update the page title (
- Notify the user of page changes
- Notify the user of updates inside the page (ARIA)
- Move focus
- Use HTML 5 semantics
- Manage browser history (History API)