Problem/Motivation
The AJAX API has a feature to display a progress message, but it isn't conveyed to assisitive tech like screen readers.
'#ajax' => array(
'callback' => 'Drupal\config_translation\FormElement\DateFormat::ajaxSample',
'event' => 'keyup',
'progress' => array(
'type' => 'throbber',
'message' => t('Loading more products'),
),
),Proposed resolution
Find a way to convey the progress message to
Possibilities (use one approach only, not both):
- Mark the visible AJAX message as an ARIA-live region (preferred?), or
- Duplicate the visible message using a Drupal.announce() call.
Other possibilities might be to provide incrementally updated messages, like "Updating... 30%... 80%... finished".
Remaining tasks
tbd.
User interface changes
No visual changes. Format the AJAX message so it is conveyed to assistive technology, e.g. so screen readers can announce it.
API changes
TBD. Maybe we always treat the message as an aria-live region, or maybe we make it an additional option.
Data model changes
TBD.
Background reading
- How do you make the Loading icon accessible for screen-readers like JAWS?
- Accessibility: Page Loader indicator using aria-live
- JavaScript and Accessibility: Don't Blame the Language (DrupalCon Nashville 2018 session). Recording and slides from Everett Zufelt's talk.
- JavaScript and Accessibility: Don’t Blame the Language, Everett Zufelt's article version on Medium.
- aria-live: the good, the bad and the ugly . Includes test notes about aria-live support as of 2015.
- Injecting content into the page tests. The same test results from the previous slide deck.
- Live Region Playground. A cool tool from Deque, useful for testing support on current browser/OS/AT combinations.
- http://www.davidmacd.com/blog/test-aria-live-display-none.html
- ARIA Live Region Test. Terrill Thompson's test page. Not sure what date, but it does have versions.
Commit credits
@bgrobertson, who reported this issue on the #accessibility channel on Drupal Slack, and researched which bits of the AJAX API were relevant. This issue report is a summary of his comments there.
@ckueda, who provided a patch on the duplicate issue #2907132: Indicate ajax throbber activity to assistive technology, which is broadly similar to the earliest patch here.