TIL Accessibility changes and dynamic content

POSTED ON: Dec 31, 2021

TAGS: accessibility

Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.

If you want the screen reader to re-read things if it changes, use the aria-live attribute.

<div aria-live="assertive">Waiting for a ride</div>

You can pass in:

assertive - will interrupt whatever it's doing to announce.
polite - will announce the live region update when it next idles.
off - will not read the update.

NOTE: Assistive technologies will announce dynamic changes in the content of a live region. Including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using JavaScript.

Via:
MDN Aria Live

Related TILs

Tagged: accessibility

• Next: TIL Layers in CSSCSS goes through a lot of passes to determine style orders. Make the css more specific, and it takes priority. Add a '#', and it takes even more priority. Add a freakin' '!important;', and hurray, you're at the top.
• Previous: TIL doing a reverse-search history in bashYour bash history is saved with up/down arrow keys. Which means you shouldn't save your passwords on it. But you can use Ctrl+R to open up a search prompt.