Understandable

This lesson explains Understandable in web accessibility with clear examples, practical use cases, and implementation best practices.

WCAG Understandable Principle Overview

Understandable is the third principle of the Web Content Accessibility Guidelines (WCAG). It ensures that users can understand the information presented on a website and easily interact with its interface. Content, navigation, forms, and user interactions should be clear, consistent, and predictable.

Websites that follow the Understandable principle help users avoid confusion by providing readable content, consistent navigation, descriptive labels, helpful instructions, and meaningful error messages. These practices improve accessibility for users with cognitive disabilities, learning disabilities, language barriers, and anyone using your website for the first time.

Requirement	Purpose
Readable Content	Use clear and simple language.
Consistent Navigation	Keep menus and layouts predictable.
Descriptive Labels	Clearly identify controls and inputs.
Helpful Instructions	Guide users before completing tasks.
Error Identification	Explain mistakes and provide solutions.
Predictable Behavior	Avoid unexpected interface changes.

Understandable Form Example

<label for="email">
  Email Address
</label>

<input
  id="email"
  type="email"
  aria-describedby="email-help">

<p id="email-help">
  Enter a valid email address such as name@example.com.
</p>

This example provides a descriptive label and helpful instructions before the user enters data. Clear guidance reduces errors and improves the overall user experience.

Ways to Make Content Understandable

Following the Understandable principle helps users quickly learn how your website works and successfully complete tasks without unnecessary confusion.

Technique	Purpose	Example
Plain Language	Improve readability.	Simple instructions.
Consistent Navigation	Keep interfaces predictable.	Same menu on every page.
Descriptive Labels	Clearly identify controls.	Email Address.
Helpful Error Messages	Explain how to fix mistakes.	Invalid email format.
Input Assistance	Provide examples before users type.	Password requirements.
Predictable Actions	Avoid unexpected behavior.	Buttons perform expected actions.

Understandable Best Practices

Best Practice	Description
Write Clearly	Use simple, concise, and readable language.
Keep Navigation Consistent	Place menus and controls in predictable locations.
Provide Input Guidance	Explain required formats before users enter data.
Display Helpful Errors	Describe problems and suggest corrections.
Use Meaningful Labels	Clearly identify buttons, links, and form controls.
Avoid Unexpected Changes	Do not automatically change pages or focus.

Common Understandable Accessibility Mistakes

Using technical jargon without explanations.
Changing navigation layouts between pages.
Providing unclear form labels.
Displaying generic error messages such as "Invalid Input."
Automatically submitting forms after selecting an option.
Moving keyboard focus unexpectedly.
Using inconsistent terminology across the website.
Providing instructions only after users make mistakes.

Key Takeaways

Understandable is the third WCAG accessibility principle.
Content should be clear, readable, and easy to follow.
Navigation and interactions should remain predictable.
Forms should include labels, instructions, and meaningful error messages.
Avoid unexpected interface changes that confuse users.
Following the Understandable principle improves accessibility, usability, and WCAG compliance.

Pro Tip

If a first-time visitor can understand your content, complete forms, recover from errors, and navigate your website without needing additional help, you're successfully applying the Understandable principle. Clear communication benefits every user, not only people with disabilities.