2.4.11 — Focus Appearance (Level AA) AA

What it means: The keyboard focus indicator must be highly visible. The minimum area of the focus indicator must be at least the area of a 2px thick perimeter of the focused control, or at least 2px thick on the shortest side.

Why it matters: Users with low vision need to clearly see where keyboard focus is. WCAG 2.1 only required a visible focus indicator — 2..2 adds specific size requirements.

/* Good focus indicator meeting 2.4.11 */
:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Or a background color change + border */
:focus {
    background-color: #e0e0e0;
    border: 2px solid #000;
}

2.4.12 — Focus Not Obscured (Minimum) (Level AA) AA

What it means: When an element receives keyboard focus, it must not be completely hidden by other content (like sticky headers or modals).

Why it matters: Sticky headers, chat widgets, and cookie banners often obscure focused elements. Users can't see where they are.

How to test: Tab through your site. Can you always see the focused element? If a sticky header hides it, that's a violation.

/* Fix: Ensure sticky headers don't hide focus */
/* Add scroll margin to anchor targets */
:target {
    scroll-margin-top: 80px; /* Adjust based on header height */
}

2.4.13 — Focus Not Obscured (Enhanced) (Level AAA) AAA

What it means: An even stricter version of 2.4.12. The focused element must not be obscured at all — not even partially.

Why it matters: For users with cognitive disabilities, even partial obstruction can be disorienting.

2.5.7 — Dragging Movements (Level AA) AA

What it means: Any functionality that requires dragging (like sliders or drag-and-drop) must also have a single-pointer alternative (like tapping up/down buttons).

Why it matters: Users with motor impairments may not be able to perform precise dragging movements.

<!-- Good: Provide both drag AND buttons -->
<div class="slider">
    <button onclick="decrease()">-</button>
    <div class="drag-area" draggable="true"></div>
    <button onclick="increase()">+</button>
</div>

2.5.8 — Target Size (Minimum) (Level AA) AA

What it means: Touch targets (buttons, links) must be at least 24x24 CSS pixels (down from 44x44 in WCAG 2.1's AAA criterion).

Why it matters: Small buttons are hard to tap on mobile devices. This is now a Level AA requirement (not just AAA).

Exception: Inline links, sentence links, and targets in a sentence can be smaller if there's enough spacing.

/* Ensure buttons are at least 24x24px */
.button {
    min-width: 24px;
    min-height: 24px;
    padding: 8px;
}

/* For mobile, 44x44 is still recommended */
@media (max-width: 768px) {
    .button {
        min-width: 44px;
        min-height: 44px;
    }
}

3.2.6 — Consistent Help (Level A) A

What it means: If your website provides help mechanisms (contact info, chat, help desk), they must be in the same relative order across all pages.

Why it matters: Users with cognitive disabilities need consistent placement to find help when needed.

<!-- Good: Help button in same location on all pages -->
<footer>
    <a href="/help">Help</a>
    <a href="/contact">Contact Us</a>
</footer>

3.3.7 — Redundant Entry (Level A) A

What it means: Information that users previously entered must be auto-populated or easily selectable, unless re-entering is essential.

Why it matters: Users with cognitive disabilities shouldn't have to re-enter the same information multiple times across different steps or pages.

<!-- Good: Auto-populate previously entered info -->
<input type="text" name="name" value="">
<input type="email" name="email" value="">

3.3.8 — Accessible Authentication (Minimum) (Level AA) AA

What it means: Authentication processes (login, password reset) must not rely on cognitive function tests like remembering passwords or solving puzzles — unless there's an alternative.

Why it matters: Password memory, CAPTCHAs, and "remember this pattern" tests exclude people with cognitive disabilities.

Exceptions: Copying from a password manager, or a secondary authentication method (like email link).

<!-- Good: Provide multiple login options -->
<button>Log in with email link (no password)</button>
<button>Log in with password</button>
<button>Log in with Google</button>

3.3.9 — Accessible Authentication (Enhanced) (Level AAA) AAA

What it means: An even stricter version of 3.3.8. No cognitive function tests at all — only methods that don't rely on memory or problem-solving.

Example: WebAuthn (biometrics), passkeys, or email magic links.

4.1.3 — Status Messages (Level AA) AA

What it means: Status messages (like "5 items added to cart" or "Form submitted successfully") must be announced to screen readers without requiring focus changes.

Why it matters: Dynamic content updates should be announced automatically, not just visually.

<!-- Good: Use role="status" for announcements -->
<div role="status" aria-live="polite">
    <!-- JavaScript updates this div -->
    {{ statusMessage }}
</div>