Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015
ARIA-Tooltips für Formulareelemente
Demo #1: Formular
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
(Aktuelle Seite)
- ARIA-Tooltips für Links
Links mit Tooltips können statt mit dem
title
-Attribut auch mit ARIA-Attributen barrierefrei gestaltet werden.