Accessibility testing our inclusivity report

A guide to following accessible design guidelines

If we’re truly to be advocates of inclusivity and accessibility, we have to practice what we preach when it comes down to our own communications. So we produced our Inclusive Communications Report using the latest best practice accessible design guidelines.

Here are our top tips and advice for designing with accessibility in mind.

 

1: Colour and brightness contrasts

In the UK there are approximately 3 million people with some degree of colour vision deficiency (around 4.5% of the entire population).

All the colours we use in our report adhere to AAA accessibility standards - the best possible experience for all users.

Toned down the shade of pink to red (throughout the report) to improve colour contrast to AAA standard

2: Font size and legibility

There are almost 2 million people living in the UK with sight loss that may affect their ability to read.

Our report uses sentence case with a minimum point size of 12pt - considered the smallest size at which most people can read comfortably.

Improved colour contrast and use of a consistent, larger font. Using bold to highlight, rather than changing point size.

3: Figures and graphs

Graphs are tricky as they have to:

  • Present the data in a way which is simple to understand and digest.
  • Use consistent, contrasted colours.
  • Ensure data labels are large enough and legible.

We used simple bar charts and new, accessible colours were added to our brand colour palette. Every chart is readable in black and white (using texture where needed) and we added the data in a tabular format.

Changed colours and added a pattern to improve contrast. Increased legend size and added data in a tabular format to the digital PDF.

4: Layout and imagery

Best-practice says text should be left-aligned, non-justified and arranged in short, simple paragraphs to give a clean, uncluttered layout.

Changed to a simpler, two-column layout. Moved quotes in-line and highlighted with bold and colour. Added page numbers.

The imagery we used represents the diverse range of people we spoke to in our research.

We used a tinted overlay on the images to improve legibility and the contrast for the quotes used. Descriptive, alternative text was added to all images in the report to assist those using screen readers.

Using imagery to represent a diverse range of people. Added a gradient to improve text contrast & legibility.

5: Set up unique text layers and export tagging

Each unique text style was added to the paragraph styles panel in Adobe InDesign – this enables it to be tagged and read out by screen readers.

Export tagging creates a hierarchical structure between headings, subheadings and paragraph copy. This structure helps assistive technology when content is read out loud.

Set up all unique text layers as separate paragraph styles

6: Set the reading order

Each layer has to be added in chronological order in the articles panel in InDesign.

With print layouts, it’s not obvious for screen readers to know which paragraph comes next. By manually defining the reading order, we ensure the content is read out in a logical order.

Each layer is added chronologically to set the reading order

7: Testing the document

Even when best practice has been followed, always make sure there’s time to test your design. Testing highlights issues and quirks that are often easily missed within the design process.

We used three different testing methods on our report.

Method one: Screen reader testing

We use a screen reader to run through every page of our report. This allows us to:

  • Check the reading order is correct.
  • Estimate the report reading time.
  • Pick up on any final spelling and grammar mistakes.

Method two: Acrobat accessibility checker

Acrobat has a built-in feature that performs a thorough accessibility check. This ensures every element of our report conforms to the highest accessibility standards.

Method three: User testing

Always remember to test your design with users. We completed two rounds of internal user testing to gather feedback.

Both rounds of testing threw up issues we’d failed to spot and are difficult to test for using the other methods. User testing allowed us to pick these issues up and fix them.

 

CDS' Accessible Design Checklist

If you want to make sure the PDFs you produce are accessible, here’s what you need to do:

  1. Ensure you use accessible colours, fonts, layout and imagery.
  2. Make sure graphs can be easily understood and make sure data is available in a tabular format.
  3. Tag your PDF.
  4. Include alternative text for all images.
  5. Set a reading order to ensure those using screen readers can navigate the content.
  6. Always leave time to test with real users and refine your creative

Want to find out more about Inclusivity and Accessibility? Download our Inclusive Communications Report, 2019.

Blog authors: Ash Pennington, UX Designer & Radhika Ramdihal, Designer

Go back to News page