Barrierefreiheit

Barrierefreiheit klingt nach einem Extrathema, das man am Ende noch dranhängt. Tatsächlich ist sie zum größten Teil das, was du in diesem Kurs ohnehin gemacht hast: das passende Element nehmen statt irgendeines.

01 / 04Was du schon kannst

Vier Dinge sind längst Gewohnheit, und sie sind zusammen der größte Teil der Arbeit:

• Überschriften als Gliederung, mit einer h1 und ohne übersprungene Ebenen. Screenreader-Nutzer springen von Überschrift zu Überschrift, so wie du eine Seite überfliegst.
• Semantische Bereiche statt div-Suppe. Daraus entsteht die Liste, mit der man direkt zum Hauptinhalt springt.
• alt an jedem Bild, mit leerem Wert bei Deko.
• label an jedem Feld, verbunden über for und id.

Wer diese vier einhält, hat die häufigsten Barrieren gar nicht erst gebaut.

02 / 04Klickbares gehört in button oder a

<div class="knopf" onclick="this.textContent='Geklickt'">Abschicken</div>

<button type="button" onclick="this.textContent='Geklickt'">Abschicken</button>

Beide reagieren auf einen Mausklick. Klick sie auf der Seite nacheinander an: Beide ändern ihre Beschriftung auf „Geklickt“. In einem echten Projekt würde die Klasse knopf das div optisch zum Knopf machen, hier ohne CSS bleibt es eine Textzeile. Der Unterschied, um den es geht, zeigt sich ohnehin erst, sobald du die Maus weglegst.

Klick einmal auf die Seite, aber nicht auf einen der beiden Knöpfe, und drück dann Tab. Der Fokus springt auf den button, das div überspringt er, und was du nicht erreichst, kannst du auch nicht mit der Eingabetaste auslösen. Der Klick vorher ist nötig: Ohne ihn arbeitet sich Tab erst durch die Adresszeile und die Knöpfe daneben, bevor er überhaupt in deiner Seite ankommt. Wer aus motorischen Gründen keine Maus benutzt, wer blind ist und mit der Tastatur navigiert, wer eine Spracheingabe verwendet: Für all diese Menschen existiert der obere Knopf nicht.

Dazu kommt die Ansage. Ein button wird als „Schaltfläche“ angekündigt, ein div gar nicht. Selbst wer ihn zufällig findet, weiß nicht, dass man ihn drücken kann.

Die Regel dazu ist kurz: Was zu einer anderen Adresse führt, ist ein a. Was etwas auf der Seite auslöst, ist ein button. Nur das Aussehen entscheidet nie. Ein Link kann wie ein Knopf aussehen und ein Knopf wie ein Link, dafür ist CSS da.

03 / 04Ein Vorher und Nachher

<div>Mein Kochblog</div>

<img src="/lernen/media/demo-600.jpg" width="300" height="169">

<p>Newsletter</p>
<input type="email">

<div onclick="this.textContent='Gesendet'">Anmelden</div>

Vier Probleme auf fünf Zeilen: Die Überschrift ist keine, das Bild hat kein alt, das Feld hat kein label, und der Knopf ist keiner. Am fehlenden alt und am fehlenden label siehst du auf der Seite nichts. Beim Knopf schon: Er sieht aus wie normaler Text, weil er normaler Text ist.

Genau das macht diese beiden Barrieren so zäh: Man sieht sie nicht, also fallen sie beim Draufschauen nie auf. Fragen kann man aber. Tipp in der Eingabezeile der Console document.querySelector("img").alt und drück Enter. Die Antwort ist leer. Genau das hört ein Screenreader auch.

<h1>Mein Kochblog</h1>

<img
  src="/lernen/media/demo-600.jpg"
  alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
  width="300"
  height="169"
>

<label for="mail">Newsletter</label>
<input type="email" id="mail" name="mail">

<button type="button" onclick="this.textContent='Gesendet'">Anmelden</button>

Dieselbe Seite, andere Elemente. Auf der Seite fällt dreierlei auf: Die Überschrift ist größer, die Beschriftung steht jetzt neben dem Feld statt darüber (ein label fließt im Text mit, ein p beansprucht eine eigene Zeile), und der Knopf sieht endlich aus wie einer. Wie das am Ende aussieht, entscheidet ohnehin CSS. Der Unterschied, um den es hier geht, steckt darin, welche Elemente benutzt wurden. Dieselbe Frage wie eben beantwortet dieses Beispiel mit dem ganzen alt-Text.

Das ist der Kern dieser Lektion: Barrierefreiheit kostet hier keine Zusatzarbeit, sondern besteht darin, beim Schreiben das richtige Element zu wählen. Nachträglich reparieren ist die teure Variante.

04 / 04Tastatur und Fokus

Zwei Dinge zum Prüfen, die keine fünf Minuten dauern:

Tab-Durchlauf. Geh mit der Tab-Taste durch deine Seite. Erreichst du jedes Bedienelement? Ist die Reihenfolge dieselbe wie die sichtbare? Kommst du irgendwo nicht mehr weiter?

Sichtbarer Fokus. Der Browser zeichnet um das gerade aktive Element einen Rahmen. In vielen Anleitungen steht, wie man den mit CSS entfernt, weil er als hässlich gilt. Tu das nicht. Ohne Fokus-Ring weiß niemand, der mit der Tastatur arbeitet, wo er gerade ist. Wenn er nicht gefällt, gestalte ihn um, aber schalte ihn nicht ab.

Beide Prüfungen brauchen kein Werkzeug und finden mehr Probleme als die meisten automatischen Tests.