Prüfpunkt 1.4.13Stufe AATastatur und Fokus
Wie müssen Tooltips und Einblendungen auf Websites bedienbar sein?
Einblendungen, die bei Mauskontakt oder Tastaturfokus erscheinen — Tooltips, Untermenüs, Info-Blasen — müssen drei Bedingungen erfüllen: Der Besucher kann sie ohne Mausbewegung wieder schließen, meist mit der Escape-Taste. Er kann die Maus auf die Einblendung bewegen, ohne dass sie verschwindet. Und sie bleibt stehen, bis er sie selbst schließt oder weiternavigiert.
Drei Regeln für jede Einblendung
Wer mit starker Bildschirm-Vergrößerung arbeitet, sieht immer nur einen Ausschnitt der Seite. Öffnet sich bei Mauskontakt ein Tooltip, verdeckt er in der vergrößerten Ansicht schnell genau den Text, den der Besucher gerade liest — und ohne Schließmöglichkeit sitzt er fest. Daher die erste Regel: wegschaltbar, typischerweise per Escape-Taste. Die zweite Regel betrifft dieselbe Gruppe: Um eine Einblendung vergrößert zu lesen, muss man die Maus dorthin bewegen können — verschwindet sie beim Verlassen des Auslösers sofort, ist ihr Inhalt unerreichbar. Die dritte Regel verlangt Beständigkeit: Eine Einblendung, die nach wenigen Sekunden von selbst verschwindet, ist für langsame Leser wertlos. Klassische Problemfälle sind selbstgebaute Untermenüs und Info-Symbole in Formularen.
So geht unsere Prüfung mit Einblendungen um
Einblendungen zeigen sich erst im Zusammenspiel: Man muss die Maus über den Auslöser führen, die Escape-Taste drücken, die Verweildauer beobachten. Unser Messkern führt auf Ihrer Seite gezielte, passive Interaktionen aus — er wandert etwa mit dem Tastaturfokus durch die Seite und beobachtet das Verhalten. Ein vollständiges Urteil über alle drei Bedingungen für jede einzelne Einblendung liefert das aber nicht; nach unserem Grundsatz gilt hier ohne echten Nachweis nichts als bestanden. Der Bericht weist das Kriterium deshalb als menschlichen Prüfpunkt aus. Beim Gold-Standard bedient ein Prüfer die Einblendungen Ihrer Seite mit Maus und Tastatur durch und dokumentiert jede, die sich nicht schließen lässt, flüchtig verschwindet oder unberührbar ist.
Beispiele
Tooltip nur beim Überfahren
<span class="hilfe" title="Die Kundennummer steht auf der Rechnung oben rechts.">?</span><button type="button" aria-describedby="hilfe-knr" aria-expanded="false">Wo finde ich das?</button>
<p id="hilfe-knr" hidden>Die Kundennummer steht auf der Rechnung oben rechts.</p>Eine Einblendung muss per Tastatur erreichbar sein, mit Escape schließen und stehen bleiben, solange der Zeiger darauf ruht.
So gehen Sie es an
- Fahren Sie mit der Maus über die Info-Symbole und Menüs Ihrer Seite und drücken Sie Escape — die Einblendung sollte sich schließen.
- Bewegen Sie die Maus vom Auslöser auf die Einblendung selbst — sie muss dabei geöffnet bleiben.
- Entfernen Sie Zeitschaltungen, die Einblendungen nach wenigen Sekunden automatisch schließen.
- Bevorzugen Sie Klick statt Mauskontakt als Auslöser — was per Klick öffnet und schließt, erfüllt die Regeln fast von selbst.
- Bitten Sie Ihre Agentur, bei Untermenüs und Tooltips auf bewährte, zugängliche Fertigbausteine zu setzen statt auf Eigenbauten.
Weiter im Prüfbereich Barrierefreiheit
- Warum muss eine Website ohne Maus bedienbar sein?Jede Funktion einer Website muss per Tastatur erreichbar sein. Was WCAG-Kriterium 2.1.1 verlangt und wie unser Prüfservice es mit echten Tastendrücken misst.
- Was ist eine Tastaturfalle auf einer Website?Eine Tastaturfalle hält den Tastaturfokus gefangen: Wer hineingerät, kommt ohne Maus nie wieder heraus. So erkennen und vermeiden Sie sie.
- Warum brauchen Tastenkürzel aus einem einzelnen Buchstaben eine Abschaltung?Kürzel aus einem einzelnen Buchstaben lösen bei Sprachsteuerung ungewollt aus. WCAG 2.1.4 verlangt: abschaltbar, umbelegbar oder nur bei Fokus aktiv.
- Warum müssen Zeitlimits auf Websites verlängerbar sein?Zeitlimits müssen abschaltbar, anpassbar oder verlängerbar sein, weil Menschen unterschiedlich schnell arbeiten. Das verlangt WCAG-Kriterium 2.2.1.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Glenn Carstens-Peters, CC0
.jpg){kind=link}