Accessibility is essential in today’s digital world, ensuring everyone can engage with websites, apps, and online content. Yet, many people with disabilities still face barriers. This article focuses on some of the principles and practices that help to make your creative digital assets more inclusive.
It’s important to remember that accessibility is a legal requirement for any public sector platform; the government mandates compliance with WCAG 2.2 – Level AA (Web Content Accessibility Guidelines) for all public sector websites and mobile applications.
There are lots of things you can do to make your content accessible, but the below content covers some of the topline basics from a design perspective. We’ve broken down this down into 5 key areas.
1. Colour and contrast
Contrast ratio
It’s really important to ensure that text and important graphical elements have sufficient contrast with their backgrounds. WCAG recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
A strong contrast between text and background significantly improves readability for people with visual impairments. Low contrast can make text appear blurry or unreadable.
Also on digital platforms, contrast helps users identify buttons, links, and other interactive elements, making navigation more intuitive. Here is a useful tool to check your colour contrast.
Colour blindness
This is something to be aware of when designing, common colour blindness is red/green which are commonly used as colour indicators, like pass/fail, go/stop and good/bad. Do not use colour alone to distinguish sections or important information. If you use colour, ensure that you have additional cues such as and labels or icons (such as a tick or a cross) to help to identify sections or particular actions.
Colour consistency
It’s important to maintain consistent colour usage across your designs to help users with cognitive disabilities.
A consistent use of colour helps users recognise and understand the interface easily, and helps to build patterns and expectations for the user, for example, if buttons are always in yellow they will know to look for this.
2. Text and typography
Size and style
- Use clear legible typefaces and ensure the text is large enough to read.
- For optimum readability, the recommended size for body text in print is 12pt (minimum) and the recommended size for digital is 16px (minimum).
- Write in sentence case where possible, and only use CAPS sparingly and for short headings only.
Line height and spacing
- Adequate spacing between lines and paragraphs helps with readability and gives the text breathing space.
- Try to keep the type left aligned where possible, this provides a consistent starting point for each line, making it easier for readers to find the next line.
- The predictable structure of left-aligned text also helps reduce the cognitive load, allowing readers to focus on the content rather than adjusting to varying alignments.
- Justified text can create uneven spacing between words, and can make reading more difficult and tiring for those with dyslexia.
- Centred text can leave words hanging at the end of a line that may be missed. It’s also more confusing to find where the next line begins.
Text and images
- Avoid text over images, and avoid text embedded in your images.
- There is usually a lack of contrast if text is on an image and the differing colours of the image can make it hard to differentiate certain letters.
- Embedded text in images is incompatible with screen readers, as they read the live text or HTML code and convert it to speech. If you do this, use alt text to describe the image.
Also to note, if text is embedded there’s no option for customisable settings in your browser for font, size and colour.
3. Readability and structure
Headings
- Headings provide a clear and logical structure to a webpage, allowing users to understand the hierarchy and organisation of the content.
- Common practice using paragraph styles, such as H1, H2, H3, etc.
- This lets screen readers relay the hierarchy of a page layout, and allows quicker navigation to the sections that they are interested in.
Structure consistency
- Maintain a consistent layout throughout the site or application to create a predictable environment.
- People read left to right, so reflecting this on your webpage and printed content is important. Such as building your web content blocks to flow from left to right.
- Also, a note that a line of text shouldn’t be longer than 80 characters.
Readability
- Making sure that your content is in plain english is vital to it being accessible to everyone.
- Using jargon and acronyms usually confuses the audience, when we’re talking about complex topics, simplifying the content is important.
Using a tool like The First Word readability test tells you how difficult your content is to understand.
4. Alternative text (Alt text)
Alt text helps people by providing a brief description of an image that screen readers can read aloud. It is included in the HTML code of a webpage.
WCAG (Web Content Accessibility Guidelines) requires the use of alt text for images.
Things to note when writing alt text:
- Clearly convey the content and transcribe any text.
- Don’t make assumptions about the image.
- Write in sentences.
5. Captions and subtitles
Font and size:
Use clear, sans serif fonts in a readable size, this is usually around 22-26px for online content.
Colour and contrast:
Subtitles should be in a colour that contrasts with the background.
Positioning:
Usually at the bottom of the screen on landscape videos, but higher up on social media, to avoid competing with information at the bottom of the screen.
Need help with making your brand more accessible?
We come across many organisations that don’t have accessibility baked into their brand guidelines or websites., this is usually because the brand was developed a while ago or without these requirements considered. We are happy to advise and help you review your website and brand guidelines to ensure you comply with the WCAG 2.2 Level AA standards. Get in touch!
This article was originally a talk as part of our creative retreat series, 24 Ideas for 2024. If you’d like to attend the final ‘24 Ideas for 2024’ event in October please email us to register your interest.