Ensure that information and the operation of the user interface are understandable to all
We have reached the third pillar of the POUR principles: Understandable. After ensuring a site is Perceivable and Operable, we must guarantee that users can also understand the information and the operation of the interface. Incomprehensible content or unpredictable navigation can create a barrier just as significant as an image without alternative text.
What Does It Mean for a Site to Be Understandable?
The principle of Understandability requires that information and the operation of the user interface be logical and easy to grasp. This means more than just readable text. It involves using clear language, providing explanations for complex terms or abbreviations, and creating a consistent and predictable navigation experience. An understandable site also helps users avoid and correct mistakes by providing clear instructions and effective validation mechanisms.
Detailed Technical Guide for the Principle of Understandability
Here are the specific rules and practical tips to ensure your site's understandability, taken directly from the official guide:
1.10. Readable: Make text content readable and understandable
- 1.10.1. [A] Language of Page: The default language of the page's content must be specified in the code.
- Tip: The HTML lang attribute must be used.
- Tip: The HTML lang attribute must be used.
- 1.10.2. [AA] Language of Parts: If content on the page uses a different language than the default, this must be specified in the code for that part.
- Tip: The HTML lang attribute should be used on the specific element.
- Tip: The HTML lang attribute should be used on the specific element.
- 1.10.3. [AAA] Unusual Words: Words that are ambiguous, unknown, or used in a technical manner must be defined through adjacent text, a list of definitions, or a glossary.
- 1.10.4. [AAA] Abbreviations: A mechanism must be available for identifying the expanded form of an abbreviation.
- Tip: The HTML <abbr> element can be used to explain an abbreviation upon its first use.
- Tip: The HTML <abbr> element can be used to explain an abbreviation upon its first use.
- 1.10.5. [AAA] Reading Level: If the text requires a reading ability more advanced than the lower secondary education level, a more easily understandable alternative must be provided.
- 1.10.6. [AAA] Pronunciation: If the pronunciation of a word is essential for understanding its meaning, it must be provided immediately after the word (via phonetic transcription) or through a link to a glossary.
1.11. Predictable: Make web pages appear and operate in predictable ways
- 1.11.1. [A] On Focus: Focusing on a page component must not initiate a change of context.
- 1.11.2. [A] On Input: Interacting with any interactive element must not produce an automatic change of context. Any change of context must be announced in advance.
- 1.11.3. [AA] Consistent Navigation: Navigational links that repeat on multiple pages must remain in the same order throughout the website.
- 1.11.4. [AA] Consistent Identification: Components that have the same functionality across multiple pages (e.g., a search icon) must be identified consistently.
- 1.11.5. [AAA] Change on Request: Changes of context must only be initiated at the user's explicit request, or there must be a mechanism to disable them.
1.12. Input Assistance: Help users avoid and correct mistakes
- 1.12.1. [A] Error Identification: Required form elements, as well as format restrictions (e.g., date format), must be marked and clearly explained in labels.
- 1.12.2. [A] Labels or Instructions: For cases requiring user action (e.g., filling a field), comprehensive labels, instructions, and even examples should be provided where possible.
- 1.12.3. [AA] Error Suggestion: If validation errors are detected, they must be clearly marked. It is mandatory that the user is given the ability to quickly access the problematic element, fix the issue, and resubmit the form.
- 1.12.4. [AA] Error Prevention (Legal, Financial, Data): For pages involving legal commitments, financial transactions, modification of personal data, or submission of test answers, a mechanism for at least one of the following must exist:
- Reversible: Submissions can be undone or changed.
- Checked: Data is checked, and the user can correct errors before submission.
- Confirmed: The user is given the opportunity to review, confirm, and correct the data before finalizing the action.
- Reversible: Submissions can be undone or changed.
- 1.12.5. [AAA] Context-Sensitive Help: Any action a user can perform must be accompanied by sufficiently informative and adjacent contextual explanations.
- 1.12.6. [AAA] Error Prevention (All): For any page where data can be entered, all three mechanisms must be available: reversibility, checking, and confirmation.
How Wawsome Ensures Understandability
Wawsome directly addresses the challenges of understandability. Our widget includes a built-in dictionary that automatically explains jargon, complex terms, and acronyms, ensuring all users can comprehend the text. Furthermore, Wawsome enhances forms by providing clear labels, precise instructions, and real-time error validation with correction suggestions. This minimizes frustration and helps users complete actions successfully, making your site not just accessible but truly user-friendly.
Conclusion
A website can be perceived and operated, but if it is not also understandable, users will still be lost. Implementing this principle ensures that your message is clear, interactions are intuitive, and the overall experience is positive and effortless.
We have now covered three of the four principles. In the final article of this series, we will explore the last principle: Robust. We will discuss how to ensure your site remains accessible as technologies and devices evolve.