Accessibility Issues with Buttons in New Header Image Area of Theme Customizer

[davidakennedy]

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 #&gt;" data-customize-image-value="http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg" data-customize-header-image-data="{&quot;url&quot;:&quot;http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg&quot;,&quot;thumbnail_url&quot;:&quot;http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg&quot;,&quot;attachment_id&quot;:836,&quot;width&quot;:1260,&quot;height&quot;:945,&quot;timestamp&quot;: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 #&gt;" data-customize-image-value="http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg" data-customize-header-image-data="{&quot;url&quot;:&quot;http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg&quot;,&quot;thumbnail_url&quot;:&quot;http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg&quot;,&quot;attachment_id&quot;:836,&quot;width&quot;:1260,&quot;height&quot;:945,&quot;timestamp&quot;: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 #&gt;" data-customize-image-value="http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg" data-customize-header-image-data="{&quot;url&quot;:&quot;http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg&quot;,&quot;thumbnail_url&quot;:&quot;http://wordpresstrunk.local/wp-content/uploads/2014/03/cropped-Dunes.jpg&quot;,&quot;attachment_id&quot;:836,&quot;width&quot;:1260,&quot;height&quot;:945,&quot;timestamp&quot;: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.

[ehg]

Thanks David!

I'm working on this at ​https://github.com/ehg/wordpress-develop/commits/a11y?author=ehg, and should have some patches ready soon.

[davidakennedy]

Replying to ehg:

Thanks David!

I'm working on this at ​https://github.com/ehg/wordpress-develop/commits/a11y?author=ehg, and should have some patches ready soon.

Awesome! Thanks! I'll keep an eye out and will be ready to retest. Just let me know if anything above doesn't make sense or you have questions.

[davidakennedy]

For anyone interested, the relevant patches for this ticket are happening on #21785.

[ocean90]

In 27970:

Header images: Improve accessibility of Randomize buttons.

props ehg.
see #27598, #21785.

[ocean90]

Point 1-3 should be fixed.

Point 4 was in [27947] but it seems like it doesn't work.

[ehg]

Replying to ocean90:

Point 4 was in [27947] but it seems like it doesn't work.

Hmm, it works for me. Are you setting the "Alternative Text" for the image in the media library?

[ocean90]

Replying to ehg:

Hmm, it works for me. Are you setting the "Alternative Text" for the image in the media library?

Yeah, had a broken image. Looks fine now.

Closing as fixed, since all points are addressed.