WordPress Accessibility

I chose the WordPress “Twenty Ten” theme partly because it seemed to make better use of space and, by now, should have all the significant bugs worked out of it. That said, it does seem to have some accessibility issues in the missing alt text on the header image and insufficient contrast in the link text surrounding a post (grey text on white).

For the alt text, some argued in the WordPress forums that the image is pure decoration but in our case I thought my photo of Santorini with the small houses clinging to the top of the cliffs was an appropriate metaphor for the challenges of making things accessible. It’s not just another feature that make things a little better for some people, it can be the cable car that surmounts the cliffs to deposit users in the place your content calls home. No cable car equals all cliffs. So we needed to get this figured out.

As it turns out, the Media Library of WordPress actually has a metadata field for Alternate Text, they just chose not to pull that data into the img tag on the page. This meant a deep dive into header.php. The original img tag just has a hardcoded alt=”" which we wanted to populate with the Alternative Text field content. Because this wasn’t baked in, it turns into a non-trivial bit of work to pull the data from the database. The basic solution looks like this where my additions are in bold:

<img src="<?php header_image(); ?>"
 width="<?php echo HEADER_IMAGE_WIDTH; ?>"
 height="<?php echo HEADER_IMAGE_HEIGHT; ?>"
 alt="<?php $imageURL = get_header_image(); $thepost = $wpdb->get_row( $wpdb->prepare( "SELECT * FROM $wpdb->posts WHERE post_content = '$imageURL'" ) ); echo get_post_meta($thepost->ID, '_wp_attachment_image_alt', true); ?>
 " />

So this bit of extra php grabs the header image URL and uses it as the key to select a blob of attributes from which we can pull the alt text. This is a condensed version of the solution proposed a long time ago in the WordPress support forums and I haven’t found anything simpler/better. It does seems rather irksome that we have to do a separate database search for alt text when other parts of the image meta data were already fetched, but it does seem to work and I’m still able to do 6 requests per second off this single server, which is plenty for this site.

The other accessibility snag I noticed was the text contrast was quite low on all the text surrounding the posts such as the post date and comments links. This was flagged when I ran the site through the Worldspace accessibility checker from Deque systems, which works like the w3c html validator to catch basic issues with the markup. Apparently the default values used by the “Twenty Ten” theme don’t pass the basic WCAG 2.0 Level AA requirements for reasonable contrast. In particular, by inspecting the CSS using the Safari Web Inspector I found that the little bits of grey text were set to a hexvalue of #888 on a #FFF (white) background. There is a handy Color Contrast Checker tool from Jonathan Snook which lets you plug in your existing values and then lets you play with them until they pass the contrast checks. While there are other tools which are linked from the aforementioned page, this one being web based means I always have it handy and can run it on any device.

With my colors in the Snook tool I changed the #888 to #575757 which is a darker shade of gray, dark enough to pass all the tests. Then we modified the WordPress style.css file to replace all 15 instances of #888 with #575757. This is one of those things that once you implement the change it becomes apparent just how difficult it really was to read that low contrast text. So this is good not only for low vision users but, like curb cuts, is applicable to the wider web audience. Why would we want to make it hard to read our lovely text, oftentimes navigation links at that? It’s like inviting friends to the comfy couch and then kicking them in the shins.

With these changes in place we’re further along in making sure our accessibility site is actually accessible. Wonder what other bugs I’ll find as I turn over more stones.

[Update 5/11/12] The AOL deign folks reviewed the site and, after some deliberation, felt the banner image was not needed, so the whole alt text thing for this site is no longer needed as other image do get their alt text. If you do run a banner image and want alt text you’ll still need to hack that in as I describe above.