Accessible Child Theme for WordPress Twenty Twelve

Quick summary: I made an accessible child theme for the default WordPress Twenty Twelve theme. Read on for details.

Accessibility in WordPress

I recently switched my blog over to WordPress — self-hosted to give me more control. So far I’m impressed, especially with the number of plugins and themes available, but I was a bit surprised at the lack of themes that claim to be accessible. At the time of writing there are 1,741 themes in the official repository, only 5 of which appear when searching for “accessible” or “accessibility”. Not good. But there are some positive signs:

It was the write-up by Rian that helped me make a similar child theme for Twenty Twelve, the current default WordPress theme. Out of the box, it seems pretty good already and a big improvement over previous versions, but I felt there were a few tweaks that could be made. Below is a summary of what I’ve changed or overwritten.

Child theme changes

style.css

  • Force underline on links but remove links on hover/focus (to clearly indicate a selected element).
  • Increase contrast in buttons, links and other text (for low-vision users and situations such as outdoors on a sunny day).
  • Remove automatic hyphenation (to avoid strange pronunciation with screen readers).

header.php

  • Remove link around the site’s title and banner image when front page is viewed.
  • Only show the description heading if the site description has been set.

content.php

  • Change headings in post lists from <h1> to <h2>.

footer.php

  • Add a “return to top of page” link in the footer.
Accessible OneTwo Theme

I’m not an accessibility expert but I think (hope!) these changes improve the browsing experience for all users. The theme itself is available for download from GitHub where I’d love to receive suggestions for improvements, or alternatively in the comments below. Incidentally it’s also been submitted to the WordPress theme repository as Accessible OneTwo so hopefully will be available to a wider audience in future.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s