Barrierefreie Websites und BITV

So erreichen Sie alle Nutzenden

Online-Shopping, digitale Behördengänge oder Online-Ticketing - das Internet gehört für die meisten Menschen längst zum Alltag. Dadurch gewinnt die barrierefreie Gestaltung von Websites zunehmend an Bedeutung. Von einer barrierefreien Website profitieren am Ende alle: Menschen mit und ohne Beeinträchtigung sowie Website betreibende Personen. Wir zeigen Ihnen, warum barrierefreie Websites so wichtig sind und wie wir sie umsetzen. Am Ende geben wir Ihnen eine Checkliste für Ihre barrierefreie Website an die Hand.

Grafik: Verschiedene Icons

Warum sollten Websites barrierefrei gestaltet werden?

Vordergründig denken wir bei Barrierefreiheit an Menschen mit Behinderungen oder anderen Beeinträchtigungen. Hierzu zählen beispielsweise:

  • Blinde und sehbehinderte Menschen, die spezielle Screenreader verwenden.
  • Hörgeschädigte Personen, die auf Untertitelungen oder Transkriptionen angewiesen sind.
  • Menschen mit motorischen Einschränkungen, die alternative Eingabemethoden benötigen.
  • Personen mit Leseschwäche, die von klaren und einfachen Textstrukturen profitieren.

Laut dem Teilhabebericht der Bundesregierung hatten im Jahr 2017 14,5 Prozent der Deutschen in Privathaushalten Beeinträchtigungen - darunter 12,1 Prozent mit einer anerkannten Behinderung. Diese Zahlen verdeutlichen die Notwendigkeit, digitale Inhalte für diesen erheblichen Teil der Bevölkerung zugänglich zu machen.

Barrierefreiheit betrifft jedoch nicht nur Menschen mit dauerhaften Beeinträchtigungen. Was man oft nicht bedenkt: Einschränkungen gehen uns alle an. Das Spektrum umfasst auch temporäre oder situative Beeinträchtigungen, beispielweise:

  • Ein Armbruch erschwert die Benutzung einer Tastatur oder Maus.
  • Sie halten ein Kind auf den Arm und können digitale Geräte lediglich mit einer Hand bedienen.
  • Sie sind unterwegs und die Verkehrsgeräusche sind so laut, dass Audioinhalte ohne Kopfhörer nicht mehr verständlich sind.
  • Stress und Zeitdruck erschweren die Verarbeitung komplexer Informationen.
  • Nicht-Muttersprachlerinnen und -sprachler benötigen eine klare und einfache Sprache, um Inhalte korrekt zu verstehen.

Diese Beispiele verdeutlichen, dass Barrierefreiheit universell ist und potenziell alle Personen betrifft. Eine Website ohne barrierefreien Zugang kann Menschen dazu verleiten, die Seite wieder zu verlassen. Das bedeutet nicht nur eine verpasste Gelegenheit für Nutzende, sondern auch für Website-Betreiberinnen und -betreiber.

Eine barrierearme Website erreicht eine breitere Zielgruppe, verbessert die Nutzererfahrung durch strukturierte Informationen und steigert die Kundenzufriedenheit. Zudem honorieren Suchmaschinen Barrierefreiheit, was das Ranking der Website wiederum fördert.

Die Berücksichtigung von Barrierefreiheit kann auch rechtliche Aspekte haben, da in Deutschland gesetzliche Vorgaben zur Webzugänglichkeit bestehen. Zu diesen Vorgaben kommen wir gleich. Zunächst stellt sich die Frage, wie eine Website barrierefrei gestaltet wird.

Grafik: Barrierefreiheit ist für 10% der Menschen unverzichtbar, für 30% notwendig, für 100% hilfreich

Wie können Websites barrierefrei umgesetzt werden?

Die barrierefreie Gestaltung von Websites umfasst verschiedene Bereiche der Webentwicklung und -gestaltung. Jeder Bereich trägt dazu bei, Ihre Website für jeden zugänglicher zu machen.

Konzept

Eine barrierefreie Website startet mit einem durchdachten Konzept. Dazu gehört eine logische und schlüssige Struktur, um Inhalte intuitiv zu finden. Usability spielt dabei eine entscheidende Rolle: 

Die Website muss so gestaltet sein, dass sie für jeden einfach zu bedienen ist. Das umfasst eine übersichtliche Navigation oder die Konzeption von Anwendungen, wie z.B. zugängliche Formulare.

Webdesign

Barrierefreie Websites haben ein kontrastreiches Design. Nutzerinnen und Nutzer mit Sehbeeinträchtigungen sollen eine Website schließlich gut wahrnehmen können. 

Schriften sind ausreichend groß und skalierbar und sind auf unterschiedlichen Endgeräten gut lesbar. 

Für Personen mit motorischen Einschränkungen ist es zudem wichtig, dass zwischen den anklickbaren Elementen auf der Website genügend Platz gelassen wird.

Softwareentwicklung

Die technische Umsetzung einer barrierefreien Website erfolgt nach den geltenden Standards für HTML und CSS - Kompatibilität und Zugänglichkeit sind damit abgesichert. Eine responsive Gestaltung garantiert die Funktionalität der Website auf verschiedenen Geräten und Bildschirmgrößen. Die Berücksichtigung verschiedener Zoomstufen und die Gewährleistung, dass Code von Screenreadern ausgelesen werden kann, sind essenziell.

Die Tastaturbedienung ist auf der gesamten Website möglich und die Fokuszustände der einzelnen Elemente sind klar erkennbar. Interaktive Elemente benötigen zudem bedienbare Steuerungselemente wie einen Pause- oder Stopp-Button bei Slidern und Videos. Das Backend der barrierefreien Website bietet Optionen zur Pflege von Barrierefreiheits-Informationen. Die Redaktion kann beispielweise Alt-Texte für Bilder problemlos einpflegen.

Redaktion

Was genau ist auf einem Bild oder in einem Video zu sehen? Die Redaktion pflegt aussagekräftige Alt-Texte für alle visuellen Inhalte der barrierefreine Website und informiert damit blinde und sehbehinderte Menschen, welche sich über Screenreader die Texte vorlesen lassen. Eine klare Überschriften-Hierarchie ist Pflicht, um die Struktur der Inhalte zu verdeutlichen. Leere Absätze kommen nicht vor. Einfacher Satzbau, Erklärung von Abkürzungen und die Bereitstellung von Inhalten in Leichter Sprache helfen beim Verständnis. Videos zur Erklärung von Inhalten in Gebärdensprache erhöhen die Zugänglichkeit für hörgeschädigte Personen.

Die BITV-Prinzipien 

Barrierefreie-Informationstechnik-Verordnung

Die »Web Content Accessibility Guidelines« (WCAG) für barrierefreie Webinhalte geben eine Vielzahl an Erfolgskriterien und Prüfschritten vor. Neben technischen Aspekten ist Barrierefreiheit auch eine besondere Herausforderung für die Redaktion. Texte in Leichter Sprache müssen barrierefrei sein. Eine spezielle Redaktions-Prüfung ist Voraussetzung, um Kriterien der Leichten Sprache zu berücksichtigen.

Somit gilt einiges zu beachten, damit allen Menschen der Zugang zu Ihren Inhalten garantiert ist. Die Basis dieser Erfolgskriterien bilden vier Prinzipien, nach denen eine Website wahrnehmbar, bedienbar, verständlich und robust sein muss. Auf diese Grundprinzipien baut auch die BITV in Deutschland auf. Wir haben die Kerninhalte dieser vier Prinzipien für Sie kurz zusammengefasst:

Grafik: Geöffnetes Auge

Wahrnehmbar

Verhindern Sie Barrieren bei der Wahrnehmung Ihrer Webseite: Für Menschen mit einer Behinderung der Sinneswahrnehmung wie einer Seh- oder Hörbehinderung müssen die Inhalte auf der Webseite dennoch zugänglich sein.

Barrieren können beispielsweise durch hinreichenden Farbkontrast, Skalierbarkeit der Schriftgröße und Textalternativen für Bilder oder Videos verringert werden. Audioinhalte werden durch Untertitel oder eine Übersetzung in die Gebärdensprache auch für Gehörlose zugänglich.

Grafik: durchgestrichene Computermaus

Bedienbar

Was wäre, wenn Sie Ihre Webseite ohne Maus oder Touchpad bedienen müssten?

Genau dies ist für Menschen mit motorischen Behinderungen oder auch blinde Personen Alltag. Elemente wie dynamische Menüs, die nur mit einer Maus richtig bedient werden können, stellen dann eine unüberwindbare Barriere dar. Alle Funktionen einer Webseite sollten also per Tastatur zugänglich sein.

Ebenfalls wichtig: Auf Time-outs achten! Ältere Menschen oder Personen mit Behinderung brauchen oft länger, um beispielsweise Formulare auszufüllen. Sind die Time-outs auf der Webseite zu kurz, wird die Bedienung zum frustrierenden Erlebnis.

Schriftgrafik: “ABC” in zwei Schriftarten

Verständlich

Viel zu oft sind Kerninhalte auf Webseiten nur über optische Hilfsmittel, also Bilder und Grafiken, zugänglich. Machen Sie gern den Selbsttest: Sind die Inhalte Ihrer Webseite auch ohne optische Hilfsmittel noch klar und verständlich?

Komplexität reduzieren: Unerfahrene Nutzende oder Menschen mit einer kognitiven Behinderung haben beim Verstehen von komplexen Inhalten oft Probleme. Einfache Sprache, kurze Sätze und ein klar strukturierter Seitenaufbau erleichtern die Verständlichkeit Ihrer Webseite.

Grafik: Drei Display Ansichten

Robust

Kompatibilität: Wird Ihre Webseite nur auf der neusten Version eines bestimmten Browsers optimal angezeigt?

Das Prinzip der Robustheit soll sicherstellen, dass Ihre Webseite mit verschiedenen Browsern und Hilfsprogrammen für Ihre Nutzende zugänglich ist. Hierunter fällt auch die Bedienbarkeit mit mobilen Endgeräten, die durch Responsive Webdesign sichergestellt wird.

Gesetzliche Richtlinien zur Barrierefreiheit - wer ist zur Barrierefreiheit verpflichtet?

Die Richtlinien zur Barrierefreiheit sind in der EU-Richtlinie 2016/2012 festgeschrieben, die Barrierefreie-Informationstechnik-Verordnung (BITV) regelt und sorgt für deren Umsetzung. Grundsätzlich ist zwischen öffentlichen Stellen und kommerziellen oder privaten Webprojekten zu unterscheiden.

Die EU-Richtlinie hat zu einer verschärften Gesetzeslage bei Webinhalten öffentlicher Stellen geführt. Dazu zählen alle, die zu mindestens 50 % aus öffentlicher Hand finanziert werden. Was heißt das genau? Seit September 2019 müssen alle neuen digitalen Angebote barrierefrei sein. Seit September 2020 gilt das auch für bereits bestehende Angebote. Außerdem muss eine jährlich zu erneuernde verpflichtende Erklärung zur Barrierefreiheit veröffentlicht werden. Seit Juli 2021 müssen schließlich auch alle mobilen Anwendungen barrierefrei sein. Kurzum: Ein barrierefreies Angebot ist für alle öffentlichen Stellen verpflichtend.

Für kommerzielle Websites gilt diese Richtlinie noch nicht. Die Betonung liegt dabei auf noch. Mit Inkrafttreten des Barrierefreiheitsstärkungsgesetztes, kurz BFSG, gelten Anforderungen an Barrierefreiheit auch für nicht-öffentliche Stellen, insbesondere für Online-Shops. Die konkreten Anforderungen regelt seit Juni 2022 die Rechtsverordnung zum BFSG. Auch wenn es Ausnahmeregelungen gibt und noch nicht jedes Unternehmen verpflichtet ist, seine Dienste barrierefrei anzubieten, ist unsere Empfehlung daher ganz klar: Berücksichtigen Sie das Thema Barrierefreiheit und BITV bei der Planung und Umsetzung eines neuen Projekts von Anfang an. Das spart Ihnen in der Zukunft viel Aufwand und nicht zuletzt verbessern Sie damit die Usability Ihres Angebots deutlich.

Barrierefreie Websites sind digitale Türen, die allen Menschen gleichermaßen den Zugang zu Informationen ermöglichen und digitale Inklusion schaffen.

Christine Forsthoffer, Projektleiterin und Expertin für Barrierefreiheit bei SandsteinNM

Wie kann Barrierefreiheit getestet werden?

Um die Zugänglichkeit einer Website zu gewährleisten, steht der regelmäßige Test auf Barrierefreiheit auf der Agenda. Es gibt verschiedene Methoden und Tools, unterschiedliche Aspekte der Zugänglichkeit zu überprüfen.

Tool-basierter Selbst-Test

Für einen ersten Eindruck in Sachen Barrierefreiheit einer Website sind tool-basierte Selbsttests hilfreich. 

Einen detaillierten BITV-Test können diese Tools nicht komplett ersetzen. Sie helfen jedoch, einen Überblick zu gewinnen und grobe Fehler aufzudecken. Zu den empfehlenswerten Tools gehören:

  • Lighthouse: Ein integriertes Tool in Google Chrome, das Performance-Analysen in verschiedenen Bereichen, einschließlich der Barrierefreiheit, durchführt. Es hilft dabei, grundlegende Mängel zu identifizieren und bietet Verbesserungsvorschläge.
  • LERA: Eine Browser-Erweiterung für Chrome, die automatische Barrierefreiheitstests durchführt und einen detaillierten Prüfbericht liefert. Das Tool unterstützt die Webentwicklung bei der Optimierung ihrer Websites.
  • WAVE Evaluation Tool: Dieses Tool bietet eine automatisierte Überprüfung der Einhaltung von Standards der Barrierefreiheit und visualisiert die Ergebnisse anhand von Icons. Das WAVE Evaluation Tool ist als Extension für Chrome, Firefox und Microsoft Edge verfügbar.

BITV-Selbst-Test

Ein BITV-Selbsttest, durchgeführt mit einem webbasierten Tool, bietet eine strukturierte Herangehensweise zur Bewertung der Barrierefreiheit einer Website. Dieser Test basiert in der Regel auf einer Checkliste und erfordert ein gewisses Maß an technischem Wissen sowie Erfahrung in der Anwendung der BITV-Kriterien. Obwohl er tiefergehende Einblicke als einfache Tool-Tests bietet, kann er eine professionelle Prüfung nicht vollständig ersetzen.

BITV-Test durch zertifizierte Prüfstelle

Die zuverlässigste Methode zum Test auf Barrierefreiheit bietet eine zertifizierte Prüfstelle. Diese Institutionen setzen geschulte BITV-Testerinnen und -tester ein. Sie wenden ein standardisiertes Prüfschema an, um die Website umfassend zu bewerten. Diese Prüfung ist sehr gründlich, sie ist jedoch auch mit Aufwand und Kosten verbunden. Wir empfehlen diesen professionellen BITV-Test für Unternehmen, welche die Barrierefreiheit Ihrer Website zuverlässig prüfen lassen möchten.

Für Unterstützung und detaillierte Prüfungen steht SandsteinNM mit erfahrenen Partnerinnen und Partnern bereit, um Ihnen optimale Lösungen für die Zugänglichkeit Ihrer Website zu gewährleisten. Wir können auf jahrelange Erfahrung in punkto Barrierefreiheit zurückgreifen. Rufen Sie uns an oder schreiben Sie uns über das Kontaktformular - unsere Expertinnen und Experten rufen Sie für ein unverbindliches Beratungsgespräch zurück.

Checkliste

Zur Übersicht geben wir Ihnen hier eine Checkliste, worauf Sie bei Ihrer Website bezüglich Barrierefreiheit achten sollten. 

Diese Checkliste ersetzt natürlich keinen vollständigen Test, aber hilft Ihnen bei der Orientierung:

  • Konzept
    • klare Informationsstruktur
    • gute Usability
    • Konzeption von leicht bedienbaren Anwendungen (z. B. Formulare)
    • Übersichtliche und logische Seiten-Navigation
  • Webdesign
    • Kontrastreiches Design
    • Ausreichend große, skalierbare Schriften
    • Ausreichend große Abstände zwischen Elementen
  • Softwareentwicklung
    • Entwicklung nach geltenden Standards für HTML & CSS
    • Responsive Umsetzung
    • Zoomstufen berücksichtigen
    • Code, der von Screenreadern auslesbar ist
    • Tastaturbedienung ermöglichen
    • Fokuszustände abbilden
    • Steuerungselemente an interaktiven Elementen (z.B. Pause/Stopp-Button an Slider, Video)
    • Bereitstellung von Eingabefeldern für Redaktion (z.B. Alt-Texte an visuellen Elementen)
  • Redaktion
    • Aussagekräftige Alt-Texte pflegen
    • Leere Absätze vermeiden
    • Überschriften-Hierarchien beachten
    • Einfacher Satzbau
    • Abkürzungen erklären
    • Leichte Sprache bereitstellen
    • Gebärdensprache bereitstellen

Unsere Leistungen

Wir beraten Sie gern zum Thema Barrierefreiheit. Von uns erstellte Websites werden von uns anhand der BITV selbst getestet. Wenn wir Ihren aktuellen Webauftritt zur Herstellung der Barrierefreiheit überarbeiten sollen, führen wir einen Selbsttest zum Ist-Stand durch. Für entwicklungsbegleitende und abschließende Tests arbeiten wir mit externen Prüfern zusammen. Dabei verlassen wir uns auf erfahrene Partner und übernehmen gern den organisatorischen Teil für Sie.

Mehr lesen!

Bleiben Sie auf dem Laufenden mit unserem Blog

Illustration des Wortes Blog-Thema

Auch interessant!

Überzeugen Sie sich von unseren Leistungen.

Haben Sie Fragen?

Bild einer Frau mit langen braunen Haaren

Christine Forsthoffer

Projektleitung

Telefon
0351 440 78 40
E-Mail
E-Mail schreiben