Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015
ARIA-Tooltips für Links
- zurück Tooltips für Formularelemente können mit ARIA barrierefrei umgesetzt werden.
Demo #2: Link im Fließtext
In einem Text kommt ein Link mit einem TooltipZusätzliche Informationen zum Linkzweck vor. Der Tooltip muss per Tastatur zugänglich sein und — sofern er Zusatzinformationen enthält — für Screenreader zugänglich sein.
Demo #3: Verlinkte Grafik
Demo #4: Links, die einen Tooltip benötigen
- [Alt + 7: Suche ]
- [Alt + 8: Übersicht dieser Seite ]
- [Alt + 9: Kontakt ]
- [Alt + 4: Glossar ]
- [Alt + 5: (frei verfügbar) ]
- [Alt + 6: Gesamtübersicht / Sitemap ]
- [Alt + 1: Hilfe ]
- [Alt + 2: Nächste Seite ]
- [Alt + 3: Vorherige Seite ]
- [Alt + 0: Startseite ]
- AccessKey - Informationen über Tastaturkürzel
Links
- Schritt für Schritt zu barrierefreien Tooltips
- Das
title
-Attribut - CSS-Beispiel für tastaturbedienbare Tooltips
- CSS-Beispiel für in Screenreadern bedienbare Tooltips
- ARIA-Beispiel mit
role="tooltip"
undaria-describedby
und ARIA-Beispiel herunterladen
Der Beitrag Schritt für Schritt zu barrierefreien Tooltips besteht aus folgenden einzelnen Webseiten:
- Das
title
-Attribut Das
title
-Attribut ist per Tastatur meist nicht barrierefrei. Tooltips müssen daher auf anderer Weis Aufbereitet werden.- CSS-Beispiel für tastaturbedienbare Tooltips
Tooltips können mit CSS per Tastatur zugänglich gemacht werden.
- CSS-Beispiel für in Screenreadern bedienbare Tooltips
Ein Tooltip kann erst dann barrierefrei werden, wenn der Text des Tooltips zuvor im Fließtext untergebracht wird.
- ARIA-Beispiel mit
role="tooltip"
undaria-describedby
Tooltips — auch wenn sie bereits zugänglich sind — sollten für die optimale Nutzung in Screenreadern mit zwei ARIA-Attributen ergänzt werden.
- ARIA-Tooltips für Formulareelemente
Tooltips für Formularelemente können mit ARIA barrierefrei umgesetzt werden.
- ARIA-Tooltips für Links
(Aktuelle Seite)