Tastatur

Scrollbare Bereiche müssen per Tastatur erreichbar sein

Regel: scrollable-region-focusable
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Ein Bereich mit eigener Bildlaufleiste und ohne fokussierbaren Inhalt lässt sich mit der Tastatur gar nicht scrollen. Alles, was darin unterhalb sichtbar wäre, ist schlicht unerreichbar.

So beheben Sie es

Setzen Sie tabindex="0" auf den scrollbaren Container, damit er den Fokus erhalten kann.
Geben Sie ihm eine Rolle und einen Namen (role="region" mit aria-label), damit sein Zweck angesagt wird.
Achten Sie darauf, dass der Fokusrahmen am Container selbst sichtbar ist.

Im Markup

Fehlerhaft

<div class="log" style="overflow-y: auto; max-height: 12rem">...</div>

Korrekt

<div class="log" style="overflow-y: auto; max-height: 12rem"
     tabindex="0" role="region" aria-label="Event log">...</div>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

2.1.1 Tastatur (öffnet in neuem Tab) — WCAG-Stufe A
2.1.3 Tastatur (keine Ausnahme) (öffnet in neuem Tab) — WCAG-Stufe AAA

Weiterführende Quellen

Deque University zu scrollable-region-focusable (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.