[wp-trac] [WordPress Trac] #27591: Screen Reader Users Do Not Know Sections in Theme Customizer are Expandable

[WordPress Trac]

#27591: Screen Reader Users Do Not Know Sections in Theme Customizer are Expandable
---------------------------+-----------------------------
 Reporter:  davidakennedy  |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Appearance     |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 The issue: When testing the new Widget customizer with a screen reader (in
 this case Mac OS 10.2 with Voiceover and Chrome), the arrows that expand
 each Customizer section(s) do not announce in a screen reader. A screen
 reader user may have no idea they are expandable. Note: this is a pattern
 that exist throughout the Customizer, not just with the new Widget
 customizer additions.

 This relates to this kind of markup on the /wp-admin/customize.php screen.

 {{{
 <li id="accordion-section-title_tagline" class="control-section accordion-
 section top">
     <h3 class="accordion-section-title" tabindex="0">Site Title &
 Tagline</h3>
     <ul class="accordion-section-content">
         <li id="customize-control-blogname" class="customize-control
 customize-control-text">
             <label>
                 <span class="customize-control-title">Site Title</span>
                 <input type="text" value="Super Awesome WordPress Trunk
 Testing Site" data-customize-setting-link="blogname">
             </label>
             </li><li id="customize-control-blogdescription" class
 ="customize-control customize-control-text">
             <label>
                 <span class="customize-control-title">Tagline</span>
                 <input type="text" value="Just Another Super Awesome
 WordPress Trunk Testing Site for Theme Development" data-customize-
 setting-link="blogdescription">
             </label>
             </li><li id="customize-control-display_header_text" class
 ="customize-control customize-control-checkbox">
             <label>
                 <input type="checkbox" value="fff" data-customize-setting-
 link="header_textcolor">
                 Display Site Title & Tagline
             </label>
         </li>
     </ul>
 </li>
 }}}

 What I expected: Some way to know via announcement with the screen reader
 that the heading elements are expandable.

 Recommendation: Use a similar markup pattern to this accessible accordion
 that relies heavily on WAI-ARIA:
 http://hanshillen.github.io/jqtest/#goto_accordion

 I'd be happy to consult on and test potential solutions.

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