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;
}

2️⃣ 1.4.13 - Inhalt bei Hover oder Fokus

Ziel

Beschreibung

Anforderungen

Code-Beispiele

CSS für Hover-Effekt

Weiterführende Links