Layout

Ensure that your designs and layouts are organized in a way that is both intuitive and accessible for all users.

• Screens are responsive and all breakpoints are designed
• Users cannot scroll the (entire) screen both horizontally and vertically
• The orientation is not locked to portrait or landscape

Colour

Ensure sufficient contrast, avoid reliance on colour alone, and use accessible palettes for clarity and usability.

• The contrast between all text and the background has a contrast ratio of at least 4.5:1
• The contrast between form inputs/UI elements and the background has a ratio of at least 3:1
• Information is not conveyed by colour alone (i.e. within charts and graphs)

Interaction and navigation

Design clear, accessible paths for seamless user actions and keyboard-friendly navigation.

• Interactive elements have a 24 touch target size (Added for 2.2)
• Links do not solely rely on colour
• Gestures and device motion functions can be completed with simple single touch and keyboard press (Modified for 2.2)
• Focus states need to be clearly defined and cannot be obscured (Modified for 2.2)

Forms and errors

Create accessible forms with clear labels, instructions, and intuitive error feedback.

• Form labels are always visible and are clear and consistent.
• There are error states with clear directions how to fix issues
• Avoid asking for the same information more than once (Added for 2.2)

Audio, animation and video

Provide accessible media with captions, transcripts, user controls, and motion-reduction options.

• Audio or video that lasts longer than 3 seconds have controls on the player
• Auto scrolling, moving or updating content over 5 seconds can be paused or stopped
• Nothing flashes more than three times in a second

UX Writing and content

Craft clear, concise, and inclusive content that is easy to understand and accessible to all users.

• Should not have text within the image such as headlines and calls to actions
• Contains structured headings so people using screen readers can navigate the page
• Copy does not truncate or use ellipsis
• Text is not justified (aligned to both the left and the right margins)
• Ensure help mechanisms are in a same place across multiple screens (Added for 2.2)