Barrierefreie Tooltips mit Microtip und benutzerdefiniertem Tag
Tooltips sind ein nützliches Mittel, um Fachbegriffe oder Fremdwörter direkt im Fließtext zu erklären. Leider sind viele Tooltip-Lösungen nicht barrierefrei und für Screenreader nicht zugänglich. In diesem kurzen Tutorial zeige ich eine einfache Möglichkeit, barrierefreie Tooltips mit der kleinen CSS-Bibliothek Microtip und einem benutzerdefinierten HTML-Tag umzusetzen.
Einfache Nutzung im Text
Du kannst in deinem HTML statt komplexem Markup einfach folgendes schreiben:
< tooltip info="Psychosomatik bedeutet die enge Verbindung zwischen Körper und Seele.">Psychosomatik< /tooltip >
Dieses benutzerdefinierte
< span class="tooltip" aria-label="Psychosomatik bedeutet die enge Verbindung zwischen Körper und Seele" tabindex="0">Psychosomatik< /span >
Dadurch ist der Begriff Psychosomatik sowohl per Maus als auch über Screenreader zugänglich erklärbar. Optional lässt sich mit CSS ein visuelles Tooltip anzeigen.
Automatische Umwandlung per JavaScript
Ein kleines Skript sorgt dafür, dass diese Tags barrierefrei umgewandelt werden:
Was bringt das?
- Für sehende Nutzer erscheint ein Tooltip beim Hover.
- Für Screenreader wird die Erklärung vorgelesen.
- Du brauchst nur
< tooltip info="Test Begriff ">Begriff< /tooltip >zu schreiben – der Rest geschieht automatisch.
Beispiel:
Tipp: Microtip funktioniert rein mit CSS, ist leichtgewichtig und DSGVO-freundlich.