Kann jeder deine Seite benutzen?
Eine barrierefreie Webseite lässt sich von allen Menschen benutzen, auch ohne Maus, ohne Bild und mit schwachen Augen. Dafür sorgen kleine Dinge im HTML, die man prüfen kann.
Das hilft mehr Leuten, als du denkst. Auch wer in der Sonne auf ein Handy schaut, braucht gute Kontraste.
Am Ende dieser Lektion
Notiz
Ich kann prüfen, ob eine Seite Alternativtexte, geordnete Überschriften und eine Sprache hat.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Barrierefreiheit | Eine Seite lässt sich von allen benutzen | |
| Alternativtext | ein Text, der ein Bild beschreibt | alt="Eine Brezel" |
| Screenreader | ein Programm, das eine Seite vorliest | |
| Überschrift | ein Titel im Text, in sechs Stufen | <h1> |
| Test | eine Prüfung, die ein Programm von selbst macht |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Wer stößt auf Hindernisse im Web?
Menschen bedienen das Web auf viele Arten. Manche hören die Seite mit einem Screenreader. Manche nutzen nur die Tastatur. Manche sehen schlecht oder können keine Farben unterscheiden.
Eine Seite ist barrierefrei, wenn sie für jede dieser Arten funktioniert. Die Regeln dafür sind einfach und meist schnell erfüllt.
Beispiel: Hindernis und Gegenmittel
| Hindernis | Wer betroffen ist | Gegenmittel |
|---|---|---|
| Bild ohne Beschreibung | Wer ein Bild nicht sehen kann | Alternativtext am Bild |
| Winzige Schrift, wenig Kontrast | Wer schlecht sieht | Große Schrift, starker Kontrast |
| Knopf nur mit der Maus bedienbar | Wer nur die Tastatur nutzt | Echte Knöpfe und Links nehmen |
| Video ohne Untertitel | Wer nicht hören kann | Untertitel anbieten |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Wie schreibt man einen guten Alternativtext?
Der Alternativtext steht im Attribut alt des Bildes. Ein Screenreader liest ihn vor, und er erscheint, wenn das Bild nicht lädt.
Beschreibe, was für die Seite wichtig ist, kurz und ohne „Bild von“. Ist ein Bild reine Dekoration, schreib alt="". Dann überspringt der Screenreader es.
Ein Bild mit und ohne Alternativtext
<!-- schlecht: Der Screenreader liest nur den Dateinamen -->
<img src="brezel.jpg">
<!-- gut: Er liest die Beschreibung -->
<img src="brezel.jpg" alt="Eine frische Brezel mit Salz">Ein häufiger Fehler
Warnung
Viele denken, Barrierefreiheit betreffe nur wenige Menschen. Das stimmt nicht. Wer sich den Arm gebrochen hat, nutzt die Tastatur. Wer im Zug ohne Kopfhörer ein Video ansieht, braucht Untertitel. Eine barrierefreie Seite hilft vielen, und oft sogar Suchmaschinen.
Bevor du anfängst
Notiz
Drück oben in der Leiste auf Lab starten und warte, bis die Maschine läuft. Im Lab läuft die Seite einer kleinen Bäckerei unter dem Namen web. Die Runs lesen nur ihr HTML und ändern nichts.
Das HTML der Startseite lesen
curl -s http://web/Hier 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 Seite zählen
curl -s http://web/ | grep -c "<img"Hier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Die Hauptüberschrift herauslesen
curl -s http://web/ | grep -o "<h1>[^<]*</h1>"Hier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Warum sind Überschriften und Sprache wichtig?
Ein Screenreader springt von Überschrift zu Überschrift, wie man ein Buch überfliegt. Darum folgen die Stufen in Reihenfolge: h1, dann h2, dann h3. Ein Sprung von h1 zu h3 verwirrt.
Das Attribut lang im Tag html sagt dem Screenreader die Sprache. Ohne es liest er deutschen Text mit englischer Stimme.
Ein HTML-Gerüst in guter Ordnung
<!doctype html>
<html lang="de">
<title>Brightside Bäckerei</title>
<h1>Brightside Bäckerei</h1>
<h2>Unsere Brote</h2>
<h3>Roggenbrot</h3>Was ist ein automatischer Test?
Ein Test ist eine Funktion, die eine Seite prüft und sagt, ob sie besteht. Er läuft in Sekunden und immer gleich.
Man startet ihn nach jeder Änderung. So fällt auf, wenn jemand ein Bild ohne Alternativtext einfügt. Von Hand testest du trotzdem zusätzlich: nur mit der Tastatur durch die Seite gehen und auf 200 Prozent zoomen.
Bilder ohne Alternativtext zählen
html = '<img src="a.jpg"><img src="b.jpg" alt="Brot">'
anzahl = 0
# Zerlege den Text an "<img". Das Stück vor dem ersten Treffer ist kein Bild.
for teil in html.split("<img")[1:]:
tag = teil.split(">")[0]
if "alt=" not in tag:
anzahl = anzahl + 1
print(anzahl)
# Streiche bei b.jpg den alt-Teil und drück auf Ausführen.Weiterführend: die Bäckerei-Seite bewerten
Die Startseite im Lab hat keine Bilder, aber auch kein lang und nur eine Überschrift. Schreib auf, was du am HTML ändern würdest.
Nimm dein Werkzeug aus der Aufgabe und prüf damit das HTML, das der erste Run ausgibt. Was meldet es?