Understandable
Last modified on Wed 16 Oct 2024

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

Readable

Present language selection upfront (A) (AA)

3.1.1 Language of Page 3.1.2 Language of Parts

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

Figma example

Simplify content (AAA)

3.1.5 Reading Level

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

Predictable

Don't change context without user confirmation (A)

3.2.1 On Focus 3.2.2 On Input

Context of the page/screen shouldn't be changed without user confirming it in some way. Before any change happens, there needs to be a clear question and an option user can choose from. If there is not a question in ask, then user needs to have a clear confirmation action, before any context changes.

Figma example

Make navigation predictable and consistent (AA)

3.2.3. Consistent Navigation

Ensure consistent navigation across all pages by placing menus, buttons, and repeated elements in the same order. This predictability is crucial for users, especially those with disabilities, who rely on spatial memory and visual cues to navigate. Avoid changing the layout or order of these elements unless the user initiates it. For example, keep "skip navigation" links or search bars in the same spot on every page to help users quickly find and use them. Consistency improves accessibility and overall user experience.

Figma example

Stay consistent for improved accessibility (AA)

3.2.4. Consistent Identification

Start by creating a style guide with standardized labels and text alternatives for similar functions. Use clear, uniform language, such as "Download [Document Title]" for document icons. Regularly review your design elements to ensure consistency and conduct user testing with assistive technologies to catch any discrepancies. By maintaining a predictable experience, you'll improve accessibility and usability for all users, especially those relying on screen readers.

Figma example

Keep help options consistent across your design (A)

3.2.6 Consistent Help

Ensure that help options such as contact links, chatbots, or support pages are consistently positioned in your design. While not every page needs to have a help option, those that do must maintain a consistent order and location. For instance, a "Contact Us" link could always be placed in the footer, a help button in the main navigation, or you can have a sticky chatbot positioned in the lower right corner on all relevant pages.

Figma example

Input assistance

Clearly identify errors (A) (AA)

3.3.1 Error Identification 3.3.3 Error Suggestion

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

Figma example

Provide labels and cues to avoid mistakes (A)

3.3.2 Labels or Instructions

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 to clearly understand which form are they filling out.

Figma example

Enable review and confirmation to prevent mistakes (AA)

3.3.4 Error Prevention

When designing interfaces that involve the input of legal or financial information, it's crucial to implement measures that help prevent errors. Ensure that users are provided with clear instructions and validation messages throughout the data entry process. Offer confirmation dialogues before finalizing transactions to allow users to review their information.

Figma example

Avoid redundant entries in multi-step processes (A)

3.3.7 Redundant Entry

When designing multi-step processes, avoid asking users to re-enter the same information within the same task or session. Instead, auto-fill information or provide options like checkboxes and drop-downs to reuse previously entered data. This reduces cognitive load and prevents users from making mistakes.

Figma example

Provide accessible authentication options (AA)

5.3 Biometrics 3.3.8 Accessible Authentication (Minimum) (AA)

For authentication always provide alternative identification methods, both biometric (like fingerprints, face-ID etc) and non-biometric, to ensure accessibility for all users, especially those with disabilities. Be mindful that authentication should not require cognitive function tests, like recalling passwords, unless you offer alternatives. Consider integrating support for password managers and enabling copy-and-paste options to help reduce the cognitive load.

Figma example