[wp-trac] [WordPress Trac] #31336: Customizer: separate navigation from options UI for better UX by removing accordion behavior

[WordPress Trac]

#31336: Customizer: separate navigation from options UI for better UX by removing
accordion behavior
--------------------------+------------------------------------------------
 Reporter:                |       Owner:  ocean90
  celloexpressions        |      Status:  assigned
     Type:  enhancement   |   Milestone:  4.3
 Priority:  normal        |     Version:  4.0
Component:  Customize     |  Resolution:
 Severity:  normal        |     Focuses:  ui, accessibility, administration
 Keywords:  has-patch     |
  needs-refresh           |
--------------------------+------------------------------------------------

Comment (by afercia):

 Replying to [comment:53 ocean90]:
 > @afercia The Customizer uses `$title Press return or enter to open` for
 screen readers to explain, that a section/panel can be opened. Is that
 clear enough? Is there something you would like to have changed in the
 latest patch in terms of a11c?
 Many things :) I think the Customizer would need a complete accessibility
 review and that can't be done by a single person, would need a team
 effort. It's not a matter of just adding come screen-reader-text, it's
 about semantics and interaction with assistive technologies.
 The h3 headings here are used also as UI controls. Headings should be used
 just for informative purposes and to give structure to the document, not
 as UI controls. For interaction, HTML already provides natively keyboard
 accessible elements (buttons).
 http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

 That said, what can we do without rebuilding all the markup? I'd probably
 consider to add `role=button` to the headings. For the ones that open a
 panel, maybe add also `aria-expanded=false`. This way, screen readers
 would announce, e.g.:
 `Header Image button collapsed`
 no need to add screen-reader-text, it's a button, it's collapsed, so users
 would already know that activating them, something will open. For the
 headings that "close" a panel or go back, I wouldn't use aria-expanded and
 use some screen-reader-text to make screen readers announce, e.g.:
 `Customizing Header Image Activate to go back button`

 Using `role=button` would also require to attach a keyboard event to the
 headings in order to mimic a real button, since buttons can be activated
 with both Enter and the Space bar.

 About the sliding panels, please consider the invisible panels are just
 "out of view" but still focusable and you can tab to them and activate
 their controls even if you can't see them. I would recommend to have a
 look at the Press This sliding panels where we tried to take care of this
 issue and ask @azaozz and @michaelarestad about the implementation
 details.

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