javascripthtmlaccessibilitytitlejaws-screen-reader

Push JAWS to read updated title or text

I need to push JAWS screen reader to pronounce a new page title that gets updated in let's say 10 seconds. Unfortunately, the issue doesn't look that trivial.

It looks like setting title dynamically with javascript inside <head> is ignored by JAWS no matter of attributes.

The only possible way to push to pronounce the updated title I've found is to set the title text into a separate (hidden from eyes but not from JAWS) div inside body and set such attributes:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This is a default title</title>
</head>
<body>
<div>some page text</div>
<script>

    setTimeout(function(){ 
        let titleElement = document.head.querySelector('title');
        titleElement.setAttribute('aria-live', 'assertive');
        titleElement.setAttribute('role', 'banner');
            document.title='This new title wont be read by JAWS';
            
            
            document.getElementsByTagName('body')[0].innerHTML += '<div id="idChild2f5" class="sr-only" role="alert">This new text will be read by JAWS</div>';
        }, 10000
    );
</script>

</body>
</html>

However, in this case JAWS pronounces the word ALERT. Not good for title at all.

Any option so that JAWS pronounces only "This new text will be read by JAWS" without the word ALERT? aria-live assertive attributes didn't help, JAWS simply doesn't read it for me if the text is dynamic (10 seconds delay). P.S. sr-only Bootstrap class is used to hide the text from eyes.

Solution

  • A JAWS user can hear the page title by using the Ins+T shortcut key but that's not what you're asking about. And the user wouldn't know they need to hit that key unless they were told a new title was set, which is your main question. But I wanted to point out the key as FYI.

    You're on the right track. Changing the <title> is not going to be announced by default. It's not an HTML element that expects to be dynamic so you have to manually notify assistive technology that a change was made.

    (I mention "assistive technology" because JAWS is just one brand of screen reader and a screen reader is just one type of assistive technology. Some blind users use refreshable braille displays and won't have a screen reader. They should know about the <title> change as well. My comments below are generic enough for all assistive technology.)

    You'll need to use a "live region", which you were attempting to do but there are some things you need to know about live regions.

    1. There is spotty support for adding a live region dynamically, as you were doing in your example. Ideally, the live region should exist on the page at load time. It should be part of your DOM when the page is loaded. You can have an empty live region that you dynamically add text to later.
    2. You can create a live region either by using aria-live and setting the value to "polite" or "assertive" or you can use a role that provides an implicit live region such as alert, log, marquee, status, or timer.

    In your case, a simple aria-live="polite" is sufficient. That will solve your first problem by not announcing "alert" when the update is made.

    <div class="sr-only" aria-live="polite" id="newtitle">
</div>

    After you change your page title, you can insert text into the newtitle element and assistive technology will be notified. If you're using JAWS or NVDA or Voiceover, you'll hear the text announced. If you're using a refreshable braille device, the new text will appear on the braille device.

    I'm not sure if you want the live message to say "a new title has been set" so that the user knows to re-read the title of the page again (using the appropriate shortcut key for the screen reader) or if the text should be the actual text of the new title. That's up to you.

    <div class="sr-only" aria-live="polite" id="newtitle">
  A new page title has been set. Use your assistive technology to read the page title again.
</div>

    or

    <div class="sr-only" aria-live="polite" id="newtitle">
  New page title
</div>

    If your page title can be updated multiple times, then you'll also need aria-atomic="true".

    <div class="sr-only" aria-live="polite" aria-atomic="true" id="newtitle">
</div>

    Without aria-atomic, only the text that changed will be announced. So if you added "new page title" to the live region, it would be read just fine. But if you then change it to "another new page title", then only the word "another" would be announced because it's the only thing different from the previous change.

    With aria-atomic="true", all the text you insert will be read.