Bei unserer täglichen Digigalagentur-Arbeit bei points gibt es Dinge, die immer wieder zur Sprache kommen bzw. gefragt werden. Hier ein paar dieser Fragen aus der letzten Zeit und die Antworten dazu.
Frage: Darf bei einem Link der Hover- und Fokus-Zutand gleich sein?
Die Antwort: Ja, er darf gleich sein, aber wenn es geht, die beiden Zustände zu unterscheiden, ist das zu empfehlen. Die WCAG verlangen nicht, dass sich Hover und Fokus optisch voneinander unterscheiden. Warum aber nicht ein bißchen mehr machen für die Benutzer? Für eine gute Benutzbarkeit kann man Hover und Fokus leicht unterschiedlich machen, z. B. Änderung der Hintergrundfarbe bei hover und eine zusätzliche gut sichtbare Fokus-Outline bei Fokus. So profitieren insbesondere Nutzer, die gleichzeitig Maus und Tastatur verwenden oder Screen-Magnifier einsetzen.
Nice to know
Focus und Focus Visible: Um Fokus-Styles für Tastatur-Nutzer anzupassen, verwendet man am besten focus-visible. Beim Verwenden von focus wird der Style auch für Mausnutzer sichtbar, was störend sein kann. s. https://www.barrierefreiesblog.de/fokus-outlines/
Frage: Wie geht man bei Farbkontrasten vor, die nicht eindeutig sind?
Wie behandelt man z. B. Schrift auf einem Bild, oder den Kontrast von Schrift zu Fläche von Vorder-/Hintergrund und dann nochmal von der Fläche zum Hintergrund?
Antwort: Das ist tatsächlich eine eher schwierige Fragen bei der Bewertung von Farbkontrasten. Die WCAG geben hierfür einige Regeln vor, lassen aber in Grenzfällen Interpretationsspielraum.
Schrift auf Bild
Hier gilt grundsätzlich: Der Kontrast wird zwischen der Schrift und dem unmittelbaren Hintergrund hinter der Schrift gemessen, nicht zum gesamten Bild.
Beispiel:
- Weiße Schrift auf einem Foto mit Himmel und Bäumen.
- Hinter einigen Buchstaben ist der Himmel hell, hinter anderen dunkles Laub.
Dann muss der Kontrast an den kritischsten Stellen ausreichend sein. Wenn Teile der Schrift vor einem hellen Himmelsbereich nicht mehr den erforderlichen Kontrast erreichen, gilt der Text als nicht ausreichend kontrastreich.
Gelöst werden kann das durch Hintergrundboxen hinter dem Text, entsprechende Bildauswahl (ruhigere Bilder oder Bereiche auf Bildern für die Verwendung mit Text), halbtransparente dunkle Overlays und Textschatten (nur wenn sie den Kontrast wirklich verbessern).
Schrift auf einer farbigen Fläche vor einem Bild
Zunächst wird nur die Farbe der Schrift im Verhältnis zu der farbigen Fläche betrachtet. Der Kontrast der Box zum Bild spielt für den Schriftkontrast vorerst keine Rolle.
Wann wird der Hintergrund der Box relevant?
Wenn die Box selbst ein wichtiges Bedienelement oder Informationsträger ist (z. B. Button, Badge oder Formularfeld), dann muss sie sich ausreichend vom Hintergrund abheben. Ein Button muss sich dann von seiner Umgebung mit dem korrekten Mindest-Kontrast abheben.
Mehrere Kontraste gleichzeitig
In der Praxis können also mehrere voneinander unabhängige Kontrastprüfungen notwendig sein. Ein guter Schriftkontrast bedeutet nicht automatisch, dass auch das Bedienelement ausreichend erkennbar ist.
| Zu prüfen | Warum (SC = Sucess Criteria WCAG) |
|---|---|
| Schrift ↔ Hintergrund | Lesbarkeit des Textes (SC 1.4.3 bzw. 1.4.6) |
| Icon ↔ Hintergrund | Erkennbarkeit des Icons (SC 1.4.11) |
| Buttonfläche ↔ Umgebung | Erkennbarkeit des Bedienelements (SC 1.4.11) |
| Fokusindikator ↔ Umgebung | Sichtbarkeit des Fokus (SC 2.4.11 bzw. 2.4.13 je nach Anforderung) |
Hilfestellung: Frage dich immer: „Wogegen muss sich dieses Element für den Nutzer abheben?“
- Text: gegen seinen unmittelbaren Hintergrund.
- Icon: gegen seinen unmittelbaren Hintergrund.
- Button oder Eingabefeld: sowohl der Inhalt gegen die Buttonfläche als auch die Buttonfläche gegen die umgebende Seite.
- Fokusindikator: gegen die angrenzenden Farben, damit der Tastaturfokus eindeutig erkennbar ist.
Diese schrittweise Betrachtung entspricht der Systematik der WCAG und hilft, auch komplexe Layouts mit Bildern, Overlays und farbigen Flächen nachvollziehbar zu bewerten.
Frage: Wann braucht man Aria-Label bei Links und wann nicht?
Aria-Label werden bei Links häufig unnötig oder sogar falsch eingesetzt. Die Grundregel lautet: Ein Link benötigt nur dann ein aria-label, wenn sein zugänglicher Name nicht bereits aus dem sichtbaren Linktext oder seinem Kontext eindeutig hervorgeht.
Wann ist ein aria-label sinnvoll?
- Link besteht nur aus einem Icon
- Link enthält nur ein Logo
- Der sichtbare Text ist absichtlich sehr kurz
- Der sichtbare Text wiederholt sich immer wieder auf der Seite (klassisches Beispiel ist so etwas wie „Mehr erfahren“ oder „Weiter“ bei z. B. News)
Wichtig: aria-label ist die Ausnahme, nicht die Regel. Ein klar formulierter, sichtbarer Linktext ist fast immer die bessere und robustere Lösung.
Best practice für verlinkte Bilder, z. B. Logos: im alt-Tag des Logos/Bilder beschreiben was zu sehen ist (z. B. Logo points) und im aria-label des Links beschreiben wohin verlinkt wird (z. B. Home).