0

I have a web app with Single Page architecture so the <title> is updated programatically as the user navigates between client side rendered pages.

This works fine when the app is already opened. When <title> is changed, Narrator announces it.

When reloading the browser or opening a new tab however, Narrator will announce the fallback <title> in index.html. The proper title is not applied until the content is loaded from the server so that a <title> can be generated from it.

I tried applying aria-busy="true" to the <html> tag, but that does not stop Narrator from accouncing the title early. I also tried leaving the <title> empty in index.html, but then Narrator will just announce "document".

5
  • Yes, it is possible, just tie the hooks closely , and you can also use setTimeout or requestAnimationFrame to defer the title update until after the initial load process is more settled, but implementation questions are off topic for this website, you may want to ask this question in stackoverflow . As for a more UX-y approach, this won't replace the title, but will help complement it from an accessibility point of view <div aria-live="polite" aria-atomic="true" style="position: absolute; left: -9999px;">Page now showing: [Dynamic Title]</div>
    – Devin
    Commented May 8 at 14:25
  • 1
    The question is, won't this worsen the UX?
    – jazZRo
    Commented May 8 at 14:27
  • In this case the first page load would announce "[my app] has finished loading] followed by the polite message. Ideally I want to delay the announcement of the document title until I have enhanced it with something relevant to the data on the screen. Commented May 9 at 16:44
  • 1
    When people navigate through their browser tabs, they rely on the page title to know which tab it is. A delay (if possible) will only disrupt their usual usage routine and create confusion.
    – jazZRo
    Commented May 10 at 7:13
  • A good practice in SPAs is to set focus on the <h1> after contents of the page change. In doing so, the title will get announced and users will be reassured that the right content loaded.
    – Andy
    Commented May 29 at 12:49

1 Answer 1

1

It’s great that you are providing a specific title for your web app, it’s often overlooked, and important to all users to identify the many tabs they open when browsing.

No, it’s not possible to make the screen reader wait before announcing the title of a newly opened tab. The opening needs to be announced immediately, as it’s a reaction to user feedback.

You should probably make sure it’s named something like

Loading… - My amazing web app

and than change to whatever the loaded contents are. As you say, the change will be announced.

1
  • I suspected that it was not possible. Thanks for confirming. Commented Jun 1 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.