Html Question posted in
Some basic documentation can be found here.

Html – Exclude button aria label from reading out loud in aria live regions

In our Frontend we’re displaying toast notifications to the user in order to inform about status updates like tasks finished successfully or error notifications due to failed fetch operations.

Each notification is based on the following structure:

<div class="toast-notifiaction" role="status">
  <div class="toast-notification__title">Information</div>
  <button aria-label="close">
    <!-- contains a close icon as inline svg -->
  </button>
  <div class="toast-notification__text">Lorem ipsum dolor</div>
</div>

The idea behind is a non-disruptive behaviour analogue to aria-live="polite". Unfortunately it’s not possible to exclude the close-button from being read out loud as well. The desired behavior would be reading out: "Information. Lorem ipsum dolor".

Is that possible without defining a non-visible div containing the desired text?

Tags:

2

Answers


  1. 0

    This is happening because the status role, as well as defaulting to aria-live="polite" which you want here, also defaults to aria-atomic="true", which it sounds like you don’t. (You can read more about what this property does here)

    You should get the behaviour that you want if you explicitly set aria-atomic="false" on your live region to override the default.

    Login or Signup to reply.
  2. 0

    You can’t have your close buton be normally read when navigating with tab or arrow keys, and don’t have it read automatically if it’s inside a live region.
    That’s a contradiction.

    You may hide the close button with aria-hidden=true, but in this case, it won’t be read when navigating with tab or arrow keys either. This would be a very bad thing to do, since it would prevent screen reader users, voice control users and some others from reaching the button and thus closing the pop-up.

    Not being able to close might be acceptable if it is automatically closed after a few seconds anyway, but in this case you are potentially creating other accessibility issues: partially sighted users or users with dyslexia unable to read the info entirely before it’s closed, screen reader possibly cutting the message in the middle, etc.
    So it’s definitely not the right path to go into.

    In fact, the only true solution is to rearrange your code to put the button outside the live region. For example:

    <div class="toast-notifiaction">
  <button aria-label="close">
    <!-- contains a close icon as inline svg -->
  </button>
  <div role="status">
    <div class="toast-notification__title">Information</div>
    <div class="toast-notification__text">Lorem ipsum dolor</div>
  </div>
</div>

    This shouldn’t be a big deal to adapt your CSS in consequence.

    Or otherwise you have to live with it.
    Given that screen readers reading "OK" or "Close" in a pop-up of that type isn’t so uncommon, it’s, afterall, not a so big deal, if you really can’t rearrange your code. It’s still a lot better than not having any live region and totally missing the message.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search