Level A - Understandable
Last modified on Fri 17 Mar 2023

All content on the page/screen must be readable and understandable to users.

Hierarchy & Layout

Show a page title

Ensure all pages and screens have a title that accurately represents the content of the page/screen the user is viewing.

Figma example

Structure & element order

When designing, think of the intended order of the elements. Align with developers what should be the correct order of the items so that users who use screen readers can understand the right order and context of the read elements.

Figma example

Grouping sections

When designing, aim to have distinctive groups of items, each with its own heading. If the group doesn’t have a visual heading, align with developers on the different sections of your design, or mark it in your design file. That way, when using screen readers, users can understand all the different groups and sections of the designed page/screen more easily and decide which section to skip if needed.

Figma example

Content Understanding & Readability

Language selection

If the content of your product has the option to support multiple languages, then make sure language selection is presented upfront before the user can continue interacting with the product.

Figma example

Do not change context without user confirmation

The context of the page/screen shouldn’t be changed without the user confirming it somehow. Before any change happens, the user must have a clear question and an option to choose from. If there is no question, then the user needs to have a clear confirmation action before any context changes.

Figma example

Clearly identify errors

Clearly indicate where and what type of error has taken place. Focus on the element in question, provide an error text next to it, and describe the issue.

Figma example

Provide labels and cues to avoid mistakes

Avoid user mistakes by adding simple instructions or cues, so users understand what is asked of them. Also, don’t avoid using labels, as they help users clearly understand the form they are filling out.

Figma example

Simplify content

Use simple sentences and communicate in a conversational tone, friendly and polite. Don’t confuse users with too much information and complicated words or descriptions. By using simple sentence formulation, content is understood faster and more easily.

Figma example

Use visual support for complex information

Use images, colors, and shapes as support to visually help users digest complex graphs or blocks of information. But do not rely solely on it.

Figma example

Don’t rely solely on sensory characteristics

Don’t rely only on the shape, color, size, visual location, orientation, or sound of an element for users to understand its intent, as visually impaired users will not be able to understand or perceive it. Use clear instructions or labels that provide meaning to users.

Figma example

Support scalable UI

Be aware that users can increase or decrease font sizes on their browsers or devices. This may impact the readability of elements. Make sure your UI can adapt to these changes. Consider designing your elements for scenarios where font size is increased by its maximum and decreased to its minimum.

Figma example