‘Animation from Interactions’ requires that users can disable motion animation.

Introduction

Animations on a website can distract users and, in some cases, cause nausea. Avoiding animated elements triggered by the user (for example parallax scrolling or a ‘page loading’ animation) can help these users enjoy the website.

How to Pass ‘Animation from Interactions’

Don’t use motion animation on your

Animation from Interactions (2.3.3 – Level AAA)Read more

Allow users to turn off or remap single-key character shortcuts. 

Introduction

Keyboard shortcuts can help some users, but cause difficulty for those using speech input and some users with motor impairments. They can also cause issues on mobile screens as the functional area is reduced on a mobile keyboard.

For speech input users, single-key character shortcuts (for example

Character Key Shortcuts (2.1.4 – Level A)Read more

When hover or focus triggers content to appear, it is dismissible, hoverable and persistent.

Introduction

Additional content triggered by keyboard focus or mouse hover can cause accessibility issues for users with visual or cognitive impairments. Additional content can surprise users, prevent them completing a task or obscure content.

To overcome these issues, users must be able to understand

Content on Hover or Focus (1.4.13 – Level AA)Read more

Content and function retain meaning when users change elements of text spacing.

Introduction

Users with visual or cognitive impairments may wish to amend the default spacing around text content to make it easier for them to read and understand. When they do so, the content should remain visible in full.

How to Pass ‘Text Spacing’

Content and function remain

Text Spacing (1.4.12 – Level AA)Read more

The contrast between user interface components, graphics and adjacent colours is at least 3:1.

Introduction

All users benefit from a good contrast between the components on your website and the colour around them.

Some users with visual impairments need a stronger contrast than others to fully distinguish and use components such as input fields, buttons and controls, so getting

1.4.11 – Non-Text Contrast (Level AA)Read more

For ‘Reflow’, you must ensure all content retains meaning and function without scrolling in two dimensions. 

Introduction

Some users with visual impairments need to resize text to read it comfortably. 

When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction – horizontally and vertically.

How to Pass

Reflow (1.4.10 – Level AA)Read more

The purpose of all components must be programmatically determinable..

Introduction

Users often set personal preferences in their browser or assistive technology to help them understand websites. By ensuring components are understandable by these technologies, users can experience websites in the way that best suits their needs.

Users with cognitive impairments (such as problems with memory, focus, language and

1.3.6 – Identify Purpose (Level AAA)Read more

‘Identify Input Purpose’ requires the purpose of input fields to be programmatically determinable.

Introduction

All users, but particularly those with cognitive impairments, benefit from programmatically determinable input fields. These allow assistive technologies to understand the purpose of fields and present them in a preferred format to the user.

In addition, users with motor impairments benefit from autocomplete on forms by

Identify Input Purpose (1.3.5 – Level AA)Read more

Your website adapts to portrait and landscape views.

Introduction

Some users have a preferred orientation (portrait or landscape) or physical requirements and need content to adapt to their preference. Others have visual impairments and may find one orientation easier to use.

Most websites pass this guideline as they are responsive and adapt to the user’s chosen orientation.

How

1.3.4 – Orientation (Level AA)Read more