Beitrag vom

Checkliste – 6 wichtige Kriterien für eine barrierefreie Website

Illustration eines Monitors mit Icons zu Barrierefreieheit umzu

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.
Beispiel eines nicht barrierefreien Buttons
Der Kontrast des Hintergrundes ist auf der rechten Seite unzureichend
Beispiel eines barrierefreien Buttons
Der Kontrast des Hintergrundes ist gut
  • 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.
Beispiel eines guten barrierenfreien Kontrastes
Der Kontrast des Hintergrundes ist gut gewählt
Beispiel eines nicht barrierefreien Kontrastes
Der Kontrast des Hintergrundes ist nicht gut gewählt

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.
Beispiel einer barrierefreien Bildergalerie
Beispiel einer bedienbaren und anhaltbaren Bildergalerie
Beispiel einer barrierefreien Bildergalerie
Beispiel einer nicht bedienbaren Bildergalerie

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.
Barrierefrei bedienbare Navigation
Beispiel vom Fokus-Effekt (Punkt "Böwa") im Vergleich zum Active-Effekt (Punkt "Start")

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.
Aufzählung nach Lesefolge  (von links nach rechts)
In welcher Reihenfolge Screenreder den Text vorlesen (pro Spalte)
Richtige Reihenfolge für Screenreader, aber Lesefolge nicht eingehalten.
Gutes Layout für Lesefolge und Screenreder (Spaltenweisen, von links nach rechts)

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

Weitere Blogbeiträge

Wie eine Usability Optimierung an einer Website durchgeführt wird

Ziel einer Usability Optimierung ist die Verbesserung der Benutzerfreundlichkeit einer Website, sodass Nutzer die gesuchten Inhalte sofort finden und schnell erfassen können. In diesem Blogartikel zeigen wir am Beispiel der Website der Betten Remstedt GmbH wie eine Usability Optimierung durchgeführt wird.

Zur Anleitung für Usability Optimierungen

Bildschöne Visualisierungen Wie kann man Daten visualisieren?

Große Mengen an Daten lassen sich für uns alle einfacher in Form einer Datenvisualisierung erfassen.

Zu den Visualisierungsideen

Benötigen Sie auch eine barrierefreie Website?

Gerne analysieren wir auch Ihre Website und erstellen ein Konzept mit Verbesserungsvorschlägen
oder beraten Sie direkt zu einer konzeptionellen Neuausrichtung Ihres Webauftritts.

Jetzt anrufen:
0421 200 955 - 15

Oder schreiben Sie uns eine Nachricht:

Ihre Ansprechpartnerin

Ihre Ansprechpartnerin Jasmin Bleeke

Sprechen Sie mit uns