Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Try it with NVDA and either FireFox or Chrome - it reads everything in the box with each update rather than the last item added.
I have always believed it is nearly always better to simply replace the text in the live region? mainly due to poor support of aria-relevant or am I wrong (always happy to learn something new!)?
Director, Software Engineer - Mobile Accessibility. I am a major JS Framework, Automation and Mobile #a11y advocate. Just livin the dream! #a11y #accessibility
Location
United States
Education
Illinois State University
Work
Director, Software Engineer - Mobile Accessibility At Fidelity Investments
Great question. If you notice in the component there is setText() and clearText() anytime this component is called, or the props are added it will clear the live region that is added to the page, and then add it. So it doesn't actually append it is completely removing it from the live region and replacing it, which does work.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Doh 🤦♂️! How did I miss the clearText bit...I am going to blame reading it on a mobile over my inability to read code....it would be a lie but it makes me look less stupid 😜😂😂
Glad to know I am not doing it wrong though! Did you look at the page I linked (which I am now going to read to check it doesn’t have a disclaimer saying “support is patchy for this implementation” seeing as I am not doing well reading things properly!)
Once again great article and thanks for pointing out my goof! ❤️
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great article and I am always a fan of anybody trying to drill accessibility into people 😁😂.
Have a ❤🦄 and a follow!
Quick question though - in your second example are you not appending messages to the live region instead of replacing the content?
This will cause some screen readers to repeat the previous text as well as the new text.
You have the same issue on your example page at Deque I just noticed:
dequeuniversity.com/library/aria/l...
Try it with NVDA and either FireFox or Chrome - it reads everything in the box with each update rather than the last item added.
I have always believed it is nearly always better to simply replace the text in the live region? mainly due to poor support of aria-relevant or am I wrong (always happy to learn something new!)?
Hey There!
Great question. If you notice in the component there is setText() and clearText() anytime this component is called, or the props are added it will clear the live region that is added to the page, and then add it. So it doesn't actually append it is completely removing it from the live region and replacing it, which does work.
Doh 🤦♂️! How did I miss the
clearTextbit...I am going to blame reading it on a mobile over my inability to read code....it would be a lie but it makes me look less stupid 😜😂😂Glad to know I am not doing it wrong though! Did you look at the page I linked (which I am now going to read to check it doesn’t have a disclaimer saying “support is patchy for this implementation” seeing as I am not doing well reading things properly!)
Once again great article and thanks for pointing out my goof! ❤️