[wp-trac] [WordPress Trac] #27598: Accessibility Issues with Buttons in New Header Image Area of Theme Customizer

[WordPress Trac]

#27598: Accessibility Issues with Buttons in New Header Image Area of Theme
Customizer
---------------------------+-----------------------------
 Reporter:  davidakennedy  |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Appearance     |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 When testing the new Header Image customizer with a screen reader (in this
 case Mac OS 10.9.2 with Voiceover and Chrome), I ran into a few issues.

 First issue: The current buttons in the new header image area of the theme
 customizer are not actual buttons, but {{{ <a href="#"</a> }}}. This isn't
 necessarily wrong but having them be actual buttons would be more semantic
 and provide more context to assistive technology users. Also adding a bit
 more context to the copy would help. Currently, a screen reader reads:
 "Link, add new". This works, and some users could figure out what "thing"
 they would be adding, based on surrounding context. However, it can be
 better.


 The current markup for these buttons:

 {{{
     <a href="#" class="button remove">Hide</a>
     <a href="#" class="button new">Add new</a>
 }}}

 What I expected: More context from the markup as I navigated with a screen
 reader.

 Recommendation:

 {{{
     <button class="button remove">Hide image</button>
     <button class="button new">Add new image</button>
 }}}

 This way, a screen reader would read "Hide image button", etc.

 Second issue: This type of pattern is even more problematic in the
 "Randomize uploaded headers" button. It's markup:

 {{{
     <div class="placeholder random" style="height: 40px;">
         <div class="inner">
             <span><span class="dashicons dashicons-randomize dice"></span>

                 Randomize uploaded headers
             </span>
         </div>
     </div>
 }}}

 Maybe something like:

 {{{
     <div class="placeholder random" style="height: 40px;">
         <div class="inner">
             <button><span class="dashicons dashicons-randomize
 dice"></span>

                 Randomize uploaded headers
             </button>
         </div>
     </div>
 }}}

 A screen reader user has no idea that this is an action that can be taken.
 Also, a keyboard-only user cannot access this at all because divs and
 spans cannot be focused on.

 Third issue: Also the markup for an uploaded header image that can be
 clicked to be set needs more context as well. The current markup:

 {{{
     <a href="#" class="choice thumbnail #>" data-customize-image-
 value="http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-
 Dunes.jpg" data-customize-header-image-
 data="{"url":"http://wordpresstrunk.local/wp-
 content/uploads/2014/03/cropped-
 Dunes.jpg","thumbnail_url":"http://wordpresstrunk.local
 /wp-content/uploads/2014/03/cropped-
 Dunes.jpg","attachment_id":836,"width":1260,"height":945,"timestamp":1396199958763}">
         <img src="http://wordpresstrunk.local/wp-content/uploads/2014/03
 /cropped-Dunes.jpg">
     </a>
 }}}

 A screen reader user just hears: "Link image". Again, a screen reader user
 may not know what can be done here.

 A potential solution:

 {{{
     <button class="choice thumbnail #>" data-customize-image-
 value="http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-
 Dunes.jpg" data-customize-header-image-
 data="{"url":"http://wordpresstrunk.local/wp-
 content/uploads/2014/03/cropped-
 Dunes.jpg","thumbnail_url":"http://wordpresstrunk.local
 /wp-content/uploads/2014/03/cropped-
 Dunes.jpg","attachment_id":836,"width":1260,"height":945,"timestamp":1396199252557}">
         <span class="screen-reader-text">Set image</span>
         <img src="http://wordpresstrunk.local/wp-content/uploads/2014/03
 /cropped-Dunes.jpg">
     </button>
 }}}

 This way, screen reader users would hear, "Set image button"

 Links should be used whenever the action is a navigation (changes the URL)
 and buttons should be used for all other actions. We can easily style
 these to create the visual effect that we want. It should be noted that
 this pattern exist throughout the Theme Customizer.

 Fourth issue: If a user explicitly sets alternative text in the Media
 Library, that attribute doesn't seem to be displayed in the Theme
 Customizer Header Image area. This is problematic because a screen reader
 user would have no idea which image is which when they toggling through
 them. Using the above, improved markup:

 {{{
     <button class="choice thumbnail #>" data-customize-image-
 value="http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-
 Dunes.jpg" data-customize-header-image-
 data="{"url":"http://wordpresstrunk.local/wp-
 content/uploads/2014/03/cropped-
 Dunes.jpg","thumbnail_url":"http://wordpresstrunk.local
 /wp-content/uploads/2014/03/cropped-
 Dunes.jpg","attachment_id":836,"width":1260,"height":945,"timestamp":1396199252557}">
         <span class="screen-reader-text">Set image</span>
         <img alt="Dunes on the Beach" src="http://wordpresstrunk.local/wp-
 content/uploads/2014/03/cropped-Dunes.jpg">
     </button>
 }}}

 This way, screen reader users would hear, "Set image Dunes on the Beach
 button" This may be true for the Theme Customizer Background Image area as
 well. I haven't checked it yet.

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

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