Zum Inhalt springen
44 Barrierefreiheit Dokumentation

2️⃣ 1.4.13 - Inhalt bei Hover oder Fokus

AA 2.1 Design Umsetzung

Ziel

Zusätzliche Inhalte, die bei Hover oder Fokus erscheinen, sollen zugänglich und benutzerfreundlich gestaltet werden, ohne die Bedienung der Hauptinhalte zu beeinträchtigen.

Beschreibung

  • Zusätzliche Inhalte, die durch Hover oder Fokus angezeigt werden, müssen sichtbar bleiben, bis der Benutzer sie entfernt oder sie ungültig werden.
  • Inhalte dürfen keine anderen wichtigen Inhalte verdecken oder ersetzen, es sei denn, sie enthalten Fehlermeldungen.
  • Inhalte müssen über Mechanismen verfügen, die eine einfache Entfernung ermöglichen, z. B. durch Drücken der Escape-Taste.
  • Es muss möglich sein, den Mauszeiger auf den zusätzlichen Inhalt zu bewegen, ohne dass er verschwindet.

Anforderungen

  • Gestaltung zusätzlicher Inhalte sollte visuell leicht von den Hauptinhalten unterscheidbar sein.
  • Vermeidung von Überlagerungen kritischer Inhalte.
  • Klare Platzierung und Kontraste für zusätzliche Inhalte sicherstellen.

Code-Beispiele

CSS für Hover-Effekt
.tooltip-container {
  position: relative;
  display: inline-block;
}


#tooltip {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
}


.tooltip-container:hover #tooltip {
  display: block;
}