CODEWITHSUNDEEP
javascripthtmlangularwai-ariascreen-readers
Mohammed Shirhaan
Mohammed Shirhaan

Reputation: 553

How to make screen readers announce when a new page is loaded in Angular or any single page apps?

I have been looking everywhere for an optimal solution to this problem but I am not finding any good solution. I want screen readers like NVDA or JAWS to announce the new page on load. But it should not detect this message while scrolling the page using arrows keys.

I have tried many things.

For instance, I have added a span element with role="alert" and/or aria-live="polite" and hidden it using CSS and dynamically added innerHtml to the element for screen reader to announce. But the screen reader will detect it while scrolling through the page using arrow keys and read the message again. So set a timeout function that will set the innerHtml to empty after 2 seconds.

The above thing works fine in some of the browsers but in IE browser and JAWS it reads the alert twice as I change the innerHtml two times. Works fine with NVDA.

But I want to know if there is a better approach for this.

I also tried using [attr.aria-label] property binding to a variable in ts file.

<div [attr.aria-label]="title" role="alert"></div>

And changing the title variable with the message that I want to announce. But screen reader will detect this div element always while scrolling.

Please help.

Upvotes: 0

Views: 3033

Answers (1)

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1384

There is a 'Title' Service being provided by angular which you can make use of.

This will basically set the title to the whole page in the browser tab which makes the screenreader, read out the title aloud when a new page is loaded.

import { Title } from '@angular/platform-browser';

constructor(private title: Title){}

ngOnInit() {
  this.title.setTitle('Your Title for the page');
}

Note: Nothing is needed in the HTML Template. Just have this done and it will solve your issue.

Each component will have it's own meaningful title. Not like page1, page2, etc, but something like, customer details page, customer profile page, etc

Upvotes: 1

Related Questions