zurück zur Originalseite

Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015

ARIA-Tooltips für Links

Demo #2: Link im Fließtext

In einem Text kommt ein Link mit einem Tooltip 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

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" und aria-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)

zurück zur Originalseite