[wp-trac] [WordPress Trac] #31195: Add a user-friendly way to preview site responsiveness in the Customizer

[WordPress Trac]

#31195: Add a user-friendly way to preview site responsiveness in the Customizer
--------------------------+------------------------------------------------
 Reporter:                |       Owner:
  celloexpressions        |      Status:  new
     Type:  feature       |   Milestone:  4.5
  request                 |     Version:
 Priority:  normal        |  Resolution:
Component:  Customize     |     Focuses:  ui, accessibility, administration
 Severity:  normal        |
 Keywords:  needs-patch   |
--------------------------+------------------------------------------------

Comment (by afercia):

 Replying to [comment:32 celloexpressions]:
 > Should we also use a11y.speak() here?
 @celloexpressions thanks :) played a bit with the plugin, and I'd suggest
 to consider some improvements.

 1 - Ideally, in the markup the buttons should be before the "Collapse
 Sidebar" button simply because when navigating through elements using the
 keyboard and a screen reader I would probably assume the "Collapse
 Sidebar" being the last control in the UI.

 2 - Consider to add a hidden heading before the buttons to identify this
 section

 3 - Probably I wouldn't use a11y.speak() here. There is the need to give
 feedback about which of the buttons is the currently active one and
 feedback after a button is pressed. I'd probably use [http://www.w3.org/TR
 /wai-aria/states_and_properties#aria-pressed aria-pressed]. Here's how the
 buttons are announced now using Firefox+NVDA:

 {{{
 Enter desktop preview mode
 button
 Enter tablet preview mode
 button
 Enter mobile preview mode
 button
 }}}

 When activating one of the buttons, there's just silence. Using an `aria-
 pressed="true/false"` attribute to be dynamically updated things get
 better:
 {{{
 Enter desktop preview mode
 toggle button  pressed
 Enter tablet preview mode
 toggle button
 Enter mobile preview mode
 toggle button
 }}}

 The buttons are now announced as '''toggle''' buttons and the active one
 as "pressed". When activating one of the buttons, NVDA will announce the
 state change saying just "pressed". I'd also like to hear the
 accessibility team opinion and will ask the team to have a look at the
 plugin.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31195#comment:33>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform