Understandable Guidelines — WCAG 3.1 Through 3.3
In this tutorial, you will learn about Understandable Guidelines. We cover key concepts, practical examples, and best practices to help you master this topic.
WCAG Understandable guidelines ensure users can comprehend content through readable text (3.1), predictable behavior (3.2), and input assistance that prevents and corrects errors (3.3).
What You'll Learn
You will learn the three understandable guidelines, their key success criteria, and how to implement readable content, predictable navigation, and helpful error handling.
Why It Matters
If users cannot understand your content or how to use your interface, they cannot complete their tasks. Understandable violations are especially impactful for users with cognitive disabilities.
Real-World Use
DodaTech's Durga Antivirus Pro uses plain language for threat descriptions, consistent navigation across all screens, and clear error messages that suggest fixes.
flowchart TD A[Understandable Guidelines] --> B[3.1 Readable] A --> C[3.2 Predictable] A --> D[3.3 Input Assistance] B --> E[Language, reading level, pronunciation] C --> F[Consistent navigation, consistent identification] D --> G[Error prevention, labels, suggestions]
Guideline 3.1 — Readable
Make text content readable and understandable. This includes identifying the language of the page and providing definitions for unusual words.
Key Criteria
3.1.1 Language of Page (A). 3.1.2 Language of Parts (AA). 3.1.3 Unusual Words (AAA). 3.1.4 Abbreviations (AAA). 3.1.5 Reading Level (AAA).
<!-- Set page language -->
<html lang="en">
<!-- Identify language changes within page -->
<p>The file contains <span lang="fr">malware</span> (French for malicious software).</p>
<!-- Explain jargon -->
<dl>
<dt>Rootkit</dt>
<dd>A type of malware that hides deep in your operating system.</dd>
</dl>
Guideline 3.2 — Predictable
Make web pages appear and operate in predictable ways. Navigation should be consistent across pages. Components with the same functionality should be identified consistently.
Key Criteria
3.2.1 On Focus (A). 3.2.2 On Input (A). 3.2.3 Consistent Navigation (AA). 3.2.4 Consistent Identification (AA). 3.2.5 Change on Request (AAA).
<!-- Consistent navigation across pages -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/dashboard">Dashboard</a></li>
<li><a href="/scans">Scans</a></li>
<li><a href="/settings">Settings</a></li>
<li><a href="/help">Help</a></li>
</ul>
</nav>
Guideline 3.3 — Input Assistance
Help users avoid and correct mistakes. Provide clear labels, descriptive error messages, and suggestions for fixing errors.
Key Criteria
3.3.1 Error Identification (A). 3.3.2 Labels or Instructions (A). 3.3.3 Error Suggestion (AA). 3.3.4 Error Prevention (Legal, Financial, Data) (AA). 3.3.7 Accessible Authentication (AA). 3.3.8 Accessible Authentication (No Exception) (AA).
<!-- Accessible form with input assistance -->
<form>
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email" required
aria-describedby="email-hint email-error">
<p id="email-hint">Enter your work email address</p>
<p id="email-error" role="alert" hidden>
Please enter a valid email address (e.g., name@company.com)
</p>
<button type="submit">Subscribe</button>
</form>
// Client-side validation with accessible error messages
function validateEmail(email) {
const errorElement = document.getElementById('email-error');
if (!email.includes('@')) {
errorElement.textContent = 'Email must include an @ symbol (e.g., name@company.com)';
errorElement.hidden = false;
return false;
}
errorElement.hidden = true;
return true;
}
Accessible Authentication (WCAG 2.2)
3.3.7 requires that authentication does not rely on cognitive function tests like remembering passwords, solving puzzles, or transcribing codes. Biometrics, security keys, and password manager support are acceptable.
<!-- Accessible authentication options -->
<form>
<label for="password">Password</label>
<input type="password" id="password" autocomplete="current-password">
<button type="button" onclick="webAuthnLogin()">
Sign in with fingerprint or security key
</button>
<button type="button" onclick="magicLinkLogin()">
Email me a magic link
</button>
</form>
Common Mistakes
1. Missing Lang Attribute
Without lang="en", screen readers may use incorrect pronunciation. Every HTML document needs a lang attribute.
2. Inconsistent Navigation
Moving the search bar or changing menu order between pages disorients users with cognitive disabilities.
3. Generic Error Messages
Error 0x87E10BD0 tells the user nothing. Connection failed. Check your internet and try again tells the user what to do.
4. No Labels on Forms
Inputs without associated labels are inaccessible. Every input needs a label or aria-label.
5. Cognitively Demanding Authentication
CAPTCHAs that require users to identify objects or transcribe text violate 3.3.7. Use alternatives like biometrics or security keys.
6. Changing Content on Focus
When an element receives focus, it should not trigger significant changes like navigation or form submission.
7. No Error Prevention for Important Actions
Delete actions without confirmation can cause irreversible data loss. Always confirm destructive actions.
Practice Questions
1. What does Guideline 3.1 (Readable) require?
Identifying the language of the page and providing definitions for unusual words or abbreviations.
2. What is the difference between 3.2.3 Consistent Navigation and 3.2.4 Consistent Identification?
3.2.3 requires navigation to appear in the same order across pages. 3.2.4 requires components with the same function to be identified consistently.
3. What is required for accessible authentication in WCAG 2.2?
Authentication must not rely on cognitive function tests. Options include biometrics, security keys, and password manager support.
4. What makes an error message accessible?
It identifies the error, explains why it happened, and suggests how to fix it.
5. Challenge: Review a form on a website you use. Evaluate it against 3.3.1, 3.3.2, and 3.3.3. Are errors identified? Are labels present? Are suggestions provided?
FAQ
Mini Project
Audit a multi-step form for all three understandable guidelines. Check language declaration, navigation consistency, labels, error messages, and error prevention. Document findings.
What's Next
Learn about Robust Guidelines 4.1 covering compatibility with assistive technologies. Then explore Success Criteria Structure to understand how criteria are organized.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro