Title for single page applications

SPAs (Single Page Applications) are loaded in the browser once. For assistive technology like screen readers this means that the title of the page will only be announced once. If you don't do anything extras in your code, new content in an SPA will not be announced.

Conceptual plan of title in SPAs

  • Any content change should change the title.
  • Titles should be unique and they say something about the shown content.
  • The changed title should be announced prior to the newly shown content.
  • You can not use a live region in the <head>, so you create one in the <body>.
  • Now change the title in 2 places; in the head so the right text is shown in the browser tab and in the live region so the title will be announced to the user via the screen reader.

Limitations

Don't try to imitate a browser or screenreader. Every browser-screen reader combination will do announcements in their own way. And don't forget that the language settings of the operating system might differ from the language of the page.

Just some thoughts of SPAs

One of the reasons to use SPAs to create a faster experience to the user. I have seen SPAs with rotating waiting spinners. Also the rotating spinner needs extras to support accessible. This and the title and more are things which you get from the browser for free. So always take that in consideration when you decide to put multiple pages in a single page.