Recommendations for Single Page Applications

  • Web
  • Advanced

A single-page web application (SPA) is a web application in which page refresh never occurs. During navigation, only portions of the page are dynamically updated using JavaScript code.

SPAs have met with enthusiasm since the advent of JavaScript frameworks: Angular, React or Vue to name only the most popular. In this article, the idea is not to take sides for or against PPS. It must be recognized that used correctly, this type of framework can solve problems, especially when it is used in the design of large web applications. We will focus here on the difficulties that this can bring in terms of accessibility.

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.

It will therefore be necessary to update the title of the page via Javascript (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 <h1> tag is not focusable. To allow it to receive focus via Javascript, you must add a 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 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.

It is therefore important to make sure to move the focus via Javascript when necessary. Likewise if a modal dialog box is displayed on the screen, the focus must be positioned in the box when it appears and then replaced on the original element (a button for example) when it disappears.

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 aria-label or aria-labelledby attribute.


<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.

The solution is to manipulate the browser history in Javascript using the History API. This allows you to store the different states of the application and return to them using the previous and next buttons of the browser.

Summary of good practices

  • Update the page title (document.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)