Making designs accessible
Accessible graphic design means that your content can be accessed by everyone, including those with visual, auditory, motor or cognitive disabilities. More and more clients are asking for their designs to be made accessible, but what does this actually entail and what steps do the client and the designer need to make to ensure that guidelines are met?
The guidance here covers my own experience of creating accessible graphic design for print and PDF documents – web and UX design may have different or specific guidance of its own. Advice on accessibility can be varied or contradictory, so always double check the criteria for your own users specific needs.
Illustration © Tom Holmes
Can you design my project to be accessible?
As a client, this is a question that you need to bring up at the briefing stage of a job. Making a design accessible includes a few extra considerations and steps and as a designer I need to know this requirement from the start so that my choices regarding fonts, colours and layout are all compatible. I’ll cover these in a bit more detail below.
What steps need to be taken to make a design accessible?
I’ve read several guides to accessible design over the last few years. These are the main considerations that are usually recommended. These are listed here as a general guide to give graphic design clients an idea of what’s involved in making a design accessible, rather than be a detailed how-to for designers to follow.
Fonts and typography
Recommendations are often given for setting text to help ensure that it is readable:
Body text should be set at a reasonable font size – advice can vary, but 12pt–14pt seems to be the usual recommendation. I tend to use 12pt for longer blocks of text, as 14pt can look very large on a page.
Leading – the space between lines of text – should also be a bit more generous for accessibility. The usual recommendation is at least 150% of your font size – so for 12pt body text the leading should be set to at least 18pt.
It is usually advised that sans serif style fonts are used. These are fonts that don’t have ‘tails’ or serifs on the ends of the letters.
It is recommended that paragraphs should have around 7–10 words per line. This is not just true for ‘accessible’ designs but for anyone to read comfortably. However, with larger font sizes, this means that you’ll probably only have room for one column of text per page (which also helps keep things easy to follow).
Paragraphs should be left-justified, rather than fully justified.
Stying of text also needs to be considered, avoiding where possible italics, underlining and capitals.
Colour
Colour is also an important consideration to ensure that text and other items on a page are clearly visible:
Colour used for text needs to have sufficient contrast with the background colour behind it. I’ve yet to find a good guide for printed colours, but the WebAIM guide for web colours can check equivalent RGB colours.
Note that some colour combinations are OK for large headings but not for smaller body text.
Also be aware that to meet standards, the colours used tend to need to be fairly dark to provide the necessary contrast, even on a white background.
Using a dark grey colour instead of solid black for body text, or using a slightly off-white background colour can reduce the harshness of contrast for dyslexic readers, whilst still meeting contrast guidelines.
These rules are generally aimed at text, but it can be good practice to follow this guidance for icons, pictograms and other non-decorative graphic elements too.
Wording
It’s not just the design of the page which needs considering – the text you provide for your content should also be written in a manner which is considered accessible:
Include a clear contents page at the beginning of longer documents
Arrange text with a clear hierarchy of headings
Avoid abbreviations and acronyms
Use plain language that is easy for anyone to understand
Avoid hyphenation
Make hyperlink destinations clear
PDF Settings
Before exporting to PDF, a number of settings need to be made to a document:
Alt text should be added to images to provide descriptions
The hierarchy of text should be defined with heading and paragraph tags
The reading order of items on a page should be specified for screen reading software to follow
Decorative items should be tagged as artefacts so that they are ignored by screen readers
Great, let’s do it!
That’s great that you’re on board. With this in mind then I can work on making your document accessible.
Why don’t you just make all your designs accessible by default?
This is a good question, and something I’m trying to consider more and more when creating documents, whether accessibility has been requested or not. However, accessible design can impose limitations on the styling of designs, may not work with your existing brand guidelines and may vastly increase the number of pages required for a document.
What should I do if making my content accessible isn’t compatible with my branding?
An alternative to making documents accessible is to also provide a separate accessible version that can be provided to those who need it. This way you can create an additional unadulteratedly accessible document with large, clear text and an appropriate colour palette without having to compromise your brand’s style.
This is maybe a bit of a shortcut, so the alternative is to actually make your whole brand accessible.
How can I make my brand accessible?
If your brand isn’t compatible with creating accessible designs, and it’s something you need to commit to, then getting a new or updated brand design may be the sensible option. This way you can ensure that your colour palette, fonts, brand assets and document styles and templates are all already accessibility-friendly and will make designing new documents in an accessible format a lot easier.
Summary
Hopefully this guide has given you a better idea of what’s involved in making your documents accessible and inspired you to make a commitment to taking that extra step to ensure that the documents you’re producing can be read by everyone. Get in touch if you’d like me to help you achieve this with your next document design, or maybe it’s time to revamp your entire brand with a new accessible design?
Resources
Here are a few links to helpful sites and documents which can provide a bit more detail on the guidelines for creating accessible documents:
Real Inclusion’s PDF guide to accessible formatting
UX Movement’s guide for designing for dyslexic users
https://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/
WebAIM contrast checker
https://webaim.org/resources/contrastchecker/