The Creative Director’s essential checklist: Cut the guesswork for accessible content

Accessibility is hard. But better accessibility means reaching more of the people your charity serves—and it's not as hard as you think.

For many of us, we know it’s important, but we don’t really know where to start. With my designer’s hat on, I can identify. Because I don’t write code, my relationship with accessibility is bound to surface level details like colour and contrast, and content. But that relationship is therefore very similar to that of hard-working CMS editor everywhere. And I’m here to let you know that it doesn’t have to be hard, it doesn’t have to be scary, and I’ve a few tools to share with you that will help!

So the following links are far from exhaustive, they’re just the ones I’ve found helpful in developing designs and working with content. They may not work for you, but hopefully they’ll give you a sense of what’s out there, and a place to start doing your own research.

Knowledge

The first pair of links are both to resources developed and provided by the UK Government Digital Service. The WCAG can be daunting at best, so you’d be entirely forgiven for looking at it and quickly closing the tab! Welcome to GOV.UK has a great set of resources that are a few degrees more friendly for the general user. So if you’re looking for info a11y info, this is a good place to start.

• GOV.UK a11y service manual — Testing for accessibility
• GOV.UK design principles — Understanding WCAG 2.2

Contrast

A huge amount of our considerations in design and content terms can be resolved down to this one word “contrast.” WCAG lays down minimum levels of contrast that need to be achieved between the colour of a foreground object and the colour of the background object it sits before. Black text in the foreground before a white background would be the highest level of contrast achievable, while two toned of grey would be amongst the lowest. Contrast grid lets you stack up a palette of colours, and see in s a simple visual lock-up which combinations pass, and which ones don’t. I love this tool, and I typically start a design project for a new Partner by passing the brand colours through it.

• Contrast Grid — EightShapes Contrast Grid

Clarity

Reading age is a super-relevant thing to bear in mind when thinking about accessibility. It’s one of the points that an automated checker just doesn’t care about - and nor does the WCAG in a meaningful way. But in reality, how easy is your copy to read, the more accessible it’s going to be for literally everyone. For example, it’s assumed that people born deaf who speak British Sign Language can read like native English speakers. I was stunned to learn years ago that the average English reading ago of a BSL speakers, is 9. The Hemmingway App therefore is a great place to start on your journey towards a more accessible writer word. You can use it to draft your copy, or just paste in the text you’ve written elsewhere. But whichever you do, Hemmingway gives you a live estimated reading age, and a number of other factors which you can use to redraft your text. It’s free to use the web version, and it’s indispensable!

• Hemmingway App — Hemingway Editor

Image descriptions

Describing the contents on an image for screen readers can be hard, more because it’s time consuming if done properly, more than it being difficult. We’re all guilty of uploading an image quickly because there’s a deadline, and neglecting to populate the description field in the admin. But it’s hard to overstate how important is the text that’s served in an image’s alt-text. And unlike the reading age of a page of text, automated checkers can and will red-flag your page if alt-text is missing. This is one of the areas where A.I. can be a genuine help. I found this free tool which will ‘look’ at an image, and give you an alt-text-friendly slug of text to function as a first draft. Give it a go!

• Alt text generator — Free AI Image Alt Text Generator

Automated checkers

There’s a lot of them out there, and they all do much the same job. We like (and are happy to recommend) Lighthouse. It’s a service from Google with a free tier which you can instil as a chrome extension. When triggered, it’ll give you an accessibility audit of the page your on, and a clear list of things to fix. In fairness it is developer focused tool, but it’ll give you a really clear understanding as to what accessibility is in real terms, and what you might need to do about it at a more foundational level.

• Lighthouse — Introduction to Lighthouse  |  Chrome for Developers

So, those are my go-to’s. Of course, it can often be helpful to have a traveling buddy when you’re exploring something new. If you’d value a little support, and a friendly face to walk with towards better accessibility, we’d love to hear from you.