CSS lernen leicht gemacht: Interaktion und Barrierefreiheit

Eine Webseite ist kein gedrucktes Plakat – sie lebt von der Interaktion. Nutzer klicken auf Links, füllen Formulare aus oder navigieren mit der Tastatur. In diesem Teil meiner Kursreihe zeige ich Ihnen, wie Sie mit CSS dafür sorgen, dass diese Interaktionen für alle Menschen barrierefrei sind.

Der Fokus-Zustand: Wegweiser für Tastaturnutzer

Stellen Sie sich vor, Sie bedienen Ihren Computer ohne Maus, nur mit der Tabulator-Taste. Sie springen von Link zu Link. Wenn Sie nicht sehen, wo Sie sich gerade befinden, sind Sie verloren.

Menschen mit motorischen Einschränkungen oder blinde Menschen, die eine Tastatur nutzen, sind auf den sogenannten Fokus-Ring angewiesen. Viele Webdesigner löschen diesen Rahmen leider mit outline: none;, weil sie ihn „hässlich“ finden. Das ist eine der größten Barrieren im Web!

Wie man den ganzen Computer nur per Tastatur bedienen kann, zeige ich in diesem Video:

So gestalten Sie den Fokus barrierefrei:

Anstatt den Fokus zu verstecken, sollten wir ihn deutlich hervorheben. Hier ist ein Beispiel für einen kontrastreichen Fokus-Zustand:

/* Ein barrierefreier Fokus-Style */
.beispiel-link:focus {
  outline: 4px solid #FFBF47; /* Kräftiges Gelb-Orange */
  outline-offset: 2px;
  background-color: #333;
  color: #fff !important;
  text-decoration: none;
}

Hover- und Active-Zustände

Zusätzlich zum Fokus gibt es zwei weitere wichtige Zustände:

• :hover: Wenn der Mauszeiger über ein Element fährt.
• :active: In dem Moment, in dem das Element (z. B. ein Button) gedrückt wird.

Ein barrierefreies Design gibt immer eine Rückmeldung. Der Nutzer muss spüren: „Ja, ich habe dieses Element gerade erwischt.“

.mein-button:hover {
  background-color: darkblue; /* Visuelles Feedback beim Drüberfahren */
  text-decoration: underline;
}

.mein-button:active {
  transform: scale(0.95);    /* Der Button drückt sich optisch leicht ein */
}

Texte für Screenreader (Visually Hidden)

Manchmal gibt es Informationen, die für sehende Menschen durch ein Icon (z. B. eine Lupe für die Suche) klar sind. Ein blinder Mensch, der einen Screenreader nutzt, braucht hier aber oft eine textliche Erklärung.

Doch was genau ist das eigentlich? Ein Screenreader (auf Deutsch: Bildschirmleser) ist eine spezielle Software, die blinden und sehbehinderten Menschen hilft, Computer und Smartphones zu bedienen. Man kann ihn sich wie einen Vorlese-Assistenten vorstellen: Die Software analysiert den Text und die Struktur einer Webseite und gibt diese Informationen entweder als künstliche Stimme über Lautsprecher aus oder wandelt sie in Punktschrift (Braille) für ein spezielles Lesegerät um. Da ein Screenreader Grafiken nicht einfach „sehen“ kann, ist er darauf angewiesen, dass wir Programmierer im Code hinterlegen, was ein Symbol bedeutet.

Wir können einen Text so verstecken, dass er optisch unsichtbar ist, aber vom Screenreader trotzdem vorgelesen wird. Das nennen wir „visually hidden“.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Im HTML nutzen wir das dann so:

<button>
  <span class="icon">?</span>
  <span class="visually-hidden">Suche starten</span>
</button>

Zusammenfassung für barrierefreie Interaktion

1. Lösche niemals den Fokus-Ring (outline), sondern verstärke ihn!
2. Stelle sicher, dass Hover- und Fokus-Zustände einen hohen Kontrast haben.
3. Nutze die Klasse visually-hidden, um Screenreader-Nutzern zusätzlichen Kontext zu geben.

Schlussbemerkung

Barrierefreies CSS bedeutet, dass die Webseite mit dem Nutzer „kommuniziert“ – egal ob er eine Maus, eine Tastatur oder einen Screenreader verwendet.

Haben Sie Fragen zur Tastaturbedienbarkeit oder dazu, wie man interaktive Elemente inklusiv gestaltet? Ich berate Sie gerne!

Kontakt:
E-Mail: info@marlem-software.de
Telefon: 07072/1278463

Ihr Markus Lemcke

Weiterlesen

CSS lernen leicht gemacht: Design für alle – inklusiv und barrierefrei