Accessibility - Best practice

Essential best practices to help you begin creating accessible document designs.

Ensure there is enough contrast between text and background colour.
Don’t rely on colour alone to convey important information, as people with colour blindness may not perceive the colours as intended.
Avoid using very bright or clashing colours, as they can cause eye strain or be difficult to read, especially those with visual impairments or sensitive to bright light.
When placing text over images or using coloured backgrounds, ensure the text remains legible and stands out.
Avoid using too many colours.

WebAIM Contrast Checker is a popular tool for evaluating the colour contrast ratio between two colours.

Always write with accessibility in mind by using short, simple sentences.
Use plain language, and avoid jargon and abbreviations.
Break content into small paragraphs with white space for easier reading.
Make sure your key message is at the beginning of each section or paragraph.
Use descriptive text to explain the purpose of a button rather than vague language like "click here'.
Avoid writing in all caps - this can be can be difficult to read as it reduces the visual distinction between letters.

Use a Story panel for any Headings, and ensure a Text panel is used only for body text.
- Story panels use H2 for Headline, Paragraph for Strapline and Paragraph for Body.
- Text panels use Paragraph for Body.
Avoid underlined/bold/italic text, as this can be difficult for dyslexic readers.
Most screen readers don't announce bold or italic text, so any emphasis is lost on a screen reader, a underlined text can be mistaken for a link.
Avoid using a font that is too small to read - consider using interactivity, such as a More Information pop-up box, if you would like to add more content.
Ensure there is suitable spacing between lines, as tight line spacing can cause lines to crowd together, making it harder for users to distinguish between them.
Ensure there is plenty of white space between paragraphs, headings, and sections. This creates a cleaner, less cluttered appearance and improves readability.
Add adequate margins around content to avoid the text being too close to the edge of a panel or page.

Accessible fonts should be easy to see, read and understand for everyone.
Avoid decorative or overly complex fonts that might be hard to read.
Use standard web-safe fonts that are widely supported across devices and platforms - suggestions include Calibri, Tahoma, Arial, Helvetica and Verdana.
Stick to a small set of font families for consistency and readability. Don't mix too many different fonts in one page.

Avoid images that include lots of text, as this won't be read out by screen readers.
If text in an image is necessary, ensure that the font is legible, has enough contrast, and is accompanied by alt text describing the message.
Include alt text for images:
- aim for 125 characters or less.
- describe the content of the image without being too wordy.
- avoid redundant phrases like "image of" or "picture of" as screen readers already know it's an image.

Design isn't just about aesthetics - it's about creating an experience that’s usable and accessible for all users.

Whitespace (or negative space) is just as important as the content itself, as it helps to improve readability, navigation, and the overall visual appeal of your design.
Ensure spacing is consistent in your design, such as margins, padding, and line spacing—this helps to create a balanced design and makes content easier to digest.
Ensure each piece of interactivity is spaced far enough apart to avoid accidental clicks.
Position content in a way that aligns with natural reading patterns - most users read left to right and top to bottom, so place key your content accordingly.
Place important call-to-action buttons toward the centre or bottom of the page to catch users’ attention as they reach the end of a section.
Use fixed navigation that remains visible.
Consider using a menu to help users navigate.