Barrierefreie QR-Codes: Höhe, Kontrast, zweiter Weg

Warum Barrierefreiheit zählt

Ein Code in Augenhöhe von Stehenden schließt Rollstuhlfahrende aus. Eine Zielseite ohne Alternativtexte schließt Menschen aus, die einen Screenreader nutzen. Ein kontrastarmer Designercode schließt alle aus, die schlecht sehen. Das zu beheben kostet selten Geld, und in Deutschland ist es für einen wachsenden Teil der Anbieter inzwischen verpflichtend. Hier stehen die Punkte, die im Alltag wirklich etwas ändern, und danach die Regelwerke, an denen sich das hierzulande messen lässt.

Hürden verstehen

Sehbeeinträchtigungen

Blindheit
Geringes Sehvermögen
Farbfehlsichtigkeit
Lichtempfindlichkeit

Motorische Beeinträchtigungen

Eingeschränkte Beweglichkeit
Zittern
Lähmungen
Koordinationsschwierigkeiten

Kognitive Beeinträchtigungen

Lernbeeinträchtigungen
Gedächtnisprobleme
Aufmerksamkeitsschwierigkeiten
Verarbeitungsschwierigkeiten

Hörbeeinträchtigungen

Gehörlosigkeit
Schwerhörigkeit
Auditive Verarbeitung

Barrierefreiheit des QR-Codes

Gestaltung des gedruckten Codes

Größe und Kontrast

Mindestens 2 cm x 2 cm für den Scan aus der Nähe
Hoher Kontrast (dunkel auf hell)
Kontrastarme Farbkombinationen vermeiden
Mit Kontrastprüfern testen

Platzierung

Für Rollstuhlfahrende erreichbare Höhe (90-120 cm)
Spiegelnde Oberflächen vermeiden
Gute Beleuchtung
Stabile, ebene Flächen

Tastbare Markierungen

Erhabene Ränder für blinde Menschen
Beschriftung in Braille daneben
Tastbare Wegweiser
Physische Führungen

Alternative Zugangswege

Bieten Sie immer eine Alternative

Die Adresse als Text unter dem QR-Code
Ein NFC-Tag als Begleitung
Eine kurze Adresse zum Eintippen
Eine Telefonnummer

Beispiel: "QR-Code scannen oder besuchen: bit.ly/abc123 Oder anrufen: 1-800-XXX-XXXX"

Barrierefreiheit der Landingpage

Erfüllung der WCAG

Wahrnehmbar

Alternativtexte für Bilder
Untertitel für Videos
Ausreichender Kontrast
Skalierbarer Text

Bedienbar

Navigation per Tastatur
Sprunglinks
Sichtbarer Fokus
Keine Zeitbegrenzung

Verständlich

Klare Sprache
Einheitliche Navigation
Fehler benennen
Hilfe verfügbar

Robust

Gültiges HTML
ARIA-Beschriftungen
Mit Screenreadern verträglich
Zukunftsfester Code

Optimierung für Screenreader

Semantisches HTML

Saubere Überschriftenhierarchie
Aussagekräftige Linktexte
Beschriftete Formularfelder
Echte Listenstrukturen

ARIA-Beschriftungen

Beschreibende Beschriftungen
Anzeige von Zuständen
Live-Bereiche
Definierte Rollen

Navigation per Tastatur

Unverzichtbare Elemente

Logische Tabulatorreihenfolge
Sichtbarer Fokus
Navigation überspringen
Tastenkürzel

Interaktive Elemente

Bedienbare Schaltflächen
Navigation in Formularfeldern
Umgang mit Dialogfenstern
Auswahlmenüs

Vorkehrungen bei Sehbeeinträchtigung

Für blinde Menschen

Mit Screenreadern verträgliche Landingpages
Audiobeschreibung für optische Inhalte
Tastbare Markierungen am QR-Code
Alternativen per Telefon

Für geringes Sehvermögen

Kontrastreiche Darstellung
Vergrößerbarer Text
Verträglichkeit mit dem Zoom
Große Berührungsflächen

Für Farbfehlsichtigkeit

Sich nie allein auf Farbe verlassen
Muster und Beschriftungen nutzen
Mit Simulatoren testen
Alternativen anbieten

Vorkehrungen bei motorischer Beeinträchtigung

Leichteres Scannen

Größere QR-Codes
Stabile Platzierung
Großzügigere Zeitfenster
Bedienung mit einer Hand

Gestaltung der Landingpage

Große Berührungsflächen (mindestens 44 px)
Großzügige Abstände
Einfache Interaktionen
Nachsicht bei Fehlern

Kognitive Barrierefreiheit

Klare Kommunikation

Einfache Sprache
Kurze Sätze
Klare Anleitungen
Optische Hinweise

Navigation

Einheitliches Layout
Klare Rückmeldung
Fortschrittsanzeigen
Leichter Weg zurück

Kognitive Last senken

Wenig Ablenkung
Fokussierte Inhalte
Informationen in Häppchen
Gedächtnisstützen

Barrierefreiheit testen

Automatisierte Prüfung

WAVE-Werkzeug
Axe DevTools
Lighthouse-Prüfung zur Barrierefreiheit
Kontrastprüfer

Manuelle Prüfung

Bedienung nur per Tastatur
Prüfung mit Screenreader
Prüfung mit Zoom
Simulation von Farbfehlsichtigkeit

Nutzertests

Menschen mit Behinderungen einbeziehen
Verschiedene Hilfstechnologien
Szenarien aus dem Alltag
Rückmeldungen einarbeiten

Rechtliche Vorgaben

ADA (Vereinigte Staaten)

Webseiten als öffentliche Einrichtungen
Wirksame Kommunikation vorgeschrieben
Angemessene Vorkehrungen
Risiko von Klagen

WCAG-Standards

Stufe A: Minimum
Stufe AA: empfohlen
Stufe AAA: ideal
Rechtlicher Bezugspunkt

Weitere Vorschriften

Section 508 (Vereinigte Staaten)
EN 301 549 (Europa)
AODA (Ontario, Kanada)
Nationale Gesetze

Checkliste für die Umsetzung

Gestaltung des gedruckten QR-Codes

[ ] Ausreichende Größe zum Scannen
[ ] Kontrastreiche Farben
[ ] Erreichbare Anbringhöhe
[ ] Gute Beleuchtung
[ ] Alternative Adresse angegeben
[ ] Tastbare Markierungen, wo sinnvoll

Landingpage

[ ] Erfüllt WCAG AA
[ ] Mit Screenreader geprüft
[ ] Per Tastatur bedienbar
[ ] Kontrastreicher Modus
[ ] Skalierbarer Text
[ ] Alternativtexte für Bilder
[ ] Untertitel für Videos
[ ] Klare, einfache Sprache

Prüfung

[ ] Automatisierter Scan zur Barrierefreiheit
[ ] Manuelle Prüfung per Tastatur
[ ] Prüfung mit Screenreader
[ ] Simulation von Farbfehlsichtigkeit
[ ] Nutzertests mit Menschen mit Behinderungen

Quellen

Werkzeuge zum Testen

WAVE Web Accessibility Tool
Axe DevTools
NVDA Screen Reader
VoiceOver (iOS/Mac)
Color Oracle

Leitlinien

WCAG-2.1-Richtlinien
Materialien von WebAIM
A11Y Project
Deque University

Die Regelwerke, die hierzulande gelten

Für Barrierefreiheit gibt es in Deutschland keine Grauzone mehr, sondern zwei Stränge und drei Normen, die den Ausschlag geben.

Öffentliche Stellen richten sich nach der Barrierefreien-Informationstechnik-Verordnung. Sie verlangt barrierefreie Webangebote, eine Erklärung zur Barrierefreiheit und Basisinformationen in Leichter Sprache sowie in Deutscher Gebärdensprache. Für private Anbieter setzt das Barrierefreiheitsstärkungsgesetz den europäischen Rechtsakt zur Barrierefreiheit um und erfasst unter anderem Dienstleistungen im elektronischen Geschäftsverkehr, mit Ausnahmen für Kleinstunternehmen. Wer also eine Bestellung, eine Buchung oder einen Vertragsabschluss hinter einen Code legt, sollte prüfen, ob er darunter fällt.

Geprüft wird gegen die europäische Norm EN 301 549, die für Webinhalte auf die WCAG verweist. Das ist die technische Messlatte für die Zielseite: Kontraste, Tastaturbedienbarkeit, Beschriftungen, Alternativtexte. Für den gedruckten Teil helfen zwei weitere Normen mehr als jede Designdiskussion. DIN 1450 beschreibt, was Schrift leserlich macht, also Schriftgröße, Strichstärke und Kontrast für den begleitenden Text neben dem Code. Und DIN 18040 beschreibt für öffentlich zugängliche Gebäude die Greifbereiche für Bedienelemente. Wer den Code in diesem Bereich anbringt statt auf Stehhöhe, erreicht sitzende Nutzer, Kinder und kleinere Menschen mit.

Eine Regel steht über allem und ist zugleich die billigste. Der Code darf nie der einzige Weg zur Information sein. Drucken Sie die Adresse lesbar darunter, halten Sie die Papierfassung bereit, nennen Sie eine Telefonnummer. Für Bildschirmnutzer gehört ein sinnvoller Alternativtext an das Codebild, wie in unserem Beitrag zum Alternativtext für QR-Codes beschrieben.

Drei Verbesserungen für heute

Drucken Sie die Zieladresse unter jeden öffentlich zugänglichen Code, gleichen Sie Ihre Anbringhöhen mit dem Bereich von 90-120 cm ab, und schicken Sie Ihre Landingpage einmal durch WAVE. Diese drei Änderungen kosten fast nichts, decken die häufigsten Hürden ab und geben Ihnen eine belastbare Ausgangslage, während Sie die umfassendere WCAG-Prüfung planen.