Finger auf einer Braillezeile

Zehn Checks · zwanzig Minuten · eine Tastatur

Barrierefreiheit der Website selbst testen, bevor jemand anders es tut.

Checklisten mit allen 56 Kriterien sind für jemanden, der zum ersten Mal hinsieht, wertlos: Sie sind eine abgedruckte Norm und keine Methode. Diese Liste ist das Gegenteil. Zehn Checks in der Reihenfolge, die die schlimmsten Probleme zuerst findet, jeder so beschrieben, dass eine Person ohne technische Ausbildung ihn heute Nachmittag durchführen kann.

Ohne WerkzeugeTastatur zuerstZehn ChecksEhrlich über die Grenzen

Diese Liste findet häufige Fehler. Sie ersetzt keine Prüfung.

Vorbereitung

Zwei Entscheidungen vor dem ersten Tastendruck, und beide ändern das Ergebnis mehr als jede Technik.

Wählen Sie die Seite, auf der Ihr Geschäft stattfindet: die Kasse, das Buchungsformular, die Kontaktseite, das Bewerbungsformular. Nicht die Startseite, denn die ist auf fast jeder Website die am besten gebaute und deshalb die am wenigsten aussagekräftige Seite.

Legen Sie die Maus außer Reichweite. Diese eine Handlung ist der größte Teil der Methode: Nahezu jede ernste Barriere ist für jemanden mit einem Zeigegerät unsichtbar und wird für jemanden ohne innerhalb einer Minute offensichtlich.

Person am Laptop
Wählen Sie die Seite, die Geld verdient.
Geprägtes Braille-Blatt
Zwanzig Minuten sagen mehr als ein Punktwert.

Die zehn Checks

Für jeden Check genügen ein bis zwei Minuten.

Arbeiten Sie sie der Reihe nach ab. Die ersten vier finden die Fehler, die eine Aufgabe vollständig verhindern; der Rest findet die, die sie mühsamer machen als nötig.

  1. Mit Tab durch die Seite. Vom Seitenanfang wiederholt die Tabulatortaste drücken. Erreichen Sie jeden Link, jede Schaltfläche und jedes Feld, in einer Reihenfolge, die zum Sichtbaren passt? Was übersprungen wird, ist ein Befund.
  2. Auf den Fokus achten. Sehen Sie an jeder Station, wo Sie stehen? Ein unsichtbarer Fokusrahmen macht die Tastaturbedienung zum Ratespiel und ist der häufigste Einzelmangel im Web.
  3. Alles öffnen und schließen. Menüs, Dialoge, Cookie-Banner, Pop-ups. Öffnen mit Enter oder Leertaste, Schließen mit Escape, und landen Sie danach wieder dort, wo Sie waren? Bleibt der Fokus gefangen, haben Sie eine blockierende Barriere gefunden.
  4. Das Formular bewusst falsch ausfüllen. Mit leerem Pflichtfeld absenden. Ist der Fehler sichtbar, benennt er das Feld und sagt er, was zu tun ist, und springt der Fokus dorthin? Rot allein genügt nicht.
  5. Auf 200 Prozent zoomen. Fließt der Inhalt um oder überlappt und verschwindet er? Danach 400 Prozent, denn das ist die Stufe, um die es in der Norm geht.
  6. Linktexte aus dem Zusammenhang lesen. Ergeben sie für sich allein Sinn, oder sind es neun Varianten von „mehr erfahren“?
  7. Bilder ansehen. Welche tragen Informationen, die sonst nirgends stehen? Jedes davon braucht eine Textbeschreibung; dekorative brauchen ein leeres Attribut, keinen Dateinamen.
  8. Prüfen, ob Farbe je das einzige Signal ist. Pflichtfelder, Fehler, Status, Diagrammlegenden. Was in Graustufen verschwindet, verschwindet für manche Menschen ganz.
  9. Kontrast der Schaltflächen messen. Fließtext ist meist in Ordnung, Buttons, Platzhaltertexte und hellgraue Bildunterschriften meist nicht.
  10. Ton ausschalten und ein Video abspielen. Gibt es Untertitel, und transportieren sie das, was der Ton transportiert?

Notieren Sie unterwegs jeden Befund sofort; nach dem zehnten Check erinnert sich niemand mehr an den dritten.

Bestehen die Punkte eins bis vier auf Ihrer wichtigsten Seite, ist die Lage vermutlich überschaubar. Scheitert einer, haben Sie ein strukturelles Problem, das keine Erklärung wegformulieren kann.

Was Sie mit den Funden tun

Ordnen Sie zuerst zu, wer zuständig ist.

Die gute Nachricht steckt in der rechten Spalte: Die meisten Befunde kosten Stunden, nicht Wochen.

BefundWer behebtÜblicher Aufwand
Fokus nicht sichtbarEntwicklung, CSSUnter einer Stunde
Tastatur im Pop-up gefangenEinstellung oder EntwicklungEinstellung oder halber Tag
Formularfehler nicht angesagtEntwicklungHalber Tag
Nichtssagende LinktexteRedaktionMinuten je Seite
Fehlende AlternativtexteRedaktionMinuten je Bild
Zu geringer KontrastDesign und CSSUnter einer Stunde
Text in GrafikenRedaktionNeu tippen
Keine UntertitelMarketing oder DienstleisterJe Video

Vier der acht brauchen keine Entwicklerin. Deshalb geben wir die Inhaltshälfte jedes Prüfberichts an die Personen, die Seiten veröffentlichen, und nicht an die Technik.

Detail eines Aktenordners
Seite und Aufgabe notieren, nicht die Kriteriennummer.
Fingerkuppen auf einer Braille-Seite
Die Hälfte der Liste ist Redaktionsarbeit.

Fünf Minuten mehr mit einem Screenreader

Optional, und das mit Abstand nützlichste Optionale auf dieser Seite.

Jedes Betriebssystem bringt einen mit, und fünf Minuten damit verändern die Sicht des gesamten Teams auf die Website. Sie müssen ihn nicht beherrschen. Einschalten, in den ersten dreißig Sekunden die Augen schließen, damit Sie aufhören mitzulesen, und auf drei Dinge achten.

Die Schaltflächen. Was wird angesagt, wenn Sie zu jedem Bedienelement wandern? Hören Sie „Schaltfläche“ ohne Namen, einen Dateinamen oder gar nichts, haben Sie den Mangel gefunden, der mehr Aufgaben blockiert als jeder andere.

Die Überschriften. Die meisten Screenreader können sie auflisten. Diese Liste ist die Gliederung, an der sich Menschen orientieren, und wenn sie sich wie ein Durcheinander von Schriftgrößen liest, ist die Seite schwerer zu benutzen, als sie aussieht.

Die Formularfehler. Senden Sie noch einmal falsch ab und hören Sie zu. Stille bedeutet, dass die Kundin feststeckt und nicht weiß, warum – in einer Kasse ist das verlorenes Geld.

Braillezeile im Einsatz
Fünf Minuten Zuhören schlagen einen Nachmittag Normenlektüre.
Prüfung mit einer Lupe
Danach beginnt die Arbeit, die Urteilsvermögen braucht.

Vom Selbsttest zur Prüfung

Was eine vollständige Prüfung zusätzlich leistet, und was sie kostet.

Die Prüfung beginnt dort, wo diese Liste endet. Der automatische Durchlauf räumt die mechanischen Mängel ab, danach arbeitet ein Mensch die realen Abläufe mit Tastatur und Screenreader durch, bei 400 Prozent Zoom und bei schmaler Darstellung, und prüft Namen, Rollen, Zustände, Ansagen, Fokussteuerung und Fehlerbehandlung über jede Aufgabe hinweg, die Ihre Kundinnen erledigen.

Heraus kommt ein Prüfbericht, sortiert nach dem, was eine Person nicht tun kann, eine daraus geschriebene und unterschriebene Erklärung, ein öffentlicher Prüfcode, ein gehosteter Feedback-Kanal, die monatliche Nachprüfung und fünf Jahre Archiv. 690 € im Jahr für die EU, 1.290 € für drei Domains und sechs Sprachen, 1.990 € einschließlich Vereinigtem Königreich und Kanada.

Wiederholen Sie die zehn Checks in drei Monaten. Websites verändern sich, und zehn Minuten auf der wichtigsten Seite fangen das meiste ab. Wer sich das nicht merken möchte, bekommt genau dafür die monatliche Nachprüfung.

Zwei Checks fürs Telefon

Nehmen Sie dafür Ihr eigenes Gerät, nicht den Simulator im Browser.

Zwei Minuten, die die meisten Selbsttests auslassen.

Alles bisher setzt einen Rechner voraus, und der größte Teil Ihres Verkehrs kommt von woanders. Zwei zusätzliche Prüfungen dauern je zwei Minuten auf dem Telefon.

Drehen Sie das Gerät. Funktioniert die Seite in beiden Ausrichtungen, oder ist sie auf Hochformat festgelegt und verbirgt im Querformat Inhalte? Eine feste Ausrichtung schließt alle aus, deren Telefon an einem Rollstuhl oder einem Ständer montiert ist.

Treffen Sie die kleinen Bedienelemente. Das Schließen-Kreuz eines Pop-ups, der Mengenregler, die Symbole in einer Werkzeugleiste. Wenn Sie mit der Fingerkuppe danebentreffen, geht es allen so, und WCAG 2.2 hat dafür inzwischen ein eigenes Kriterium.

Wie Sie Funde festhalten

Die Notizform entscheidet darüber, ob aus dem Test ein Ticket wird.

Schreiben Sie je Befund eine Zeile in der Form: Auf dieser Seite, beim Versuch dies zu tun, ist das passiert. Mehr braucht eine Entwicklerin nicht, um den Fall nachzustellen, und es ist deutlich brauchbarer als ein Verweis auf eine Kriteriennummer. Widerstehen Sie der Versuchung, die technische Ursache zu raten: Die Notiz, dass die Datumsauswahl mit der Tastatur nicht erreichbar ist, hilft; eine Vermutung über ein fehlendes Attribut schickt jemanden in die falsche Richtung.

Halten Sie die Liste dort, wo das ganze Team sie sieht, und markieren Sie jeden Punkt damit, was er eine Person hindert zu tun, statt mit einer spontan erfundenen Schwere. Wenn später der Prüfbericht kommt, fügt er sich in diese Notizen ein, statt sie zu ersetzen, und das Team erkennt die Probleme wieder, weil es die Hälfte davon selbst gefunden hat.

Nahaufnahme einer Lupe
Eine Zeile je Befund genügt.

Wer im Team was testen sollte

Verteilt ist diese Liste plötzlich eine Gewohnheit statt einer Aufgabe.

Die zehn Checks lassen sich sinnvoll aufteilen, und das erhöht die Wahrscheinlichkeit erheblich, dass sie tatsächlich durchgeführt werden.

Redaktion. Bilder, Linktexte, Text in Grafiken, Untertitel. Vier Punkte, kein technisches Wissen nötig, und in vielen Unternehmen die Hälfte aller Befunde.

Design. Kontraste, Fokusdarstellung, Zielgrößen auf dem Telefon. Diese Punkte entstehen im Designsystem und werden dort auch gelöst, meist ein für alle Mal.

Entwicklung. Tastaturreihenfolge, Dialoge, Formularfehler, Zoom und Umbruch. Die vier Punkte, die tatsächlich Aufgaben blockieren.

Wenn jede Gruppe ihre eigenen Punkte einmal im Quartal durchgeht, bleibt eine Website über Jahre in einem vernünftigen Zustand, ohne dass jemals ein Projekt dafür aufgesetzt werden muss. Das ist der eigentliche Wert dieser Liste: nicht der erste Durchgang, sondern die Gewohnheit.

Ein letzter Hinweis zur Erwartungshaltung: Es ist normal, beim ersten Durchgang mehrere Punkte zu finden, und es ist kein Zeichen schlechter Arbeit. Websites entstehen über Jahre, aus vielen Händen, mit Werkzeugen, die niemand unter diesem Gesichtspunkt ausgewählt hat. Die Frage ist nicht, ob es Befunde gibt, sondern ob jemand sie kennt und in welcher Reihenfolge sie verschwinden.

Was sich zwischen zwei Durchgängen verändert

Erfahrungsgemäß drei Dinge. Ein Plugin oder eine App wird aktualisiert und bringt ein neues Overlay mit. Das Marketing baut eine Kampagnenseite, die von der üblichen Vorlage abweicht. Und irgendwo wird ein Bedienelement gegen ein hübscheres ausgetauscht, das die Tastaturbedienung verliert, die das alte mitgebracht hatte.

Keine dieser Veränderungen wird böswillig vorgenommen, und keine taucht in einem Ticketsystem als Barriere auf. Genau deshalb ist die Wiederholung der Checks wirksamer als jede einmalige Anstrengung, und genau deshalb prüfen wir im Tarif monatlich nach und vergleichen jeden Durchlauf mit dem vorherigen.

Häufige Fragen zum Selbsttest

Kann ich meine Website selbst testen?

Ja, die häufigsten Barrieren finden Sie in zwanzig Minuten mit der Tastatur, ohne Vorkenntnisse.

Was brauche ich dafür?

Einen Browser, eine Tastatur und die Seite, auf der Ihr Geschäft stattfindet. Ein Screenreader hilft, ist aber für den ersten Durchgang nicht nötig.

Ersetzt das eine Prüfung?

Nein. Diese Checks finden die häufigen Fehler, nicht alle 56 Kriterien der Stufe AA.

Welcher Check ist der wichtigste?

Der Tastaturdurchgang. Wenn eine Aufgabe ohne Maus nicht erledigt werden kann, ist alles andere zweitrangig.

Kann das Marketing das machen?

Vier der zehn Punkte erfordern überhaupt kein technisches Wissen.

Wie lange dauert ein Durchgang?

Zwanzig Minuten für eine Seite, etwa zwei Stunden für eine kleine Website.

Was mache ich mit einem Fund?

Notieren Sie Seite, Aufgabe und was passiert ist. Diese Notiz ist für Entwicklerinnen wertvoller als jeder Punktwert.

Sollen wir vor der Prüfung beheben?

Beheben Sie das Offensichtliche. Die Prüfung findet das, was eine Checkliste nicht sieht, und der Preis ändert sich dadurch nicht.

Brauche ich einen Screenreader?

Für ein gründliches Ergebnis ja, für den ersten Durchgang nicht.

Kann ich Kontraste selbst prüfen?

Ja, mit einem kostenlosen Kontrastwerkzeug und den Farbwerten aus Ihrem Designsystem.

Was sieht diese Liste nicht?

Dokumente, Untertitel, native Apps und alles hinter einem Login.

Wie unterscheidet sich die Prüfung?

Alle Kriterien, echte assistive Technik, alle Abläufe, Befunde nach Priorität und am Ende eine unterschriebene Erklärung.

Was kostet die Prüfung?

690 € im Jahr für die EU, 1.290 € für drei Domains und sechs Sprachen, 1.990 € inklusive UK und Kanada.

Wie lange dauert sie?

Fünf Werktage ab vollständigem Formular.

Gibt es eine Testphase?

Sieben Tage, ohne Karte.

Darf ich nach dieser Liste eine Erklärung veröffentlichen?

Eine Erklärung setzt eine Prüfung voraus. Eine Checkliste ist keine Prüfung.

Bekomme ich eine Mängelliste?

Ja, nach Priorität sortiert, mit der konkreten Änderung.

Womit fange ich an?

Mit dem kostenlosen Scan, danach mit dieser Liste.