2

I've inherited a project that uses a lot of click-triggered JS to change page content instead of linking to different actual HTML pages. I'm being asked to make JAWS read the page title when this happens, as if a new page is being loaded.

From my observations and a bit of light testing, reading the page title (meaning the contents of the <title> tag) is standard behavior for JAWS when linking to a new, separate page (as in a foo.html file), but not what happens when a same-page link or button is clicked.

How can I cause JAWS to read a page's title after a link or button is clicked that changes the existing page's content in a way that seems like a new page to the user but is actually the same file under the hood?

For this question, please assume that refactoring what I have to use an actual new page instead of JS content replacement is not an option. And if something is wrong with my initial assumptions, please let me know that as well.

SOLO
  • 868
  • 9
  • 19

2 Answers2

3

It sounds like you have a single page app (SPA). You can't force the <title> element itself to be read but if you also put the same text into an aria-live="polite" container (a visually hidden <div> or <span> (*)), it'll be read.

You still want to update the title, even if it's not read, because the screen reader user can use a shortcut key (INS+T with jaws) to read the page title. And when the user switches between the browser and another app and then back again, they'll hear the title, so it's still important to update the title.

There are some decent blogs regarding accessible SPAs:

(*) Note, when visually hiding the aria-live region, don't use CSS display:none because that'll hide it from the screen reader too. Use a sr-only type class. See What is sr-only in Bootstrap 3?

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Just another instance of what should be out of the box / configurable screen reader behaviour falling into the laps of web developers to implement ugly code-polluting workarounds. – Drazen Bjelovuk May 19 '21 at 19:55
0

There's good info in slugolicious's answer. The specific issue has a simpler solution, though: <title> elements can be ARIA-ified.

<title role="banner" aria-live="polite">Default title here</title>

in conjunction with

$(function() {
    // existing logic here

    $(title).html("New title here");
});

being called when the new content loads.

SOLO
  • 868
  • 9
  • 19