1

I am trying to fix an accessibility bug for screen reader in an Angular2 web application. In Chrome, when componentA(code under Before) gets loaded, the focus is the whole browser window and screen reader narrator announces the title of the componentA's page. However, in Edge, the focus stays the same as previous page which results in the title is not announced. The goal is no matter in which browser, the title should be announced once and only once.

I tried the solution by modifying componentA.html (code under After) and set focus to componentA-id in ngOnInit(). i.e.:

document.getElementById('componentA-id').focus();

Now in Edge, the narrator can correctly foucus on the whole componentA and announce the title of componentA. However in Chrome, the whole window is focused and the componentA is also focused, which results in the title is annouced twice. Is there any way I can disable the Chrome focus or is there any other ways to solve this problem to achive my goal?

Before: componentA.html 

<div>
    <div title="ComponentA Title" role="banner">ComponentA Title</div>        
    ...
    ...
</div>

After: componentA.html 

<div aria-label="ComponentA Title" id="componentA-id" tabindex="-1">
    <div title="ComponentA Title">ComponentA Title</div>        
    ...
    ...
</div>
bunny
  • 1,797
  • 8
  • 29
  • 58

1 Answers1

1

Do you have a single page app? You said:

"...the focus stays the same as previous page"

which makes me think you're loading new content into the current page, such as a single page app.

If you are updating the page title (which is a good thing to do for screen readers for single page apps), the new page title will not necessarily be announced because the screen reader doesn't know you updated some of the contents of the page. If the page were reloaded, the title would be read.

To get the page title read, you'd need to update an element that has aria-live set to "polite". The element can be visually hidden so that only screen readers know about it.

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

(See What is sr-only in Bootstrap 3? for info on the "sr-only" class)

When you update your page, insert the page title text into the <div> so it looks like:

<div class="sr-only" aria-live="polite">ComponentA Title</div>

The screen reader will read the new text and you won't have to move your focus to it.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Thanks very much! I have tried aria-live="polite" and it works well. However, I am still confused the usage of class="sr-only". According to the article mentioned, this class is used to hide the element. If I do want the
    with title inside and display the title, why would I hide it?
     – bunny Dec 28 '18 at 05:25
  • My example was if the page title () were being updated and you wanted it read by a screen reader, you'd have to have a hidden <div> (sr-only) that you update as well. However, if your "ComponentA Title" is visible text that you want everyone to see and hear, then you are correct that you wouldn't need "sr-only". You just need `aria-live`.</div> – slugolicious Dec 28 '18 at 17:54