Level A - Operable
Last modified on Fri 17 Mar 2023

Users must be able to operate and navigate through the content of your digital product without obstacles.

Navigable

Skip repetitive content blocks

Have the option to skip repetitive content that repeats itself on every page/screen so the users with disabilities who use screen readers can click on it and bypass the repetitive blocks to get to the main content more easily.

Figma example

Allow users to exit a situation

Enable users to easily get out of a situation (for example, a window) by providing a clear closing option.

Figma example

Avoid ambiguous links or buttons that don’t convey much meaning. Instead, be more descriptive so that the purpose of the button or a link could be understood by the text alone.

Figma example

Ensure touch-target area is big enough

When designing buttons or any clickable element, make sure that the touch target area is visible enough for users to understand the element is clickable. Aim to have at least 48px of width and 48px of height. Even if you create smaller elements, such as icons, the touch target area should be 48x48px. Ensure clickable elements are separated by 8px of space or more.

Figma example

Focus state & order

Define focus states for your actionable elements and align with developers on the right focus order. Users who navigate with keyboards, voice-overs, or any support assistive technology, need to have elements pointed out as it helps them understand where they are within the page/screen. Default-focused states are provided by different browsers and mobile platforms when the screen reader feature is active. However, default focus states are only sometimes obvious or may not function well with your design.

Figma example

Time, seizures & physical reactions

Extend time-dependant functionalities

Ideally, don’t have content or any performance on websites or apps that is time-dependent. But if there’s a need to have one (e.g. security tokens), it is important that users see and are aware of the time remaining, and have the option to extend the time in order to perform.

Figma example

Turn off automatic updates

If you have content that moves or updates automatically, users need to have the option to pause, hide or stop these automatic movements from happening.

Figma example

Reduce blinking and flashing elements

Avoid using flashing elements that may provoke seizures or physical reactions. If you are using flashing elements, make sure the flash rate is three times per second or less. Ensure that flashing objects cover only a small area if you can opt for static content instead of moving, blinking or flashing.

Figma example