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 */
: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.

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

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.

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.

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.

<!-- 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.