Summary | Résumé

The current strategy for handling dynamic content in a form has been to use a parent live-region. While this technically works it makes dynamic updates for AT very verbose resulting in bad UX. For example, when a large show-hide block is shown, all the content is announced. Or if a dropdown is dynamically populated with a large list, the entire list is read out on load.

The proposed solution is to handle each type (component) of dynamic update on a case by case basis. For example, if some text is dynamically added to the form, like an inline success message, use a live-region. If a block of code is shown, use the disclosure pattern. And so on.

How each case was handled

• Show-Hide: Use the disclosure pattern e.g. us.gov site "here's how you know?".
  • Quirks/Questions? Announces toggle update in Jaws/NVDA but not VoiceOver (file bug? send them another email?). May fail WCAG but the accessibility community has argued for this pattern adrianroselli, smhigley,...
• Repeating Sets: useLiveMessage to announce "{setTitle} {count} has been added" or similar.
  • Quirks/Questions? Should the removal of a Repeating Set be announced? (leaning to no)
• Dynamic Text: add a live-region to the parent static container. e.g. (TODO)
  • Quirks/Questions? parent container should be in DOM on or close to render or at least in the DOM for a 0.5+~ seconds
• TODO...