4️⃣ 3.3.5 - Kontext-sensitive Hilfe
AAA 2.1
Umsetzung, Design
Ziel
Benutzern Unterstützung bereitstellen, um Fehler bei der Ausführung von Funktionen zu vermeiden, indem kontextsensitive Hilfe angeboten wird.
Beschreibung
- Kontext-sensitive Hilfe wird bereitgestellt, wenn Beschriftungen nicht ausreichen, um Funktionen verständlich zu erklären. Beispiele sind Hilfelinks neben Formularfeldern, Tooltips oder kurze Anleitungen, die bei Bedarf angezeigt werden.
- Die Hilfe ist für Benutzer leicht auffindbar und bei Bedarf abrufbar.
- Unterstützung kann in Form von Hilfelinks, Tooltips, Assistenten oder Eingabevalidierungen erfolgen.
Anforderungen
- Klare Kennzeichnung von Hilfelinks in der Nähe relevanter Formulare oder Funktionen.
- Verwendung von verständlichen Symbolen (z. B. Fragezeichen-Icons) zur Kennzeichnung von Hilfebereichen.
- Konsistente Platzierung von Hilfselementen auf allen Seiten.
- Integration von
aria-describedby-Attributen für Screenreader-Kompatibilität. - Verwendung des
title-Attributs oder Tooltips für zusätzliche Hinweise. - Validierung der Eingabeformate in Formularen mit klaren Fehlermeldungen und Korrekturvorschlägen.
- Implementierung einer Rechtschreibprüfung bei Eingabefeldern, wo relevant.
- Bereitstellung prägnanter und verständlicher Hilfetexte, die schrittweise Anleitungen geben.
- Verwendung einfacher Sprache und Vermeidung von Fachjargon, wo nicht zwingend erforderlich.
- Ergänzung der Texte mit Beispielen für die korrekte Eingabe oder Nutzung der Funktionen.
- Sicherstellen, dass Hilfetexte verständlich, prägnant und korrekt platziert sind.
- Testen der Barrierefreiheit der Hilfefunktionen mit unterstützenden Technologien.
- Überprüfung, ob alle Formulareingaben mit klaren Fehlermeldungen und Hilfestellungen unterstützt werden.
Code-Beispiele
Beispiel für Hilfelink neben einem Formularfeld:
<label for="email">E-Mail-Adresse: <a href="#email-help" aria-describedby="email-help">(Hilfe?)</a></label><input type="email" id="email" name="email" required /><div id="email-help" hidden> Geben Sie eine gültige E-Mail-Adresse im Format name@example.com ein.</div>Tooltip-Hilfe mit dem title-Attribut:
<input type="text" name="geburtsdatum" id="geburtsdatum" title="Bitte geben Sie Ihr Geburtsdatum im Format TT.MM.JJJJ ein.">