Matt Gemmell

TOLL is available now!

An action-thriller novel — book 2 in the KESTREL series.

★★★★★ — Amazon

Accessible Blog Redesign

general 2 min read

As will be evident if you’re reading this on the web, I’ve recently changed the design of this blog. I wanted something black-on-white instead of the somewhat eye-searing white-on-black I used previously. This new theme is based on Cleanr (for WordPress, of course), and before you say it: I know the text is pretty big. I like it this way; it keeps the focus on the text itself.

I originally considered six similar themes (here’s a composite preview of all six themes), and solicited votes on Twitter; the results were heavily in favour of Cleanr. Here’s a picture of the graphed voting results, showing that Cleanr got 39% of the votes, followed by Librio in 2nd place with 23%.

I’ve made several changes to the base theme and to the content of some of the static pages, most of which were a nod towards making the blog more accessible to users with visual impairments and such. Here’s a quick list of the tweaks I made:

  • Made the main content text a bit smaller than the default theme for better average readability.
  • Made the content text be left-aligned instead of evilly fully justified.
  • Added (visually hidden) Skip to content, Skip to navigation, and Skip to search links.
  • Made links more visually obvious (in main content). I left the sidebar links subdued as a compromise; having them all underlined was distracting when reading.
  • Removed needless tables in the content on my Cocoa Source Code page.
  • Added a (visually hidden, for layout) LABEL tag for the sidebar's search field. This necessitated using the "searchform" template file in the sidebar, rather than a WordPress widget. All other sidebar items are widgets.
  • Made the blog tagline/description slightly larger and darker.
  • Reformatted the date information in lists of post summaries.
  • Reordered post metadata (in post lists) to come after the post title rather than before it, and propagated those changes to Search Results, Category pages, etc.
  • Reordered post metadata (tags) to not intrude on the text.
  • Added a title to the RSS link.
  • Removed some JavaScript stuff.
  • Added focus styles to form fields.
  • Removed the negative kerning on post titles.
  • Bumped up the font size in form fields.

I’m also going to make a concerted effort to add meaningful ALT text to images, and to make sure that the anchor-text for links makes sense when read out of context. This theme already enforces reasonably semantic markup and a consistent structure, and should be readily navigable via a screen-reader.

I’m making my customised version of the Cleanr theme available for download (indeed, since it was unfortunately licensed under the GPL, I have to do so anyway). I don’t intend to maintain this as an “accessible version of Cleanr”; it’s just my own blog theme and you’re more than welcome to use it, so feel free to download the customised Cleanr theme as a zip file.

No doubt there will be bugs and issues with this new theme; feel free to point them out via the comments form on this page. You can also contact me directly; here are my contact details.