CODEWITHSUNDEEP
htmlaccessibilityvoiceoverjaws-screen-readernvda
satheesh
satheesh

Reputation: 423

How to avoid screen reader reading label change while focusing the element?

When the user focus the element using tab, screen reader should read the aria-label or aria-describedby content. If user triggers any action from the same element then the content for aria-describedby will change, but the screen reader should not read the changed content. This content should be read by the screen reader only when focus enters the element next time. Is there any method or way to achieve this?

Upvotes: 1

Views: 1113

Answers (1)

Boommeister
Boommeister

Reputation: 2107

You can use onblur to check if your element has lost focus. Then change the aria-label. When the user comes back they will then get the aria-label read out to them.

I'd do something like this:

<element id="myElement" onblur="changeAriaLabel" arai-label="old-label">

in JS:

changeAriaLabel(event) {
  if (userHasTriggeredAnActionAndTheLabelShouldChange) {
    const myElement = document.querySelector('#myElement'); // you can also get the element from the event, that's probably conidered cleaner code 
    myElement.ariaLabel = 'newLabel' // don't know exactly how to change the aria-label, but I think you know that already
  } else {
    console.log('nothing to change');
  }
}

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/blur

Upvotes: 2

Related Questions