Accessible page titles in a Single Page App

Published 2018-07-19 accessibility
by Hidde de Vries

According to WCAG 2.4.2 pages should have titles. How to go about this in a single page world?

What are titles for?

Pages have titles so that people can recognise where they are. They are like a plaquette on a meeting room door, signposts that mark the platform in a train station or the signage for a supermarket aisle. They help people figure out where they are.

Additionally, page titles also signify uniquely what’s on a URL. This is helpful for search engines, they display the title. Or for social media platforms, they display it when you share a link. People using screenreaders hear the title, it lets them figure out what a page is when they land on it.

Titling pages, the traditional way

In a site with multiple pages, you can put different content in the <title> element for each different page. This is trivial if you build each page separately, it is a little more work when the value comes out of a CMS, but still fairly straightforward.

Titling pages in Single Page Apps

In a Single Page App (SPA), the user never leaves the page. There is no new page with a new title. Instead, you’ll have to update this manually by changing the value or document.title , which is where the page title is in the DOM.

Changing pages in SPAs is often done with routers like react-router and vue-router . I was surprised to see that, by default, those two only update content and the URL, not the document title.

You can update the page title manually, though. In React, you can do it in the componentDidMount() of a route, and there is a react-document-title package that does it for you. If you want to update more meta info than just the title, there is React Helmet.

In Vue, I had luck doing it in beforeEach of the router:

router.beforeEach((to, from, next) => {
  document.title = `${to.name} - Your site`;
  next();
});

But if you’d like to abstract this further and update the page’s title along with other things in the head of your document, there is Vue Helmet or Vue Meta.

(Update 2 June 2020) In Svelte, you can set page titles using the special <svelte:head> element in the components that you use as a route, like so:

<!-- MyPage.svelte -->
<svelte:head>
  <title>Page Title goes here</title>
</svelte:head>

Announcing titles

In screenreaders, when a user goes to a new page, it will read out the title of that page. In a Single Page App world, you can update the title with document.title , but, sadly, that change does not trigger a screenreader announcement. It is helpful to do this manually, for example by putting content into a live region (the on demand live region abstracts this).

There are different strategies as to what to read out on a route. In an SPA, you could choose to set focus to the top of the document when you do a route, this would make it feel like a multi page application. Users would have to use skip links to get back to the content, just like in multi page applications. But maybe you only update one section, and your strategy is to move focus to the new content. In this case, you could ensure the title of whatever is new is read out, rather than the updated page title. For example, if you replace the main by something new and then focus the new content, convey to assistive technologies what the title of the newly focused content is, for example by having its first heading announced.

Does this mean the title is irrelevant in SPAs? Not really, it is still useful to have an up to date title , for example for people switch between tabs or when you turn on Server Side Rendering.

TL;DR

Giving pages unique titles aids accessibility and is compulsory if you are after WCAG 2 AA compliance. If you build a single page app, update the title manually, but also look at having something useful announced when new content is inserted. It could make more sense for this to be a section title than the document’s title, depending on what you’re building.

Thanks Job, Almero and Marco for answering questions and giving early feedback.

Update 2 June 2020: added info for Svelte

Comments, likes & shares (1)

lumpi wrote on 10 February 2023:

posted on

Most frequently it appears to be like love accessibility specialists and diversified web professionals hate JavaScript. This is in a position to perchance perchance be correct for some, however most take into accout that JavaScript might perchance be handy for bettering UX and even accessibility. JavaScript solutions are on the total more accessible than their pure HTML or CSS counterparts.

We know JavaScript is no longer an enemy, however, admittedly, there might perchance be a undeniable reluctance towards constructing client-side rendered websites by some builders. These of us are on the total disregarded as the “feeble guard” thanks to their reputedly irrational aversion towards common web pattern. Whenever you don’t understand where right here is coming from, it might perchance perchance seem incomprehensible why somebody would no longer are looking to blueprint single page applications (SPA), however breeze for the customary device of constructing websites, most frequently known as multi page applications (MPA), as but any other.

There used to be a range of criticism about SPAs and in particular React recently. On a non-public stage, I can fully take into accout that. I don’t love Meta and their trade mannequin; I don’t love how React realizing leaders sold their library as something that it’s no longer, and I don’t love the bro custom that sparked from this total ingredient. On a legit stage, I take into accout that there are of us for whom React is nothing better than a instrument or a .js file. Of us that, you understand,…simply blueprint websites for a residing. Despite the truth that I’m no longer jubilant about it, I moreover take into accout that JS libraries and frameworks are on the total the entry demonstrate web pattern for unusual web builders. Nonetheless, there might perchance be moreover legit and serious legit criticism. With this post I’m no longer attempting to convince somebody to blueprint their websites otherwise, I simply are looking to fragment my realizing and my experiences as somebody who has been constructing websites for over 20 years, and I are trying to summarize the clarification why some builders, including me, are cautious of constructing SPAs. Sooner than I provide you some examples, let me boom one vital ingredient: I do know that it’s that that you just might perchance perchance consider to blueprint accessible single page applications and I do know that there are of us that work with JS frameworks (because they are looking to or resolve on to), and optimise the shit out of their websites because they care about their customers.

Many of the scepticism comes from the truth that some excessive capabilities of a online page work fundamentally diversified in single page applications.

Routing

Within the occasion you blueprint 3 HTML documents, let’s call them residence.html, about.html, and dashboard.html, and likewise you link them, clicking a link the following occurs: The browser navigates to the unusual page, the page loads, the title of the page modifications in the browser’s tab, focal point is on the physique, and, if you happen to’re the exercise of a display reader, the instrument proclaims the title of the page. For sure, a ways more occurs. Here’s a simplified and incomplete depiction of the project, however the vital bit is that irrespective of how you’re having access to and activating the link (mouse, display reader, contact, swap instrument, etc.), you understand what took issue, that something took issue, and where that you just might perchance perchance be. The loading project and the transition from one page to 1 other tell you that you just’ve navigated to a unusual page. Point of curiosity is first and predominant of the DOM, where that you just might perchance count on it, and your display reader proclaims the title of the page robotically.

When I click on a link, NVDA, the display reader I am the exercise of, proclaims the title of the page, as an instance “Dashboard – My Web predicament”.

In a Single Web page Utility, you blueprint handiest one HTML file and likewise you replace the principle train of the page when the user clicks a link. To assign that, that you just might perchance perchance resolve on to make exercise of a routing library love React Router. When put next to the technique of native routing I’ve described earlier, the following occurs: DOM train modifications, focal point is silent on the link, the title in the browser tab doesn’t swap, and a display reader proclaims nothing. Whenever you’re lucky, you understand what took issue, that something took issue, and where that you just might perchance perchance be. Whenever you’re a blind display reader user, you’ll perchance safe no feedback in any admire.

When I click on a link, NVDA proclaims nothing.

While no longer deliberately, single page applications, on the very least in phrases of page navigation, are inaccessible by assign. The creators of attain router did their finest to produce routing accessible by managing focal point, however since records loading and focal point administration on route transitions are coupled, it used to be too refined to produce it precisely. No topic all their efforts, routing grew to change into entirely inaccessible once more, when attain router and react router merged and so that they stopped doing no longer-dependable-enough focal point administration by default.

Custom routing and focal point administration accomplished dependable can in fact work even better than the native behaviour without JavaScript, however it wishes to be constructed manually. You don’t see that in many SPAs unfortunately. I’d moderately support customers with the no longer so broad, however fixed default ride than no ride in any admire.
Anyway, there’s loads we are in a position to learn from SPAs and from of us with accessbility in tips working with them. There’s implausible look at about that topic by Marcy Sutton (“What we realized from user attempting out of accessible client-side routing tactics with Legend Tech Labs”).

Stamp: Within the old demo I used to be the exercise of “Make React App”, one among the beneficial toolchains and the traditional example in React Router. I can consider that there are frameworks that toughen accessible routing by default.

The file title

The of the page is one among the largest parts in a HTML file. Users take advantage of a well-fashioned and descriptive page title in many ways.

To mitigate inaccessible routing and the missing feedback after clicking a link, display reader customers relieve themselves by pressing shortcuts that impart the title of the page. The page title tells them on which page they are. So even supposing there’s no feedback, they know they’re on a unusual page when the title has changed. If the title has changed! In a SPA, you on the total resolve on to implement title administration manually. Again, right here is something that simply works in native routing.

Veil reader shortcuts for announcing the page title Veil Reader Recount Announcement NVDA Ins + T Web page title JAWS Ins + T Web page title Say Over on macOS VO + Shift + I Web page summary, including page title Say Over on macOS VO + F2 Web page title

There are more causes you’d are looking to swap the page title. It serves as the price for bookmarked pages/favorites, and search engines like google exercise the title of their search outcomes pages. Social media sites, chat or mail applications, and the same instrument exercise the title in link previews when no diversified title is specified.

Sooner than you starting up sending me hyperlinks: I do know that or no longer it is that that you just might perchance perchance consider, I’ve accomplished my look at. My point is, that or no longer it is but one other ingredient or no longer it might perchance perchance be wanted to reimplement manually.

DOM modifications

DOM modifications are no longer particular to SPAs, however to the exercise of JavaScript on the total. The ingredient is that reactive DOM modifications are on the very core of single page applications. For every critical swap you produce, or no longer it might perchance perchance be wanted to be in contact that swap no longer simply visually, however moreover semantically. Dwell areas, ARIA attributes, or focal point administration can relieve with that. You won’t win any details about are residing areas or the exercise of focal point() for announcing DOM modifications in the superior React accessibility doctors, the Vue accessibility doctors, or the Angular doctors.
The more JavaScript we add to our page, the more fragile our interface will get and the more we resolve on to retain a watch on and be in contact manually, if we’re looking to blueprint equal experiences for all.

JSX

JSX kinda appears to be like love HTML, however it’s no longer in fact HTML since it’s a mix of HTML with ingredient tags and made-up attributes (I’m talking about you className). I do know that React doesn’t require the exercise of JSX, however many unusual devs learn React and JSX first (and handiest), because boot camps and indoctrinated communities tell them or no longer it is the most handy dependable device to blueprint websites and so that they resolve on to know React in expose to safe a job. This abstraction might perchance be frightful if you happen to don’t understand the adaptation between the dependable customary (HTML) and the abstraction layer. We’re already in fact putrid at writing native HTML and a language that obfuscates the customary language doesn’t produce issues better.

<li className="item">
{isPacked ? (
<del>
{name + ' ✔'}
</del>
) :  (
    name
)}
</li>

Sooner than we win to work with any language that’s no longer native HTML, however compiles to HTML, we might perchance silent learn HTML first. This doesn’t simply apply to JSX, however Markdown, Pug, NunJucks, etc. Our input will be critically better if we know how the output might perchance silent gawk love.

The page context

In SPAs, you blueprint parts. A ingredient might perchance be share of 1 other ingredient, and one other ingredient till it will definitely ends up in the wrapper

of your index.html. Whenever you gawk on the final file of most SPAs, the page doesn’t gawk love a coherent entity, however more love a dump for parts that happen to blueprint a page visually. As already mentioned, HTML is a cornerstone of any accessible online page and the page constructing (a sound heading account for, landmarks, DOM expose, semantic HTML on the total) performs a wanted role.

Don’t safe me inferior, I moreover blueprint parts which shall be share of a system, however I moreover exercise a appropriate amount of time crafting pages that work well. The truth that the HTML file is something that you just barely contact, because every little thing you will need in there will be injected by JavaScript, places the file and the page constructing out of focal point.
I don’t counsel that a ingredient-primarily based fully intention is inferior, no longer even one which is written in a JavaScript environment, rather the opposite, however simply since it’s more handy and efficient to work with a JS framework, doesn’t indicate that we resolve on to support all that JavaScript to the client. The archaic device of serving websites fully on the client is old-common, however I moreover don’t consider that ideas love hydration are critically better.
It’s price exploring approaches that separate concerns and strive and decrease the amount of JS shipped. Some significant tasks are Lit, Astro, Svelte, or WebC.

Efficiency

Most SPAs potentially create well on my 3,500 Euro pc pc and my 500 Euro smartphone, however a Macbook Expert and Huawai P30 are no longer essentially the well-liked instrument the well-liked user makes exercise of to entry the online. I’m no longer in the issue to focus on the performance implications of client-predicament rendering and in particular React, however there has been a range of criticism early on because SPAs simply don’t create as well to realizing leaders at Meta or Vercel feeble to produce you think.

I counsel you read the following articles:

Complexity

Developing a SPA from scratch is no longer straightforward, it involves many tiring steps. Although you happen to make exercise of 1 among the boilerplate setups, you’re handling a compound dependency monster that simply waits to spoil your day because one tiny ingredient doesn’t figure out of the box the vogue you resolve on it. There’s so powerful complexity in this stuff that it makes some of us doubt whether or no longer it’s price the effort and if it’s no longer perchance smarter to exercise the time engaged on something else, something that in fact advantages customers.

I state the most racy criticism right here is that it feels love of us that consider in the superiority of single page applications and your total ecosystem focal point more on developer ride (DX) than user ride. That sounds love a unhealthy blanket commentary, however finally these years, I never had the sensation that the argument “better DX outcomes in better UX” used to be ever correct. It’s nothing better than a justification for the broad complexity and doubtlessly vastly worse UX. And even supposing the core argument is no longer DX, diversified arguments love scalability, maintainability, aggressive skill, less difficult recruiting (“everybody makes exercise of React”), and price effectiveness, in my ride, handiest sound correct, however rarely ever ever extend to their guarantees.

I am hoping this didn’t come off as a rant, it’s no longer. I’m simply attempting to point why SPAs are no longer the foremost choice or no choice at inquisitive about some of us. I’m overjoyed that this various landscape of instruments exists because we are in a position to learn from innovation and exercise this files to blueprint better experiences. I’ve labored with several JS libraries and frameworks, since it would pay the funds, however I’ve never feeble one for my maintain tasks and I’ve never consulted a client to produce so, and I potentially never will. The straightforward reason is that I blueprint websites more on the total than no longer, and no longer complex applications. There is a issue and time for JS frameworks and client side rendering, however it’s on the total no longer the qualified choice for an identical old online page.

Read More