Checkliste – 6 wichtige Kriterien für eine barrierefreie Website

Das Thema Barrierefreiheit gewinnt mehr und mehr an Bedeutung. Völlig zu Recht, denn Barrierefreiheit ermöglicht Mitmenschen mit physischen oder psychischen Einschränkungen, Web-Angebote ohne nennenswerte Einschränkungen nutzen zu können. Für Webseiten von öffentlichen Einrichtungen besteht bereits seit September 2018 die Pflicht (EU-Richtlinie, BITV 2.0), digitale Angebote barrierefrei zu gestalten.

Was hier laut den Web Content Accessibility Guidelines (WCAG) 2.1 unbedingt beachtet werden sollte, haben wir nachfolgend in einer Checkliste für barrierefreie Websites zusammengetragen.

Ausreichende Kontraste verwenden

• Kontraste für grafische Elemente

  • Bei grafischen Elementen, die zur Bedienung der Website oder zum Verständnis des Inhalts dienen, ist ein Kontrastverhältnis von mindestens 3:1 die Regel.
  • Beispiele: Navigationspunkte, Haken in einer Checkbox, alleinstehende Icons oder Linien in einem Graph.

• Farbverläufe bei grafischen Elementen

  • Bei Farbverläufen wird das Hauptelement zum Verstehen des Kontextes dem Hintergrund gegenübergestellt. An den Stellen, wo der Kontrast zwischen diesen beiden nicht ausreicht, wird die Hintergrundfarbe (der Farbverlauf) entfernt. Ist der Kontext hiernach noch verständlich, so ist der Farbverlauf ausreichend.

• Kontraste für Texte

  • Texte haben eigene Regeln, nach denen der allgemeine Kontrast 4,5:1 beträgt.
    Bei großen Schriften genügt jedoch schon ein Kontrast von 3:1, da größere Schriften an sich breiter sind. Die Kontraste dürfen nicht gerundet werden, also wäre hier auch 2,999:1 nicht ausreichend.
  • Möchten Sie ein höheres Level der Barrierefreiheit erreichen, so ist ein Kontrast von 7:1 für normalen Text und 4,5:1 für großen Text vorgesehen.

• Tool für Kontrastanalyse

  • Ob die Kontraste auf Ihrer Website ausreichen, lässt sich schnell mit Online-Tools wie dem WCAG Color Contrast Checker herausfinden.

Lesbare Texte

• Texte sollen skalierbar sein

  • Schriften sollten ohne weitere unterstützende Technologien um bis zu 200% vergrößert werden können, ohne dass Inhalt oder Funktionalität darunter leiden.
  • Ausgenommen hiervon sind Untertitel und Bilder von Texten.
  • Tastenkombination für die Vergrößerung bzw. Verkleinerung von Texten: STRG +/- bzw. CMD +/-

• Keine Bilder von Texten einsetzen

  • Allgemein sollte „richtiger“ Text anstatt einem Bild von einem Text verwendet werden. Diese werden häufig bei Zitaten oder besonderen Überschriften verwendet. Ausnahmen hierfür sind Bilder von Texten, die visuell anpassbar oder essentiell für den zu vermittelnden Inhalt sind.
  • Außerdem erhöht sich hierdurch die SEO (Suchmaschinenoptimierung) und sollte somit unabhängig der Barrierefreiheit verwendet werden.

• Alternativtexte für Nicht-Text-Inhalte bereitstellen

  • Textinhalte müssen außerdem als Alternative für Nicht-Text-Inhalte gegeben werden, z.B. für Bilder. Wenn ein Bild Text wiedergibt, so muss der Alternativtext hierzu mit dem auf dem Bild abgebildeten Text übereinstimmen.

Video- / Audioinhalte und Animationen

• Alternativen mit selbem Inhalt bereitstellen

  • Für reine Video- und reine Audioelemente sollte es eine Alternative geben, die denselben Inhalt an Informationen liefert. Dies kann z.B. in Textform passieren.

• Untertitel für Audioinhalte hinzufügen

  • Für aufgezeichnete Inhalte mit Audio, wie z.B. ein Video, muss es Untertitel geben. Ausgenommen hiervon sind Audioinhalte, die als Alternative zu Textinhalten eingebunden sind.

• Pausieren und Stoppen können

  • Jegliche Video- und Audioinhalte sowie Animationen und Bewegungen auf einer Website müssen pausiert bzw. gestoppt werden können, mit der zusätzlichen Möglichkeit zur Anpassung der Lautstärke. Beispiele hierfür wären automatisch ablaufende Bildergalerien oder Videos.

• Wiederholtes Blinken begrenzen

  • Es darf keinen Inhalt auf der Website geben, der dreimal pro Sekunde oder häufiger aufblinkt. Dies könnte sonst zu körperlichen Reaktionen bei betroffenen Personen führen und ist dringendst zu vermeiden.

Sprache definieren

• Sprache muss auslesbar sein

  • Damit Screen-Reader die Inhalte richtig interpretieren können, muss die Sprache der Seite und die einzelner Abschnitte auslesbar sein. Dies ist am einfachsten mit dem lang (= language) Attribut im HTML-Element festzulegen. Hiervon ausgeschlossen sind Namen, technische Fachbegriffe oder wenn die Wörter Umgangssprache des unmittelbar umgebenen Textes sind.

Barrierefreie Bedienung der Website

• Bedienung durch Tastatur ermöglichen

  • Nicht jeder kann eine handelsübliche Maus bedienen, sondern muss auf andere Art und Weise im Internet agieren. Hierzu zählt z.B. das Bedienen mit der Tastatur per Tab-Taste.
  • Der Tastatur-Fokus muss durch eine Hervorhebung sichtbar sein. Diese Hervorhebung sollte sowohl durch Form als auch Farbe/Helligkeit sichtbar gemacht werden.
  • Tastaturkürzel müssen ausgestellt oder geändert werden können.

• Bedienung mit der Maus überprüfen

  • Werden eine einfache Maus oder ein anderweitiger Pointer benutzt, muss mindestens einer der folgenden Punkte gegeben sein:
    • Down-Event führt nicht zur Ausführung der Funktion
    • Up-Event führt Funktion aus, kann abgebrochen/rückgängig gemacht werden
    • Up-Event hebt Ergebnis vom Down-Event auf
    • Vervollständigung auf Down-Event ist essentiell

• Fokus-Effekt darf den Kontext nicht ändern

  • Bekommt eine UI-Komponente den Fokus-Effekt, so darf sich dabei sein Kontext nicht verändern. Es darf z.B. nicht ein Kontaktformular abgeschickt werden, wenn der Abschicken-Button den Fokus bekommt oder ein Untermenu ausklappen, wenn ein Menüpunkt in der Navigation fokussiert wird.

Sinnvolle Struktur erstellen

• Lesefolge berücksichtigen

  • Für das allgemeine Verständnis als auch für Vorlese-Programme ist eine nachvollziehbare Struktur ein Muss.
    Ein solches Programm muss die gegebenen Informationen, Strukturen und Beziehungen der Inhalte der Website auslesen können. Dies beinhaltet auch die Lesefolge der Website. Diese kann teils optisch verständlich, jedoch falsch umgesetzt worden sein, sodass die einzelnen Abschnitte nicht in der vorgesehenen Reihenfolge erkannt werden. Hierzu gehören auch UI-Komponenten, da diese den Fokus-Effekt auch in Lesefolge erhalten.
  • Zu berücksichtigen sind z.B. die richtige Reihenfolge der Überschriften (H1, H2, H3, etc) und die Lesefolge eines Screen-Readers im Vergleich zu der Lesefolge eines normal-sehenden Menschen.

• Wiederholende Blöcke überspringen

  • Auf einigen Websites gibt es Inhalte, die sich auf mehreren Unterseiten wiederholen. Hierzu zählen z.B. Werbeanzeigen und Navigationslinks. Diese redundanten Informationen werden von den normalen Verbrauchern im Kopf schnell ausgeblendet. Screen-Reader jedoch lesen alles vor, was sie auf der Website vorfinden. Das bedeutet, dass alle Navigationslinks und Headerbilder auf jeder Seite vorgelesen werden und durchgeschaltet werden müssen, um an den eigentlichen Inhalt der Seite zu gelangen. Dies kann mit einem Link zum Hauptinhalt der Seite vor der Navigation umgangen werden.

• Metadaten erstellen

  • Jede strukturierte Seite sollte Metadaten besitzen. Sie dienen der schnellen Orientierung in bzw. zwischen Websites.
  • Durch den title-tag z.B. können Menschen mit Kurzzeitgedächtnisproblemen den Inhalt der Seite schnell identifizieren, da der Titel im Tab des Browsers angezeigt wird.
  • Der Seitentitel und die Beschreibung sollten dabei sinnvoll und nachvollziehbar sein, also den Inhalt zusammenfassen. So wird die allgemeine Orientierung im Internet erleichtert.

Weitere Tipps und Hinweise

• Schaffen keine echte Barrierefreiheit:
  • Fügen keine Alt-Texte hinzu, beheben keine ARIA-Fehler und verbessern die Tastatursteuerung nicht.
• Irreführende Versprechungen:
  • Werden als kostengünstige und zeitsparende Lösung vermarktet, liefern aber keine vollwertige Barrierefreiheit. Aufwendige manuelle Anpassungen sind daher weiterhin erforderlich.
• Erhöhtes Risiko neuer Barrieren:
  • Falsch konfigurierte Overlays können zusätzliche Hürden schaffen.

• "Barrierefreiheit mit Overlay-Tools? Achtung vor falschen Werbeversprechen" - Deutscher Blinden- und Sehbehindertenverband
• "Overlays für mehr Barrierefreiheit? Warum das keine gute Idee ist" - BIK
• "Gemeinsame Einschätzung der Überwachungsstellen des Bundes und der Länder für die Barrierefreiheit von Informationstechnik zum Einsatz von Overlay-Tools" - Überwachungsstelle des Bundes für Barrierefreiheit und Informationstechnik

Automatische Testtools bieten keine vollständige Barrierefreiheitsanalyse

• Verlässliche Basisprüfungen:
  • Tools erkennen zuverlässig, ob Bilder mit Alt-Texten versehen sind, damit Screenreader-Nutzer den Bildinhalt verstehen können.
  • Sie überprüfen die HTML-Struktur auf Barrierefreiheitsstandards, wie z. B. korrekte Überschriftenhierarchien und semantische Elemente.
• Begrenzte Abdeckung der WCAG-Kriterien:
  • Aber nur ca. 35 % der WCAG-Kriterien lassen sich automatisiert prüfen. Automatische Tools haben Schwierigkeiten, Inhalte im Kontext zu prüfen und erfassen daher nicht alle Aspekte der Barrierefreiheit.
• Risiko von Fehlinterpretationen:
  • Automatische Prüfungen liefern oft falsch-positive oder falsch-negative Ergebnisse, was zu einer irreführenden Einschätzung der Barrierefreiheit führen kann.

Fazit: Die Ergebnisse automatischer Prüf-Tools sind zu Beginn wertvoll, sollten aber durch Expertenanalyse und manuelle Tests ergänzt werden, um eine vollständige Barrierefreiheitsbewertung zu gewährleisten.

Weitere Informationen: "Automatische Prüftools für Barrierefreiheit: Was sie können und was nicht" - Netz-Barrierefrei.de

Vorteile einer barrierefreien Website

Die Vorteile einer barrierefreien Website sind weitreichend. Durch die Inklusion eingeschränkter Menschen erhöht sich die Zahl der Besucher Ihrer Website. Durchdachte Website-Strukturen und Metadaten erhöhen zudem die Usability Ihrer Website. Dies ist für alle Nutzer von Vorteil, da auch Menschen ohne Behinderungen von guten Strukturen profitieren. Zudem verbessert das Hinzufügen der Metadaten, durchdachten Strukturen und das Hinterlegen von Alternativinhalten die SEO und hilft Ihnen damit, Ihre Website bei Google höher platzieren zu lassen.

Fazit

Mitmenschen mit Einschränkungen profitieren erheblich von barrierefrei gestalteten Webseiten. Und Ihnen bieten sich über mehr zufriedene Besucher größere Chancen, potentielle Kunden zu gewinnen. Der Nutzen für alle Beteiligten ist somit groß, so dass es lohnt, in barrierefreie Webseiten zu investieren.

Download der Checkliste für barrierefreie Websites

In dem folgendem zum Download verfügbaren PDF finden Sie nochmals eine Checkliste alle auf dieser Seite aufgelisteten Faktoren für eine barrierefreie Website.

PDF Downloaden