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 ThemeI’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.

8 thoughts on “Accessible child theme for WordPress Twenty Twelve

  1. joe

    Hi there Daniemon
    Nice work! I’ve been trying to find the time to collect together some people to add to the number of accessible themes in the repository. Hopefully I will be able to make the time after the next WordCamp I’m speaking at.
    I’m curious why you chose to remove links on hover/focus instead of preserving focus and even supplementing hover/focus with a stronger indicator?

    Reply
  2. Daniel Post author

    Thanks for the comment, Joe.
    Re. the underline removal, I think it’s a nice, clear indication of a hovered link that doesn’t rely on colour. I also don’t have great design skills so it’s easier for me to implement with confidence! Incidentally, I did try a colour-reversal effect on hover on a previous website but had feedback that it was a bit too strong and overbearing.

    As for focus, it doesn’t overwrite existing outline effects so the browser (or other user agent) will continue to use it’s own highlighting mechanism, such as a dotted border, etc.
    I’m open to suggestions, though, if you think there’s a more effective alternative.

    Reply
  3. Joe Dolson

    Hey, Daniel – thanks for doing this! I have to admit I haven’t had much of a chance to look at what you’ve done — but every improvement is worth while.

    You’re absolutely right that my WP Accessibility plug-in isn’t something any site should depend on — I describe it as the wrong solution to the problem — the right path for most of these issues is for the theme to do them right in the first place; but WP Accessibility fills in some of the gaps for those who don’t have the skill, budget, or time to make these changes to their theme. It’ll help, but it’s not the best way to do it. Sometimes it might just be the only way available.

    Reply
    1. Daniel Post author

      Thanks Joe – I agree with your comments. Although accessibility seems to be gaining traction in theme development, I think there’ll always be demand for plugins such as yours that provide extra flexibility.

      Reply
  4. Rian Rietveld

    Hi Daniel,
    Nice work! This is great, building on each others work and sharing.
    You are right, there are way to few accessible WordPress themes.
    Joseph Karr O’Connor started Cities, a project to increase the number of free accessible WordPress themes. So there’s hope :-)

    Reply
    1. Daniel Post author

      Thank you for commenting, Rian.

      I hadn’t heard of the Cities project so I’ve added it to the post — the more the merrier!

      Reply
  5. ALPH

    How can I add an image next to the site name and slogan ? If I try to to add an image, it is placed automatically be low the menu with Home, .
    my Website is Under construction

    Thanks

    Reply
  6. Wayan Adika

    Nice work Daniel,
    I start my next project using Twenty Twelve as a parent theme, I will use your child theme and do some modification so will fit with my desire. I little bit got some problem to show the related post with thumbnail picture and excerpt without using plugin below the post. Perhaps you know how to do it, do you mind to share your trick. It will be helpful for me to complete the project.
    Regards
    Wayan Adika

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>