Crowdsourcing: accessibility on

I’ve noticed that quite a few of the trendy designs for blog templates on the free site, while looking very gorgeous and all, are just not that accessible for folks – pale grey fonts, especially tiny pale grey fonts, are the worst offender. I’d like to have a list of themes good and bad – the themes which generally work, and the themes which should be avoided by folks running a blog on (If you’re not sure how to find out what theme a blog is using, look down in the footer – there should be a credit link showing the name of the theme and maybe the name of the theme author.)

So, what have you, as readers and users of blogs on, found to be the best and worst user experience in terms of accessibility?

Looking at what’s currently rated as the most popular themes there:

The Stars

(i.e. legible for most readers, no horrid accessibility fails)

  • the two recent default themes – Twenty Ten and Twenty Eleven – skiplinks, nicely legible font size and colour, high contrast. They both have customisable headers and backgrounds too, so sites can differentiate themselves easily. Also they have footer widgets for extra info/navigation blocks, so that your sidebar can be uncluttered except for the essentials.
  • Kubrick – the old default WP theme. It’s a nice basic style that is fairly readable.
  • Vigilance – not in the top 10, but it has its fans. They’ve put quite a bit of thought into various accessibility features (textual elements to designate different items that other themes only style visually, for instance); reasonably customisable.
  • Coraline – super legible, high contrast font/background, strong layout, customisable header and background, header image can be removed entirely.
  • Titan – Ok but not great. Layout is very clear and minimalist, font is only just dark enough for me, will probably not be dark enough for some readers.

The Horror Stories

(ok, that might be hyperbole, but they fall short)

  • Bueno – this one’s a shame, because at first glance it looks so promising. But the font for the posts/pages and comments is just way too pale for lots of readers. If you really love it and want to fork out 30USD per blog per year for the Premium Add-On Custom Design Upgrade that’s an easy fix, but you need someone who knows their way around stylesheets.
  • Wu Wei – pretty much the same story as above – a very appealing theme with a too-pale font.

I ran out of time to look at more themes for this post (busy week!) – so I’m throwing it up as it is. Have at it!

Categories: Meta, social justice, technology

Tags: ,

9 replies

  1. I use Oulipo and it’s very readable: nice dark text on a white background with plenty of white-space.

  2. Perhaps suggest to them that they add an “accessible” tag so themes can be filtered on the installation page.

    • Sam, that’s something I’ve thought of – I felt it might have more force as a suggestion with a bit of data behind it.

  3. There are other issues that effect usability of a site than just visibility of the fonts and such. Good, readable, high-contrast fonts are important to me. However, a combination of my ADHD and sensory integrative disorder arising from autism make “busy” sites painful for me.
    An example is the background used on hoyden – that floral pattern is hella distracting to me, and it’s rather an energy suck to have to constantly work to keep my eyes from latching onto that background.
    Sites that use an excessive number of decorative images, especially in article bodies, are a problem for me. It’s fine to use image that are a part of the content, for example, an image depicting an offensive ad that the article is critiquing is fine. But images that are there just for decorative purposes are problematic. Sites that use any type of moving or animated images – animated GIFs, slideshows that I can’t stop, etc, are absolutely unreadable for me, to the extent that trying to bull my way past the attention-destroying animations frequently kick off migraines.
    I’ve noticed that most discussions about site accessibility focus mostly on folks with low vision, less on folks that use screen readers or other accessability aids, and hardly at all on folks such as myself with developmental / learning disorders.
    So to site designers, I request: Large, simple, high-contrast fonts; clean, simple layouts; plain backgrounds instead of image backgrounds; a minimum of decorative, content-free images; and NO ANIMATIONS, NONE WHATSOEVER, or I will leave your site and won’t be back. Also, please use static tag clouds and not those globes that you have to rotate with your mouse. Those are a terror to use for those of us with dyspraxia and movement disorders, and they’re probably useless for folks using screen readers.

  4. Thanks for the feedback. I’ve been wondering about toning down the image background for a while, so I’ve just made it a lot darker so that the floral background is very soft and it’s mostly just dark space. If you refresh the page you should see the difference.
    Does that help?

  5. P.S. thanks for the reminder about usability/accessibility for screen-reader users as well – this was brought home to me sharply with the recent redesign of Feministe. I’d done the basics on my screen-reader checklist, but users brought up quite a few shortfalls on aspects that I hadn’t even thought to check, which needed going off and re-writing code to fix. I now have a bigger checklist.
    Of course, on, folks don’t have the option to rewrite the templates they use. That’s why I’ve focused on legibility and contrast first and foremost, because they are the most obvious and it is possible at least to change some of those aspects with the Premium CSS styling option that WP offers, if one can afford it.

  6. Yes, tigtog, the background’s better. Thanks.

    • Good, I’m glad to hear it. I’ll keep the animation problem in mind, because sometimes it’s tempting to use an animated gif for the front page thumbnail, and I’ll know to avoid that temptation in future.


Get every new post delivered to your Inbox.

Join 2,038 other followers

%d bloggers like this: