# Accessibility

Accesibility must be a fundamental part of our content to make our experiences inclusive.

These guidelines explain how to make websites and apps accessible for all users. This includes people with the following impairments:
  • Vision
  • Hearing
  • Mobility
  • Thinking & Understanding

# WCAG checklist

The WCAG (Web Content Accessibility Guidelines) are a set of recommendations for content that meets the needs of individuals and organizations.

Here are the full requirements to meet WCAG: WCAG guidelines

# Colour contrast ratio

Insufficient contrast in our products makes content hard to read for everyone. Consider the colours you use and the size of fonts when creating content. A colour contrast calculator can help you accurately analyse the contrast in our products.

For our websites, we aim to meet the following standards:

Level AA 4.5:1 – Second level of conformance set by WCAG – requirements that web developers should satisfy, otherwise some groups may find it difficult to access the web content. We will meet this standard on most of our content, unless it isn’t technically feasible to do so with the chosen format.

# Users with disabilities

Following the WCAG checklist, content needs percievable, operable, and understandable to all users, regardless of ability.

  • Make sure content can be interacted with using a screen reader or other assistive technology (such as screen magnifiers and high-contrast modes).

  • Give imagery appropriate and understandable alt text.

  • Provide keyboard functionality. This includes using the tab key to select different elements on a page and using enter to select the focused element.

# Designing for touch

Touch

Touch targets refer to the areas of the screen that respond to user input. The target is usually the input itself, but it can also refer to the area around it. The touch target areas should be a minimum of 48px.

Fig 10

Fig 10. Recommended touch areas for icons.

Don’t forget to follow the ‘8px spacing’ guideline above so that larger target areas will align to the baseline grid.

It is best to make touch targets bigger rather than smaller as this will benefit our older users or users who may have motor/visual impairments.

Consider that most users prefer using a thumb to tap buttons and scroll, whilst holding the device in the same hand.

Pointer

Target areas for a mouse, trackpad or stylus should be a minimum of 24px, and at least 8px apart.

# Patterns and components

It's important to consider how customers interact with our sites. For instance, people tend to tap on the button of a radio input, or the box of a checkbox (even if the whole area is tappable). Our checkboxes, radio buttons and toggle switches are designed with this in mind.

See patterns for more information.

Last Updated: 10/6/2020, 8:34:39 AM