Bei der Gestaltung barrierefreier Webseiten ist die Einhaltung der WCAG-Richtlinien hinsichtlich Farbkontrasten essenziell. Für Texte und interaktive Elemente gilt eine Mindestkontrastverhältnis von 4,5:1. Für größere Texte (mindestens 18pt oder 14pt fett) ist ein Verhältnis von 3:1 ausreichend. Beispiele für gut konstruierte Kombinationen sind schwarz auf weiß (Kontrastverhältnis 21:1) oder dunkelblau auf hellgelb (ca. 15:1). Es empfiehlt sich, stets Tools wie Contrast Checker zu verwenden, um die tatsächlichen Werte zu verifizieren.
Um Farbkontraste effektiv zu prüfen und anzupassen, gehen Sie folgendermaßen vor:
Stellen Sie sich vor, Sie entwickeln einen Call-to-Action-Button. Für maximale Zugänglichkeit wählen Sie eine dunkelblaue Hintergrundfarbe (#003366) mit weißer Schrift (#FFFFFF). Der Kontrast liegt bei über 15:1. Um die Klickbarkeit zu verbessern, fügen Sie einen deutlich sichtbaren Fokusrahmen mit hoher Kontraststärke hinzu, beispielsweise eine dünne gelbe Umrandung (#FFCC00). Das CSS könnte wie folgt aussehen:
Typische Fehler sind die Verwendung von Pastellfarben mit geringem Kontrast, besonders bei Text auf Hintergrund. Ebenso problematisch sind Farbverläufe, die den Kontrast verschleiern, oder die Verwendung von Textfarben, die sich kaum vom Hintergrund abheben. Um diese Fehler zu vermeiden, sollten Sie stets automatische Kontrast-Tools nutzen und bei Unsicherheiten auf bewährte Farbkombinationen zurückgreifen. Wichtig ist auch, die Farbwahl im Kontext verschiedener Sehszenarien zu testen, um sicherzustellen, dass die Kontraste auch bei eingeschränktem Sehvermögen bestehen bleiben.
Um eine Webseite vollständig tastaturzugänglich zu machen, müssen alle interaktiven Elemente per Tabulator-Funktion erreichbar sein. Das bedeutet, dass Tab- und Shift + Tab-Tastenkombinationen konsequent funktionieren. Zudem sollten wichtige Elemente einen sichtbaren Fokusindikator besitzen, der durch CSS gestaltet wird. Vermeiden Sie es, mit JavaScript-basierten Klick-Events auf Mausinteraktionen zu setzen, ohne alternative Tastatur-Event-Handler zu implementieren. Außerdem ist es essenziell, die Reihenfolge der Tabulator-Folge logisch und intuitiv zu gestalten, indem Sie tabindex-Attribute gezielt einsetzen.
Der Fokusindikator ist entscheidend für die Orientierung beim Navigieren. Hier ein praktisches Vorgehen:
:focus {
outline: 3px dashed #FFAA00;
outline-offset: 2px;
}
Ein praktisches Menü sollte folgende Eigenschaften besitzen:
| Merkmal | Beschreibung |
|---|---|
| Tastaturfokus | Fokus springt automatisch auf Menüeinträge, sichtbar durch einen klaren Fokusrahmen. |
| Unterstützung für Pfeiltasten | Navigation innerhalb des Menüs ist per Pfeil hoch/runter möglich, um die Bedienung ohne Maus zu gewährleisten. |
| Aria-Attribute | Verwendung von roles=”menu” und roles=”menuitem” sowie aria-haspopup und aria-expanded für dynamische Untermenüs. |
Hier ein exemplarischer Ausschnitt für die Menü-HTML-Struktur:
Nach der Implementierung sollten Sie die Navigation testen:
ARIA-Attribute sind zentrale Bausteine, um dynamische Inhalte und komplexe Interaktionen für Nutzer mit motorischen Einschränkungen zugänglich zu machen. Besonders relevant sind aria-label und aria-labelledby für klare Beschriftungen, role für die semantische Einordnung und aria-pressed bei Toggle-Buttons. Für dynamische Inhalte helfen aria-live-Regionen, um Änderungen für Screenreader sichtbar zu machen, ohne dass Nutzer manuell aktualisieren müssen.
Hier einige konkrete Tipps:
Ein Beispiel: Eine Webseite zeigt eine Benachrichtigung bei Formular-Fehlern. So gehen Sie vor:
Häufige Fehler sind die doppelte Verwendung von aria-owns und aria-controls, die nicht klar dokumentiert sind, oder das Fehlen von role-Angaben bei dynamischen Elementen. Auch ungenaue aria-labels ohne klare Beschreibungen führen zu Verwirrung. Um diese Fehler zu vermeiden, testen Sie Ihre Implementationen regelmäßig mit Screenreadern und führen Sie Accessibility-Checks durch. Zudem ist eine ausführliche Dokumentation Ihrer ARIA-Attribute im Code empfehlenswert, um Wartung und Weiterentwicklung zu erleichtern.
Jedes Formularfeld sollte eine eindeutig verknüpfte Beschriftung besitzen. Verwenden Sie dazu das <label>-Element mit dem for-Attribut, das die id des entsprechenden Eingabefeldes referenziert. Beispiel:
Achten Sie zudem auf eine klare und logische Anordnung der Felder, bei der die Beschriftung immer links oder oben vom Eingabefeld steht. Verwenden Sie CSS, um die Ausrichtung bei verschiedenen Bildschirmgrößen flexibel zu gestalten, z. B. mit Flexbox oder Grid.
Fehlermeldungen sollten immer mit aria-describedby verknüpft sein, um sie für Screenreader hörbar zu machen. Beispiel:
