[wp-trac] [WordPress Trac] #31368: Let WordPress speak

[WordPress Trac]

#31368: Let WordPress speak
---------------------------------------+-----------------------------
 Reporter:  afercia                    |      Owner:
     Type:  enhancement                |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Administration             |    Version:  4.1
 Severity:  normal                     |   Keywords:
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 Quickly discussed with @azaozz and the accessibility team, we would like
 to propose a `wp.a11y` object to keep some accessibility related things.
 Some of them are already used in the admin, see the Customizer "move
 widget up/down" #28892, they just need to be abstracted a bit and added
 "globally" to `wp`.
 Other things may be added in the future, for example things that are used
 by different components in the admin and each one has its own, specific
 implementation. They should probably be abstracted and standardized: less
 JavaScript, better code, easier maintenance, easier to use for developers,
 etc. Consider for example things like a focus manager (see e.g.
 `wp.media.view.FocusManager`), constraining tabbing, modals handling,
 errors handling and such.

 == Speak ==

 As a start, the proposed patch creates an easy way to deliver messages for
 screen reader users to an ARIA live region to be used as a general message
 area available in the admin, hidden with the screen-reader-text CSS rule.
 Inspired by Mr. Armfield original idea (see #28892), it replaces the
 current Customizer implementation and it patches also Shiny Updates, for
 demoing purposes.

 When a portion of a page is updated with some JS, the update is easy to
 see at a glance but there is no audible feedback for screen reader users
 that an action has started, has been completed or failed.
 The solution should be effective for users and easy to use for developers
 at the same time. For developers, it would be as simple as this:

 {{{
 wp.speak( 'your message here' );
 }}}


 For the future, consider possible integration with WP notices, see as an
 example: http://heydonworks.com/practical_aria_examples/#offline-alert

 @todo:
 - naming conventions
 - code review
 - carefully consider where to put things: should be in all admin pages?
 install pages too?
 - should always be enqueued as last script?
 - testing in different scenarios
 - consider making it available in the front-end too for themes and
 plugins, using something like `wp_enqueue_a11y()`
 - documentation

 Where it could be used right now:

 - Customizer
 - Shiny Updates see #29820
 - Media views uploads, deletion etc.
 - Spinners, see https://core.trac.wordpress.org/ticket/22839#comment:19
 - AJAX search/filtering results, see e.g. #26600 and #25103
 - all AJAX actions that trigger an UI update

 See attached screenshot to have an idea about how it currently works. Any
 thoughts more than welcome.

 == Really speak ==

 As a ''divertissement'', the alternate patch it's a glimpse ahead: it
 demos the Web Speech API that will be hopefully implemented in the next
 future. Have fun :) Working in Chrome and Safari, tested just in Chrome.

 === References ===

 [http://www.w3.org/TR/wai-aria/states_and_properties#aria-live The aria-
 live property]
 W3C Recommendation

 [http://alistapart.com/article/accessibility-the-missing-ingredient
 Accessibility: The Missing Ingredient]
 by Andrew Hoffman May 13, 2014 on A List Apart
 [http://alistapart.com/d/395/accessibility-the-missing-
 ingredient/second_pass/ Shopping cart demo]

 [http://tink.uk/accessible-forms-with-aria-live-regions/ Accessible forms
 with ARIA live regions]
 November 10th 2012 Tink.co.uk (Léonie Watson)

 [http://www.w3.org/WAI/PF/testharness/testresults?testsuite_id=1&testcase_id=107
 Aria live support]
 W3C Protocols and Formats Working Group, Updated 24 September 2014

 [http://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-
 live-regions/ ARIA live support]
 17 March 2014 by Léonie Watson on The Paciello Group blog

 === Screenshot ===

 [[Image(https://cldup.com/Y-I7xkELAi.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31368>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform