Die Barrierefreiheit einer Website hilft Besucherinnen und Besuchern, mit unterschiedlichen Hilfsmitteln auf Inhalte und Funktionen zuzugreifen. Dieser Leitfaden unterstützt Sie dabei, Prüfungen von Tastaturbedienung, Kontrast, Alternativtexten, Formularen und Lesbarkeit auf Grundlage der WCAG auf Ihre Unternehmenswebsite anzuwenden.
Ein Besucher kann das Menü möglicherweise nicht mit der Tastatur erreichen. Vielleicht kann er sich die Bezeichnung eines Formularfeldes nicht vorlesen lassen. Wegen eines zu geringen Kontrasts kann er den Preis möglicherweise nicht erkennen. Solche Barrieren führen dazu, dass potenzielle Kunden die Angebotsanfrage, Terminvereinbarung oder den Kaufprozess abbrechen.
Die Barrierefreiheit einer Website unterstützt Menschen mit unterschiedlichen Fähigkeiten und Nutzungsbedingungen dabei, Aktionen auf Ihrer Website auszuführen. Das Thema betrifft nicht nur Besucher, die Screenreader verwenden. Auch eine vorübergehende Verletzung, helles Sonnenlicht, ein kleiner Bildschirm oder eine langsame Verbindung beeinflussen die Zugänglichkeit.
Was bringt die Barrierefreiheit Ihrer Website Ihrem Unternehmen?
WCAG ist ein internationaler Rahmen mit der Bezeichnung Richtlinien für barrierefreie Webinhalte. WCAG 2.2 bietet Designern, Content-Teams und Entwicklern gemeinsame Prüfkriterien. Die meisten Unternehmenswebsites orientieren sich als erstes Ziel an der Konformitätsstufe AA.
- Wahrnehmbarkeit: Besucher müssen Texte, Bilder und Medien über unterschiedliche Sinne erfassen können.
- Bedienbarkeit: Besucher müssen jede Aufgabe mit Maus, Tastatur oder assistiven Technologien erledigen können.
- Verständlichkeit: Überschriften, Anweisungen und Fehlermeldungen müssen eine klare Orientierung bieten.
- Robustheit: Der Code muss mit Browsern und assistiven Technologien zuverlässig zusammenarbeiten.
Diese Prinzipien betreffen eher Komponenten als einzelne Seiten. Prüfen Sie zuerst wiederkehrende Elemente wie Menüs, Pop-ups, Suche, Filter und Formulare. Bewerten Sie rechtliche Anforderungen zusätzlich anhand Ihrer Verträge und Ihrer Branche.
Die Konformitätsstufe AA allein liefert keinen ausreichenden Nachweis für eine Erklärung zur Barrierefreiheit. Bewahren Sie Prüfprotokolle für einzelne Seiten und Komponenten auf. Nehmen Sie jede neue Funktion in den Umfang dieser Protokolle auf.
Legen Sie den Prüfumfang anhand der Besucherreise fest
Beginnen Sie die Prüfung nicht mit sämtlichen Seiten. Wählen Sie repräsentative Abläufe, die vom geschäftlichen Ziel des Besuchers ausgehen. Für ein Dienstleistungsunternehmen sind das Anfrageformular, der Telefonlink und der Schritt zur Terminvereinbarung wichtig. Bei einem Onlineshop stehen Produktsuche, Filterung, Warenkorb und Bezahlung im Vordergrund.
Bei einer Angebotsanfrage öffnet der Besucher beispielsweise die Leistungsseite, prüft das Paket und sendet das Formular ab. In diesem Ablauf müssen Überschriften, Links, Auswahlfelder und Fehlermeldungen zusammenspielen. Nur das Formular zu prüfen, reicht nicht aus.
Notieren Sie für jeden Ablauf die Einstiegs-, Entscheidungs- und Abschlusspunkte. Gruppieren Sie Seiten, die dieselbe Vorlage verwenden. So erkennen Sie, wie sich ein Fehler in einer einzelnen Komponente auf die gesamte Website auswirkt.
Beschränken Sie die Prüfung nicht auf die Startseite. Auch Suchergebnisse, ein leerer Warenkorb und eine Fehlerseite können den Ablauf unterbrechen. Testen Sie die Cookie-Einstellungen in einem eigenen Szenario.
- Seitenadresse und Name der Komponente.
- Die Aktion, die der Besucher abschließen möchte.
- Das Gerät oder die assistive Technologie, bei deren Nutzung die Barriere auftritt.
- Das betreffende WCAG-Kriterium und die Priorität der Behebung.
- Verantwortliche Person, Abnahmekriterium und Zieldatum.
Nehmen Sie diese Punkte bei neuen Projekten in das Webdesign-Briefing auf. So arbeiten Design- und Entwicklungsteams mit denselben Abnahmekriterien.
Führen Sie alle Aktionen mit der Tastatur aus
Menschen, die keine Maus verwenden, navigieren mit der Tastatur durch die gesamte Seite. Der Tastaturtest ist der schnellste manuelle Prüfschritt bei einer Barrierefreiheitsprüfung. Laden Sie die Seite neu und führen Sie die gewünschte Aktion ausschließlich mit den Tasten Tab, Shift+Tab, Enter, Leertaste und Esc aus.
Individuell entwickelte Komponenten verursachen hier die meisten Fehler. Jedes Element, das optisch wie eine Schaltfläche wirkt, muss auch über die Tastatur dieselbe Aktion ermöglichen. Der Tastaturfokus darf nicht auf ein unsichtbares oder geschlossenes Element springen.
Halten Sie die Fokusreihenfolge sichtbar
Jedes fokussierbare Element muss eine deutlich erkennbare Fokusanzeige haben. Die Fokusreihenfolge muss der Lesereihenfolge auf dem Bildschirm entsprechen. Ein Cookie-Hinweis oder ein fest positioniertes Chatfenster darf den Fokusring nicht verdecken.
- Heben Sie die Fokusfarbe vom Hintergrund ab.
- Vergleichen Sie die Fokusreihenfolge mit der visuellen Reihenfolge.
- Stellen Sie sicher, dass der Fokus beim Laden der Seite nicht auf unsichtbare Elemente springt.
Sorgen Sie bei aufklappbaren Komponenten für die Rückkehr des Fokus
Aufklappbare Menüs, Tabs und modale Fenster, also auf dem Bildschirm erscheinende Dialogfelder, müssen gesondert getestet werden. Enter und Leertaste müssen Schaltflächen auslösen. Esc muss die eingeblendete Ebene schließen. Solange das modale Fenster geöffnet ist, muss der Fokus innerhalb des Fensters bleiben. Nach dem Schließen muss der Fokus zur Schaltfläche zurückkehren, mit der das Fenster geöffnet wurde.
Fügen Sie als ersten per Tastatur erreichbaren Punkt der Seite einen Link zum Überspringen zum Hauptinhalt hinzu. Der Link soll sichtbar werden, sobald er den Fokus erhält. Verwenden Sie für Elemente mit Klickfunktion das Element button, also eine Schaltfläche. Fügen Sie nicht lediglich einem div-Element, also einem allgemeinen Container, ein Klickereignis hinzu.
Prüfung von Farbkontrast und Lesbarkeit
Farbe darf nicht das einzige Signal sein, das eine Bedeutung vermittelt. Kennzeichnen Sie ein fehlerhaftes Feld nicht nur durch einen roten Rahmen. Ergänzen Sie auch einen Fehlertext, ein Symbol oder eine Feldüberschrift. Nutzen Sie denselben Ansatz für Angaben zu Lagerbestand, Rabatten und Pflichtfeldern.
Messen Sie Kontrastverhältnisse für jede Komponente
Streben Sie für die Konformitätsstufe AA bei normalem Text ein Kontrastverhältnis von mindestens 4,5:1 an. Bei großem Text sollten Sie mindestens 3:1 anstreben. Prüfen Sie auch bei Schaltflächenrändern, Begrenzungen von Formularfeldern und grafischen Symbolen das Verhältnis von 3:1.
Prüfen Sie den Kontrast sowohl im Designprogramm als auch auf der funktionsfähigen Seite. Transparente Ebenen, Hintergrundbilder und Dunkelmodus-Optionen verändern die endgültige Darstellung. Verlassen Sie sich nicht allein auf den Farbcode in der Designdatei.
Erhöhen Sie den Browser-Zoom auf 200 %. Prüfen Sie, dass sich Texte nicht überlagern und kein horizontales Scrollen erforderlich wird. Verlassen Sie sich bei Links im Fließtext nicht ausschließlich auf Farbunterschiede. Ergänzen Sie eine Unterstreichung oder einen anderen visuellen Hinweis.
Gliedern Sie den Text mit Überschriften. Schreiben Sie kurze Absätze. Ermöglichen Sie einen Zeilenabstand von mindestens dem 1,5-Fachen der Schriftgröße. Zwängen Sie Texte nicht in Boxen mit fester Höhe.
Vermitteln Sie den Zweck eines Bildes mit Alternativtexten
Ein Screenreader vermittelt über den Alternativtext die Funktion oder den Informationsgehalt eines Bildes. Der Alternativtext beschreibt nicht jedes Pixel des Bildes. Er vermittelt die Information, die der Besucher durch dieses Bild verstehen soll.
Entscheiden Sie anhand der Art des Bildes
- Informative Abbildung: Erläutern Sie kurz das Thema und den Kontext.
- Funktionales Symbol: Benennen Sie die Aktion, die das Symbol auslöst.
- Dekorative Abbildung: Verwenden Sie einen leeren Alternativtext. So liest der Screenreader keine unnötigen Informationen vor.
- Grafik oder Diagramm: Erläutern Sie die zentrale Erkenntnis im Text. Stellen Sie die Daten bei Bedarf als Liste bereit.
Wenn eine Abbildung Text enthält, stellen Sie denselben Text auch auf der Seite bereit. Verwenden Sie weder den Dateinamen noch eine Reihe von Keywords als Alternativtext. Lassen Sie bei informativen Abbildungen das Feld für den Alternativtext in der Upload-Maske nicht leer.
Die Inhaltsredaktion sollte den Zweck der Abbildung auswählen können. Bei der Auswahl einer dekorativen Abbildung sollte das System den leeren Alternativtext beibehalten. Beschreiben Sie bei Produktabbildungen unterscheidende Merkmale wie Farbe, Modell oder Packungsinhalt. Wiederholen Sie nicht dieselben Informationen bei jeder Abbildung.
Testen Sie Formularbeschriftungen und den Umgang mit Fehlern
Kontakt-, Angebots- und Zahlungsformulare wirken sich unmittelbar auf den Geschäftserfolg aus. Jedes Eingabefeld muss eine eindeutige Beschriftung haben. Ein Platzhaltertext allein ersetzt keine Feldbeschriftung. Sobald Nutzer mit der Eingabe beginnen, verschwindet der Platzhaltertext.
Benennen Sie die Felder eindeutig
- Verknüpfen Sie Felder wie Name, E-Mail und Telefon mit einem label, also einer Feldbeschriftung.
- Fassen Sie Optionsfelder und Kontrollkästchen in einem fieldset, also einer Feldgruppe, zusammen.
- Beschreiben Sie die Optionsgruppe mit einem legend, also einer Gruppenüberschrift.
- Kennzeichnen Sie Pflichtfelder zusätzlich zum Sternchen auch mit einem Texthinweis.
- Definieren Sie für Namens-, Adress- und Telefonfelder das Attribut für die automatische Vervollständigung.
Geben Sie Fehlermeldungen zusammen mit einem Lösungshinweis aus
Geben Sie nach dem Absenden des Formulars deutlich an, welches Feld ein Problem aufweist. Verwenden Sie nicht ausschließlich rote Farbe oder ein Ausrufezeichensymbol. Zeigen Sie oberhalb des Formulars eine Fehlerübersicht an und setzen Sie den Fokus auf diese Übersicht. Behalten Sie alle Angaben außer dem Passwort bei.
Auch Links zu Datenschutzhinweisen nach dem türkischen Datenschutzgesetz KVKK, vorvertraglichen Informationen und Verträgen müssen per Tastatur geöffnet werden können. Der Linktext muss das Dokument benennen, das geöffnet wird.
Prüfen Sie bei Abläufen mit Adress-, Liefer- und Zahlungsdaten auf E-Commerce-Websites auch die Zeitlimits. Besucher sollten zusätzliche Zeit anfordern können oder vor dem Vorgang einen Hinweis auf das Zeitlimit erhalten.
Checkliste zur Barrierefreiheit Ihrer Website vor der Veröffentlichung
Automatische Prüfwerkzeuge erkennen bestimmte Probleme im Code. Sie können jedoch die Fokusreihenfolge oder den Kontext eines Textes nicht allein beurteilen. Kombinieren Sie bei jeder Version automatische Prüfungen mit manuellen Kontrollen und realistischen Aufgabenszenarien.
- Prüfen Sie die Seitensprache, die Überschriftenhierarchie und den Sprung zum Hauptinhalt.
- Formulieren Sie den Zweck jedes Links so, dass er auch unabhängig vom umgebenden Text verständlich ist.
- Testen Sie die Tab-Reihenfolge, die Sichtbarkeit des Fokus und das Verhalten der Esc-Taste.
- Messen Sie die Kontrastverhältnisse der Farben von Texten, Komponenten und Zuständen.
- Prüfen Sie die Alternativtexte der Abbildungen.
- Prüfen Sie die Untertitel von Videos und die Transkripte von Audioinhalten.
- Senden Sie das Formular mit fehlerhaften und korrekten Angaben ab. Lassen Sie sich Fehler- und Erfolgsmeldungen mit einem Screenreader vorlesen.
- Testen Sie den grundlegenden Ablauf auf einem mobilen Bildschirm, bei starker Vergrößerung und mit mindestens einem Screenreader.
Weisen Sie jedem festgestellten Problem eine verantwortliche Person, eine Priorität und einen Termin zur Behebung zu. Behandeln Sie blockierende Probleme, etwa im Hauptmenü oder bei der Zahlung, zuerst. Nehmen Sie Regeln für Alternativtexte und Überschriften in die Publikationsrichtlinien für Teams auf, die Inhalte hinzufügen.
Integrieren Sie die Prüfung in den Arbeitsablauf
Verschieben Sie die Barrierefreiheit nicht auf den Tag der Veröffentlichung. Geben Sie Farb- und Zustandsbeispiele bereits in der Designdatei frei. Prüfen Sie während der Entwicklung semantisches HTML, also bedeutungstragende Auszeichnung, und die Tastaturbedienung. Erfassen Sie nach der Veröffentlichung regelmäßig Rückmeldungen von Nutzern.
Dieser Ansatz führt bei Webdesign-Projekten für Unternehmen die Entscheidungen zu Inhalten, Design und Entwicklung auf ein gemeinsames Ziel zusammen.
Häufig gestellte Fragen
Was sind die WCAG?
Die WCAG enthalten Kriterien für die Zugänglichkeit von Webinhalten. Halten Sie bei neuen Projekten die Kriterien der WCAG 2.2 und das angestrebte Konformitätsniveau AA bereits zu Projektbeginn fest. Das Team sollte dieses Ziel in die Tests für Design, Entwicklung und Veröffentlichung einbeziehen.
Reicht das WCAG-Konformitätsniveau AA für eine Unternehmenswebsite aus?
Das Konformitätsniveau AA bietet für die meisten Unternehmenswebsites einen praktikablen Einstieg. Öffentliche Einrichtungen, Finanzdienstleistungen und Projekte mit vertraglichen Vorgaben können jedoch zusätzliche Anforderungen mit sich bringen. Gleichen Sie die einschlägigen gesetzlichen Vorschriften und Vertragsbedingungen mit Ihrer Rechtsabteilung ab.
Reicht eine automatische Prüfung der Barrierefreiheit aus?
Nein. Prüfwerkzeuge können fehlende Beschriftungen und bestimmte Kontrastprobleme erkennen. Testen Sie die Tastaturreihenfolge, die Qualität der Beschreibungen und den Ablauf bei Fehlern zusätzlich mit Personen. Ein realistisches Aufgabenszenario macht Probleme sichtbar, die Prüfwerkzeuge nicht erkennen.
Kann ich eine bestehende Website barrierefrei machen, ohne sie vollständig neu zu gestalten?
Ermitteln Sie zunächst die am häufigsten genutzten Vorlagen und Conversion-Abläufe. Durch die Korrektur gemeinsam genutzter Komponenten kann Ihr Team viele Seiten gleichzeitig verbessern. Bearbeiten Sie anschließend die Inhalte und Medienbestände schrittweise.
Fazit und nächster Schritt
Nehmen Sie bei einer neuen Website oder einem Relaunch die Entscheidungen zur Barrierefreiheit von Anfang an in den Design- und Entwicklungsplan auf. Teilen Sie uns Ihre Seitenabläufe über das Angebotsformular mit; gemeinsam klären wir Ihre Ziele, Prioritäten und den technischen Umfang.
