title: How to make screen readers announce when a new page is loaded in Angular or any single page apps?
body: <p>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.</p>
  <p>I have tried many things.</p>
  <p>For instance, I have added a span element with role=&quot;alert&quot; and/or aria-live=&quot;polite&quot; 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.</p>
  <p>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.</p>
  <p>But I want to know if there is a better approach for this.</p>
  <p>I also tried using [attr.aria-label] property binding to a variable in ts file.</p>
  <pre><code>&lt;div [attr.aria-label]=&quot;title&quot; role=&quot;alert&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>And changing the title variable with the message that I want to announce. But screen reader will detect this div element always while scrolling.</p>
  <p>Please help.</p>