[ARIA] Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies

When dynamic changes occur to content on a page they are usually visually apparent to users who can see the page but may not be made apparent to users of assistive technologies. ARIA live regions provide a way to make those dynamic content changes able to be announced by assistive technologies.

ARIA attributes

• aria-live: the priority with which updates are read
• aria-atomic: whether the screen reader should always present the live region as a whole, even if only part of the region changes
• aria-relevant - takes a list of what type of changes should be announced

Resources

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
• https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live
• https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-atomic
• https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-relevant
• http://html.cita.illinois.edu/nav/form/aria/index.php?example=3

<div
  id={errorId}
  className="invalid-feedback"
  aria-live="polite"
  aria-atomic="true"
  aria-relevant="additions text removals"
>
  {!isValid ? errorText : ''}
</div>