Was Barrierefreiheit einer Seite bedeutet
Barrierefreiheit bedeutet, dass auch Menschen mit anderen Bedürfnissen eine Seite nutzen können. Das gilt bei schlechtem Sehen, mit Screenreader, nur mit der Tastatur oder auf einem kleinen Handy. Wer vier Dinge prüft, findet die häufigsten Barrieren: Kontrast, Alternativtext, Beschriftung und Tastaturfokus.
Solche Seiten funktionieren für mehr Menschen und sind oft auch für alle anderen besser.
Am Ende dieser Lektion
Notiz
Ich kann prüfen, ob eine Seite für Menschen mit unterschiedlichen Bedürfnissen funktioniert.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Barrierefreiheit | eine Seite ist für Menschen mit unterschiedlichen Bedürfnissen nutzbar | |
| Kontrastverhältnis | wie stark sich Textfarbe und Hintergrund unterscheiden, von 1 bis 21 | 4,5 |
| Alternativtext | Worte, die ein Bild ersetzen, wenn man es nicht sieht | Blaue Teekanne |
| Beschriftung | der feste Text, der zu einem Eingabefeld gehört | |
| Fokus | die Stelle der Seite, die gerade die Tastatur bedient |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Text muss sich vom Hintergrund abheben
Das Kontrastverhältnis vergleicht die Helligkeit von Text und Hintergrund. Es liegt zwischen 1 (gleiche Farbe) und 21 (Schwarz auf Weiß).
Die übliche Kontrastrichtlinie verlangt für normalen Text mindestens 4,5. Hellgrau auf Weiß liegt weit darunter. Menschen mit schwachem Sehen, aber auch alle in grellem Sonnenlicht, lesen es kaum.
Das Lab misst fünf Farbpaare des Shops
Das Skript contrast.py liest die Formatvorlage des Shops und berechnet für jedes Paar aus Textfarbe und Hintergrund das Verhältnis.
Es druckt englische Wörter: enough heißt genug, too low heißt zu niedrig. Der Fließtext (grau auf weiß) erreicht 2,85, die Überschrift 15,91.
Die Kontraste des Shops messen
docker exec jupyter python3 steps/contrast.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Ein Beispiel: die Farbpaare und ihr Ergebnis
| Teil der Seite | Verhältnis | Reicht aus? |
|---|---|---|
| Fließtext, grau auf weiß | 2,85 | Nein |
| Überschrift, dunkelgrau auf weiß | 15,91 | Ja |
| Link, hellblau auf weiß | 1,89 | Nein |
| Fehlermeldung, rosa auf weiß | 2,05 | Nein |
| Knopf, weiße Schrift auf gelb | 1,59 | Nein |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Bilder und Felder brauchen Worte für Screenreader
Ein Screenreader liest eine Seite vor. Ein Bild ohne Alternativtext bleibt für ihn stumm. Ein rein dekoratives Bild bekommt einen leeren Alternativtext, damit er es überspringt.
Ein Eingabefeld braucht eine Beschriftung, die zu ihm gehört. Ein Platzhalter im Feld verschwindet beim Tippen und zählt nicht.
Das Skript zählt fehlende Texte und Beschriftungen
Das Skript audit.py prüft die zwei Seiten und die Formatvorlage und druckt englische Zeilen wie images without alt text. Auf der Startseite haben 3 von 4 Bildern keinen Alternativtext.
Auf der Kasse fehlt bei 3 von 4 Feldern die Beschriftung. Die Zahlen sind bei jedem Lauf gleich.
Alle vier Prüfungen laufen lassen
docker exec jupyter python3 steps/audit.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Die Bilder der Startseite zählen
docker exec jupyter grep -c "<img" shop/index.htmlHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Die Beschriftungen der Kasse zählen
docker exec jupyter grep -c "<label" shop/checkout.htmlHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Wer nur die Tastatur nutzt, braucht den Fokus
Manche Menschen bedienen eine Seite nur mit der Tab-Taste. Der Fokusrahmen zeigt ihnen, wo sie gerade sind.
Eine Regel wie outline: none in der Formatvorlage nimmt diesen Rahmen weg. Dann verlieren sie den Überblick. Im Shop steht eine solche Regel, wie die Beobachtungsnotiz zu P6 zeigt.
Die Regel gegen den Fokusrahmen finden
docker exec jupyter grep -n outline shop/style.cssHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Ein häufiger Fehler
Warnung
Viele glauben: Barrierefreiheit betrifft nur wenige Menschen. Grelles Sonnenlicht, ein gebrochener Arm oder ein altes Handy schaffen aber dieselben Hürden. Planen Sie sie von Anfang an ein, denn spätere Änderungen kosten mehr.