Search code examples
htmlaccessibility

Accessibility Links On A Web Page

I want to make my project as accessible as I could.

So, at the beginning of my HTML file, I add this code:

<!-- Accessibility Buttons And Links --> 
<ul>
<!-- Skip To Main Content Link -->
<li>
  <a class="c-accessibility-link" href="#main-content">
    skip to main content
  </a>
</li>

<!-- Element To Notify The User Of Updates On The Page -->
<li>
  <p class="js-assess-tech-msg u-sr-only"></p>
</li>
</ul>

Now, is it alright to have that p.js-assess-tech-msg which notifies users using screen readers of the updates on the page (e.g. a popup was opened, invalid input)?

I do that by adding the aria-live attribute and then inserting the text that I want the screen reader to say.

If not, how can I implement this feature?

Solution

  • It's perfectly all right, except that the aria-live attribute must be already present from the start, or otherwise said, directly at page load.

    The attribute aria-live is generally taken by the screen reader only when it is present at the time the element is added to the DOM. And even if the element is added after page load, you can't be 100% sure that it will be taken into account.

    Attribute aria-live is generally not recognized if you add it to an already existing element.

    The only 100% full proof method is to have your element with aria-live attribute directly at page load.

    However, the text to be spoken, must be added to the DOM after page load.

    The text present inside the aria-live element at page load is generally not threated specially by screen readers. It can normally be read when encountering it, but has great chances to be missed. IF you need to speak a message right after page load, you can do it after a short delay.

    In other words, at page load:

    <p id="X" aria-live="polite"></p>

    And then when you need to speak a message:

    document.getElementById('X') .innerHTML = 'XYZ';