Barrierefreies Webdesign: Das Web für alle nutzbar machen 

1. Was bedeutet barrierefrei?
2. Was bedeutet barrierefrei auf Webseiten?
3. Gründe für barrierefreie Webseiten
4. Wie sieht eine barrierefreie Website aus? 
5. Welche Richtlinien für digitale Barrierefreiheit gibt es?
6. Checkliste für eine barrierefreie Website
7. CMS für barrierefreies Webdesign 
8. Werkzeuge für eine barrierefreie Website 
9. Fazit

Im Internet gibt es nichts, was es nicht gibt. Mit nur einer Suchanfrage erhalten Nutzer:innen Unmengen von Informationen. Theoretisch. Denn für Menschen mit Behinderungen und Beeinträchtigungen bleiben Informationen oft verwehrt. Die meisten Websites sind nicht barrierefrei oder zumindest barrierearm. Was genau das bedeutet, wie Ihr Barrieren auf Eurer Website abbauen könnt und auch selbst davon profitiert, erfahrt Ihr in diesem Artikel.

Was bedeutet barrierefrei?

Barrierefreiheit bezieht sich auf die Gestaltung unserer Umwelt. Personen mit körperlichen oder geistigen Einschränkungen müssen ihren Lebensraum ohne fremde Hilfe wahrnehmen und nutzen können. Das gilt für Gebäude, Verkehrsmittel, Gebrauchsgegenstände sowie Dienstleistungen. Die moderne Sicht auf Barrierefreiheit stellt nicht einzelne Personengruppen in den Vordergrund. Es geht darum, die Bedürfnisse aller Menschen zu berücksichtigen: körperliche und geistige Einschränkungen aller Art, egal ob Behinderungen im klassischen Sinn, Auswirkungen des Alters oder Bildungsstand. Hier wird gerne vom „universellen Design“ gesprochen. 

Was bedeutet barrierefrei auf Webseiten?

Im Zusammenhang mit Webseiten wird von digitaler Barrierefreiheit gesprochen. Obwohl das Internet theoretisch zu jederzeit von allen genutzt werden kann, treffen Menschen mit Einschränkungen häufig auf Barrieren:

• Barrieren bei der Wahrnehmung
• Barrieren bei der Bedienung
• Barrieren bei der Verständlichkeit

Konkret heißt digitale Barrierefreiheit: Webseiten sind so gestaltet, dass nahezu jede:r sie alleine nutzen kann. Blinde Menschen benötigen bspw. eine beschreibende Tonspur für Eure Inhalte. Für sehbehinderte Menschen ist es wichtig, dass Eure Website kontrastreich ist, damit sie Inhalte gut erkennen können. 

Das World Wide Web Consortium (W3C), welches Standards für das Internet entwickelt, ist bei der Umsetzung eine große Hilfe. Bereits seit 1999 gibt es die Web Accessibility Initiative (WAI) mit Richtlinien für barrierefreies Webdesign. Die Web Content Accessibility Guidelines enthalten praktische Anleitungen. Damit können die 4 von der EU festgelegten Prinzipien für barrierefreie Websites umgesetzt werden:

1. Wahrnehmbarkeit: Informationen müssen durch mindestens einen Sinn wahrgenommen werden können.
2. Bedienbarkeit: Bedienelemente müssen von allen genutzt werden können.
3. Verständlichkeit: Informationen und Bedienung sind verständlich gestaltet.
4. Robustheit: Inhalte können bspw. mit Hilfstechnologien zugänglich gemacht werden. 

Diese 4 Prinzipien enthalten bestimmte Erfolgskriterien. Das Maß an Barrierefreiheit hängt davon ab, wie viele Erfolgskriterien Eure Website erfüllt. 

Gründe für barrierefreie Webseiten

Höhere Reichweite

Barrierefreie Webseiten werden von Suchmaschinen belohnt. Die Nutzerfreundlichkeit ist bei Google und anderen Suchmaschinen ein wichtiger Rankingfaktor. Mit einer barrierefreien Website erleichtert Ihr den Zugang zu Informationen und seid damit nutzerfreundlicher.

Mehr potenzielle Kund:innen

Neben der höheren Reichweite erweitert Ihr auch Eure Zielgruppe. Beeinträchtigungen sind vielfältig und entwickeln sich oft im Laufe der Zeit. Menschen, die jetzt noch Eure Angebote nutzen, werden das in ein paar Jahren vielleicht nicht mehr können. 

Bessere Usability für alle

Eine intuitive und leichte Bedienung Eurer Website sollte immer Euer Ziel sein. Texte mit hohen Kontrasten sind besser lesbar, auch auf dem Smartphone. Mit einfachen Texten sind Eure Botschaften klarer – für alle. 

Soziale Verantwortung

Schließt Menschen mit Einschränkungen nicht aus und seid ein Vorbild für andere. Tragt mit Eurer Arbeit dazu bei, das Internet für alle nutzbar zu machen. 

Rechtliche Vorgaben

Behörden sind bereits verpflichtet, ihre Webangebote barrierefrei zu gestalten. Ebenso wie Unternehmen mit bestimmten Waren- und Dienstleistungen. Bei der Bundesfachstelle Barrierefreiheit könnt Ihr nachlesen, ob Ihr in naher Zukunft zur barrierefreien Gestaltung verpflichtet seid.

Wie sieht eine barrierefreie Website aus? 

Um Eure Website barrierefrei zu gestalten, müsst Ihr Euch drei Bereiche vornehmen:

Technik, Design und Inhalt. 

1. Technik
   ⁠Für Menschen mit Einschränkungen gibt es zahlreiche technische Hilfsmittel. Eure Website-Technik muss die Funktion dieser Hilfsmittel ermöglichen. 
   ⁠
   ⁠Für Menschen mit Seebeeinträchtigungen gibt es bspw. Screenreader. Diese müssen Eure gesamte Website inkl. Dokumente und Formulare erfassen können. 
2. Design
   ⁠Die Website muss u. a. so gestaltet sein, dass eine größere Schrift problemlos möglich ist. Viele ältere Menschen stellen vor allem auf Smartphones eine größere Schriftgröße ein. Auch Farbfehlsichtigkeiten solltet Ihr berücksichtigen; Rot-Grün-Sehschwäche gehört hier zu den bekanntesten.
3. Inhalt
   ⁠Bereitet die Inhalte leicht verständlich auf, damit auch Menschen mit kognitiver Einschränkung Eure Texte verstehen. Bei Grafiken mit wichtigen Informationen darf ein beschreibender Alternativtext nicht fehlen. Eure Video- und Audiodateien müssen auch für Nutzer:innen mit Einschränkungen der Sinneswahrnehmungen nutzbar sein. 

Eure Website gilt als barrierefrei, wenn sie alle drei Bereiche abdeckt. Schauen wir uns ein paar Beispiele für Barrierefreiheit im Netz an. 

iBoB

iBoB ist eine Plattform zur beruflichen Weiterbildung für blinde und sehbehinderte Menschen. Die Schrift ist größer als gewöhnlich, der Farbkontrast stark, die Seite schlicht gehalten.

Quelle: Startseite iBoB

Deutsches Institut für Menschenrechte

Das Deutsche Institut für Menschenrechte setzt sich für die Einhaltung und Förderung der Menschenrechte Deutschlands im In- und Ausland ein. Auf der Website werden allerlei Möglichkeiten angeboten, um Barrieren abzubauen: Leichte Sprache, Text vergrößern, Farbkontrast erhöhen und Gebärdensprache.

Quelle: Startseite Deutsches Institut für Menschenrechte

nachrichtenleicht

Ein sehr gutes Beispiel für leichte Sprache ist die Seite nachrichtenleicht.de. Einmal wöchentlich werden Nachrichten vom Radio-Sender Deutschlandfunk in einfacher Sprache veröffentlicht. Damit werden Nachrichten für alle Menschen zugänglich gemacht.

Quelle: Startseite nachrichtenleicht

Welche Richtlinien für digitale Barrierefreiheit gibt es?

Beim Thema digitale Barrierefreiheit kommen mehrere Gesetze und Richtlinien zusammen. Einige davon gelten bisher nur für öffentliche Stellen, andere betreffen auch Dienstleistungen und Produkte im IT-Bereich. 

UN-Behindertenrechtskonvention (UN-BRK): Rechte, die der Staat für Menschen mit Behinderungen sicherstellen muss.

Europäischer Rechtsakt zur Barrierefreiheit (European Accessibility Act, EAA): EU-Richtlinie 2019/882 mit konkreten Vorgaben zur barrierefreien Gestaltung, mit einem Schwerpunkt auf digitalen Produkten und Dienstleistungen für Privatunternehmen.

EU-Webseitenrichtlinie EU-2016/2102 für öffentliche Stellen: Öffentliche Stellen sind verpflichtet, barrierefreie Webangebote anzubieten. Diese Richtlinie gilt auf Bundes-, Landes- und Kommunalebene. Sie umfasst den gesamten Webauftritt von Behörden inkl. Apps und Dokumente.

Um die Gesetze zu erfüllen, gibt es unterschiedliche Vorgaben auf Landesebene. In Deutschland gibt es bspw. das Behindertengleichstellungsgesetz mit der Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0. 

In der Schweiz gilt das Behindertengleichstellungsgesetz (BehiG) seit 2004. Dieses berücksichtigt bereits altersbedingte Einschränkungen. 

Checkliste für eine barrierefreie Website

Mit einer Checkliste lassen sich nicht alle Kriterien für eine barrierefreie Website vollumfänglich abarbeiten. Aber: Die Checkliste ist ein guter Start, um möglichst schnell erste Verbesserungen vorzunehmen und ein barrierearmes Webdesign zu erstellen. 

1. Design 

• hoher Kontrast zwischen Vorder- und Hintergrundfarbe
• Website-Struktur leicht ersichtlich
• HTML und CSS strikt getrennt
• Design funktioniert auch bei 200 % Vergrößerung 
• Farbfehlsichtigkeiten berücksichtigen
• Hyperlinks mit aussagekräftigen Titeln

2. Navigation

• Links und Schaltflächen sind gut klickbar – mit Maus und Finger
• Website-Navigation funktioniert ohne Maus
• Formulare und Umfragen sind mit der Tastatur bedienbar

3. Text

• leicht verständliche Sprache
• Informationen klar strukturiert
• Überschriften hierarchisch gegliedert
• Tabellen für Screenreader lesbar
• vorgesehene HTML-Elemente nutzen 

4. Medien

• Videos mit Untertitel
• Transkripte für Audiodateien
• Alternativtexte für Bilder hinterlegen
• Bilder in ausreichender Auflösung
• Farbfehlsichtigkeiten berücksichtigen
• PDF-, Word- und PowerPoint-Dateien barrierefrei

CMS für barrierefreies Webdesign 

Es stellt sich nun die Frage, wie Ihr barrierefreies Webdesign am einfachsten umsetzt. Diese Frage lässt sich nicht so einfach beantworten. Es gibt Content-Management-Systeme, die hinsichtlich Frontend und Backend barriereärmer entwickelt wurden. Aber auch sie sind nicht von Haus aus komplett barrierefrei.

Welches CMS solltet Ihr also wählen? Barrierefreiheit wird großteils über das Design und die Darstellung der Inhalte erreicht. Wählt daher ein CMS, das einfach anpassbar und erweiterbar ist. Einstellungshilfen, wie die Funktion „Schrift vergrößern“ oder „Kontrast erhöhen“, müssen bspw. einprogrammiert werden.

Auf OMR Reviews findet Ihr über 40 bewertete Content Management Systeme (CMS). Nicht alle eignen sich gleich gut für barrierefreies Webdesign. Doch mit diesen 7 CMS-Systemen könnt Ihr barrierefreie Websites besonders einfach umsetzen:

• Contao
• WordPress
• Scrivito CMS
• Magnolia
• Drupal
• TYPO3
• Joomla

Werkzeuge für eine barrierefreie Website 

Wie Ihr bereits wisst, gibt es nicht das eine CMS für barrierefreies Webdesign. Neben Designanpassungen im CMS selbst gibt es Werkzeuge, die Euch bei der Umsetzung der digitalen Barrierefreiheit unterstützen. Hier stellen wir einige vor.

1. ReadSpeaker

ReadSpeaker ist ein externer Dienst, der mit einem Klick Eure Inhalte vorliest. Den Reader gibt es für Web-Inhalte, Web-Dokumente, Web-Formulare und mehr.

2. leserlich.info

Durch Eingabe Eurer Farbwerte für Vorder- und Hintergrundfarbe berechnet der Kontrastrechner das Kontrastverhältnis. So prüft Ihr, ob Eure Farbkombination barrierefrei ist.

3. Coblis

Mit Coblis könnt Ihr Farbfehlsichtigkeiten für Eure Bilder simulieren. Um Eure Website zu checken, könnt Ihr Screenshots davon mit dem Tool prüfen. 

4. LanguageTool

Mit dem LanguageTool könnt Ihr Eure Texte auf Einfachheit prüfen. 

5. WAVE

Mit dem kostenlosen Tool erhaltet Ihr sofort einen sehr detaillierten Check Eurer Website auf Barrierefreiheit. 

Auch Webdesign Agenturen können ein hilfreiches Werkzeug sein und euch beispielsweise bei der Einrichtung und Nutzung von Tools helfen.

Fazit

Von barrierefreien Websites profitieren alle Menschen – auch Ihr. Durch die Vielfalt von Einschränkungen ist es nahezu unmöglich, Websites komplett barrierefrei zu gestalten. Es gibt aber unzählige Möglichkeiten, mit kleinen Veränderungen Großes zu bewirken. Inklusion endet nicht an der Türrampe. Die Zeit ist gekommen, aktiv zu werden.