Zum Inhalt springen
44 Barrierefreiheit Dokumentation

2.4.7 - Fokus sichtbar

AA 2.0 Design

Ziel

Benutzer erkennen jederzeit, welches Element den aktuellen Tastaturfokus hat, um effizient navigieren zu können.

Beschreibung

  • Jedes über die Tastatur bedienbare Element muss einen sichtbaren Fokusindikator haben.
  • Der Fokusindikator muss dauerhaft sichtbar bleiben und darf nicht zeitlich begrenzt sein.
  • Verschiedene Fokusindikatoren (z. B. Umrandungen, Farbänderungen) können verwendet werden, um den Fokus hervorzuheben.
  • Benutzeragenten dürfen den Fokusindikator nur dann anzeigen, wenn die Tastatur verwendet wird.
  • Bei PDF-Dateien sollte sichergestellt werden, dass Änderungen am Hintergrund die Sichtbarkeit des Fokusindikators nicht beeinträchtigen.

Anforderungen

  • Fokusindikatoren müssen gut sichtbar gestaltet sein, z. B. durch Rahmen oder Farbänderungen.
  • Die Darstellung des Fokus darf nicht durch andere visuelle Elemente überdeckt oder beeinträchtigt werden.
  • Für PDF-Dokumente sollte geprüft werden, dass der Fokusindikator in gängigen Darstellungsprogrammen sichtbar bleibt.

Code-Beispiele

Einfacher CSS-Fokusstil für Buttons:
button:focus {
    outline: 3px solid #005fcc; /* Sichtbare blaue Umrandung */
    outline-offset: 2px;       /* Abstand zur Schaltfläche */
}