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:
- There’s a good plugin by Joe Dolson called WP Accessibility but it seems to require jQuery and in any case, accessible websites shouldn’t need to rely on third-party plugins.
- There’s discussion of a WordPress “accessibility-ready” tag that theme authors would be able to use, assuming their theme fulfils certain criteria. Its status is currently Draft Proposal and people are encouraged to leave feedback.
- There’s a dedicated WordPress accessibility Twitter account (@WPAccessibility) and website (wp-accessible.org).
- Joseph Karr O’Connor has started a project called Cities to get more people collaborating on free accessible themes.
- There’s an accessible child theme for the former default WordPress theme, Twenty Eleven, by Rian Rietveld and she’s explained the enhancements she made.
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.
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.
Daniemon's Blog 