1. Design System
  2. Accessibility

Web Accessibility

Web Accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. This also covers other groups such as those using mobile devices or those with slow network connections.

Accessibility Principles

We should create content that everyone can use - including people with disabilities.

The Web Accessibility Initiative (WAI) guidelines and success criteria are organised around the following four principles.

Anyone who wants to access and use the Web must have content that is:

  1. Perceivable
    • Information must be presented to users in ways they can perceive with all of their senses - sight, hearing and touch.
  2. Operable
    • Users must be able operate interface components and navigation, it cannot require interaction a user cannot perform.
  3. Understandable
    • The user must be able to understand the information and interface operation, it cannot be beyond their understanding.
  4. Robust
    • Content must be robust enough that it can be interpreted reliably by evolving user agents and assistive technologies.

If content is designed with these four principles in mind, users will be able to access and use Web content.

Colour contrast

It is important that our web pages meet web accessibility standards, including the minimum contrast ratios that the WCAG 2.1 specifies for text and background colour combinations. This helps users who are colour blind or have low vision, but it also improves usability and readability for all users.

We aim to for text and background colour combinations to comply to WCAG 2.1 Level AA. To meet this, we should make sure that the colour contrast on body text is 4.5:1 and 3:1 on large text (24px). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

We have used the following tools and information to achieve compliance:

WAI-ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a technical specification published by the World Wide Web Consortium (W3C) that defines ways to make Web content and Web applications (especially dynamic content) more accessible to people with disabilities.

ARIA is a set of special accessibility attributes which can be added to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar.