Der Begriff «barrierefrei» ist mittlerweile zu einem Schlagwort geworden. Barrierefreies Webdesign ermöglicht, dass auch Menschen mit Behinderungen, wie z.B. Sehbehinderung, Blindheit, motorische und kognitive Störungen, altersbedingte Einschränkungen, usw., sich hindernisfrei im Internet bewegen und die einzelnen Web-Angebote problemlos nutzen können.
Nebst der Einhaltung der entsprechenden Richtlinien (siehe unten), erachte ich es aber auch als sehr wichtig, dass Website-Betreiber eine soziale Verantwortung übernehmen, indem sie freiwillig barrierefreie Internetauftritte anbieten.
Gemäss Bundesamt für Statistik (2017) leben in der Schweiz ca. 1.7 Millionen Menschen mit einer Behinderung. Mit zunehmendem Alter steigt der Anteil von behinderten Personen (12% im Alter zwischen 16 und 24 Jahren, 46% bei Menschen ab 85 Jahren). Von einem barrierefreien Internetauftritt profitieren aber nicht nur die Menschen mit einer Behinderung. Die Massnahmen für Barrierefreiheit nützen auch Personen ohne Einschränkungen durch eine bessere Benutzerfreundlichkeit (Usabiltiy). Zudem bewertet Google barrierefreie Webseiten höher und belohnt diese durch ein besseres Ranking.
Da die Webcrawler der Suchmaschinen (z.B. Google) beim Scannen einer Webseite sich ähnlich wie Blinde verhalten, gelten die meisten Massnahmen zur Suchmaschinenoptimierung (siehe auch mein Blogbeitrag Besseres Google Ranking durch SEO) auch für ein barrierefreies Webdesign.
Inhaltsverzeichnis
Was bedeutet Barrierefreiheit
Der Begriff ‚Barrierefreiheit‘ stammt ursprünglich von der Baubranche. Damit werden Gebäude und Bauten bezeichnet, deren Zugänglichkeit für Personen im Rollstuhl problemlos möglich ist.
Barrierefreiheit im Internet kann man auch als digitale Barrierefreiheit bezeichnen. Dies bedeutet, dass durch besondere Massnahmen verschiedene Einschränkungen von Personen bei der Wahrnehmung, der Bedienung und der Verständlichkeit einer Webseite berücksichtigt werden. Dazu gehören folgende Behinderungen:
- Blindheit, Sehbehinderung, Sehschwäche
- Gehörlosigkeit sowie Schwerhörigkeit
- Einschränkungen auf der körperlichen Ebene, z.B. motorische Störungen
- Kognitive Einschränkungen (Probleme im Bereich von Wahrnehmung, Lernen, Erinnern, Denken und Wissen)
- Altersbedingte Einschränkungen
Ein barrierefreies Webdesign ermöglicht somit den uneingeschränkten Zugang für Menschen mit diesen Beeinträchtigungen.
Richtlinien zur Barrierefreiheit von Web-Inhalten
Web Content Accessibility Guidelines (WCAG)
Um das Web barrierefreier zu machen, lancierte das W3C (World Wide Web Consortium), welches das Gremium zur Standardisierung der Techniken im World Wide Web ist, die Web Accessibility Initiative (WAI). 1999 wurde der erste international anerkannte Standard, die Web Content Accessibility Guidelines (WCAG), veröffentlicht.
Zwischenzeitlich wurden die neueren Versionen WCAG 2.0 (2009) und WCAG 2.1 (2018) veröffentlicht.
Prinzipien der WCAG-Richtlinien
Es werden vier Haupt-Prinzipien unterschieden:
- Prinzip 1: Wahrnehmbarkeit – Die Informationen und die Komponenten der Benutzeroberfläche müssen für die Benutzer auf eine Weise dargestellt werden, die sie wahrnehmen können.
- Prinzip 2: Bedienbarkeit – Die Komponenten der Benutzeroberfläche und die Navigation müssen bedienbar sein.
- Prinzip 3: Verständlichkeit – Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein.
- Prinzip 4: Robustheit – Inhalte müssen robust genug sein, damit sie zuverlässig von einer grossen Auswahl an Benutzeragenten (Endgeräten) einschliesslich Hilfstechnologien interpretiert werden können (Kompatibilität).
Konformitätsstufen der WCAG-Richtlinien
Die WCAG-Richtlinien enthalten dutzende Erfolgskriterien, welche zur Erfüllung der Barrierefreiheit (Accessibility) eingehalten werden müssen. Diese Erfolgskriterien werden je nach Priorität in drei Konformitätsstufen eingeteilt:
- Stufe A – Basisanforderungen der Barrierefreiheit
- Stufe AA – Mittlere Anforderungen
- Stufe AAA – Höchste Anforderungen
Gesetzliche Grundlagen zur Barrierefreiheit in der Schweiz
Gemäss Bundesverfassung Art. 8 darf niemand aufgrund einer Behinderung diskriminiert werden.
Das Behindertengleichstellungsgesetz (BehiG) und die Behindertengleichstellungsverordnung (BehiV) verlangen für alle Internetangebote der öffentlichen Hand (Bund, Kantone, Gemeinden sowie bundesnahe Firmen und weitere Körperschaften des öffentlichen Rechts (u. a. Universitäten, Schulen, Spitäler, Bibliotheken) einen barrierefreien Zugang.
Die Richtlinien des Bundes für die Gestaltung von barrierefreien Internetangeboten (P028) basieren auf der Konformitätsstufe AA des WCAG 2.0.
Auf kantonaler und kommunaler Ebene wurde vom Verein für eGovernment-Standards (eCH) der Schweizer Accessibility Standard eCH-0059 erarbeitet, welcher auf der Konformitätsstufe AA des WCAG 2.1 basiert. Für die Gesetzgebung sind die einzelnen Kantone zuständig.
Für alle anderen Internetauftritte in der Schweiz gibt es keine Forderungen zur Einhaltung der Barrierefreiheit, es dürfen aber keine Bevölkerungsgruppen diskriminiert werden.
Zertifizierung von barrierefreien Websites in der Schweiz
In der Schweiz ist die Stiftung «Zugang für alle» für Zertifizierungen von barrierefreien Internetauftritten zuständig.
Gesetzliche Grundlagen zur Barrierefreiheit in der Europäischen Union (EU)
Information zu den Richtlinien über die Barrierefreiheit im EU-Raum siehe Wikipedia-Beitrag ‚Barrierefreies Internet‘.
Entwicklung von barrierefreien Websites
Online-Tools für die Ermittlung der Barrierefreiheit
Verschiedene Kriterien müssen erfüllt sein, damit eine Homepage als barrierefrei oder im Fachjargon ausgedrückt Accessibility-ready gilt. Es gibt verschiedene Online-Tools, mit denen eine Webseite auf Barrierefreiheit getestet werden kann und welche den Erfüllungsgrad in Prozenten ausdrücken, z.B.:
- https://www.experte.de/barrierefreiheit -> Test des ganzen Internetauftritts mit mehreren Seiten
- https://wave.webaim.org/ -> sehr detaillierter Test, geeignet für Webdesigner und Webentwickler
- https://pagespeed.web.dev/ -> Test für PageSpeed, Barrierefreiheit und SEO
Testresultat dieses Blog-Beitrags:
Nachfolgend werden einige der wichtigsten Kriterien zur Erfüllung der Barrierefreiheit behandelt.
Kontrast zwischen Vorder- und Hintergrundfarbe
Die Farbauswahl und der Kontrast sind ein wichtiges Kriterium im Zusammenhang mit der Barrierefreiheit. Damit Sehbehinderte Texte gut lesen können, sollte das Kontrastverhältnis zwischen Vordergrund (z.B. Text) und Hintergrund mindestens 4.5 : 1 betragen. Damit kann der Standard AA gemäss WCAG (siehe oben) eingehalten werden.
Mit folgendem Online-Tool kann das Kontrastverhältnis getestet werden:
https://accessibleweb.com/color-contrast-checker/
Da Personen mit einer Farbfehlsichtigkeit, z.B. bei Rot-Grün-Sehschwäche oder Farbenblindheit, die Farben nicht richtig oder gar nicht (Schwarz-Weiss-Sehen) erkennen können, sollte man Anweisungen wie ‚betätigen Sie den violetten Button‚ vermeiden.
Mit folgendem Online-Tool können die verschiedenen Farbfehlsichtigkeiten simuliert werden:
https://barrierefreies.design/barrierefreiheit-interaktiv-testen/farbenfehlsichtigkeit-simulieren
Bedienung mit der Tastatur muss möglich sein
Für Menschen mit spastischen oder motorischen Störungen ist es schwierig, die Maus zu bedienen. Daher sollte eine barrierefreie Webseite mit der Tastatur bedienbar sein. Die Links und Elemente sollten z.B. mit der Tabulatortaste in einer sinnvollen Reihenfolge anwählbar sein und das ausgewählte Objekt sollte markiert werden (z.B. durch eine Umrahmung).
Gut strukturierte Texte
Für blinde Menschen kommen sog. Screenreader-Programme zum Einsatz, welche Texte vorlesen. Dabei ist es wichtig, dass Texte durch hierarchisch gegliederte Überschriften (H1, H2, H3, H4, H5 und H6) strukturiert sind. Dabei muss auch beachtet werden, dass die Seitenüberschrift (H1) nur einmal auf der gleichen Seite vorkommt und dass die Reihenfolge der Überschriften-Hierarchie eingehalten wird.
Skalierbare Schriftgrössen
Die Schriftgrösse sollte für sehgeschwächte Menschen im Browser bis zu 200% skalierbar sein.
Ebenso stellen blinkende oder animierte Texte eine Barriere für Sehbehinderte und Personen mit kognitiven Einschränkungen dar.
Verwendung von Text-Alternativen (ALT-Text) bei Bildern und Grafiken
Die Bilder auf den Webseiten sollten jeweils einen alternativen Text enthalten, welcher von den Screenreader-Programmen vorgelesen werden kann. Ein ALT-Text kann beschreiben, was auf dem Bild gezeigt wird, z.B. ‚Foto von einer grasfressenden Kuh‘.
Werden Bilder nur zu Layout-Zwecken eingesetzt, sollte der ALT-Text weggelassen werden.
Vermeidung von grafischen CAPTCHA-Systemen
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) bedeutet ‚Vollautomatischer Turing-Test, um Mensch und Maschine zu unterscheiden‘. Dies erfolgt teilweise durch verzerrte Schriftzüge, welche visuell erkannt und über die Tastatur eingegeben werden müssen. Dies stellt aber eine Barriere für Blinde und Sehbehinderte dar.
Verwendung von Linktexten
Die Verwendung von Sreenreader-Programmen ermöglicht blinden und Sehbehinderten Internetnutzern von Link zu Link zu springen. Jeder Link sollte einen sinnvollen Linktext enthalten, welcher vom Programm vorgelesen wird.
Redundante Links (mehrere Links auf das gleiche Linkziel) sollten wo möglichst vermieden werden.
Auch sollte man keine einheitlichen, wiederkehrenden Linktexte, wie z.B. ‚hier klicken‘, für unterschiedliche Linkziele verwenden.
Leicht verständliche Texte schreiben
Personen mit einer kognitiven Störung haben Mühe, komplizierte Texte mit ineinander verschachtelten Sätzen zu verstehen. Es macht daher Sinn, Texte in leichter, verständlicher Sprache zu schreiben. Lieber mehrere kurze Sätze oder stichwortartige Aufzählungen schreiben, als ein langer komplizierter Satz einfügen.
Siehe auch mein Blog-Beitrag Erfolgreiche Webseiten-Texte.
Auf Abkürzungen sollte verzichtet werden, ausser man definiert diese in einer nachfolgenden Klammer.
Zum Beispiel: SEO (Suchmaschinenoptimierung).
Verwendung von WordPress-Themes, welche Accessibility-ready sind
Viele Einstellungen punkto Barrierefreiheit der Websites, welche mit WordPress erstellt werden, erfolgen durch das gewählte Theme (siehe mein Blog-Beitrag Webdesign mit WordPress).
Im Theme-Verzeichnis von WordPress kann mit dem Stichwort (Tag) ‚accessibility-ready‘ gesucht werden, welche Themes ein barrierefreies Webdesign unterstützen.
In den meisten meiner Projekten verwende ich das Theme OceanWP, welches im vollem Umfang Accessibility-ready ist.
Fazit
Die Absprungrate von nicht-barrierefreien Websites ist hoch, wenn Menschen mit Einschränkungen diese besuchen. Durch Einhalten der oben beschriebenen Standards erreichen Webseiten-Betreiber mehr Menschen. Die Digitalisierung schreitet immer mehr voran und vieles ist nur noch über das Internet möglich. Daher ist es auch ein wichtiges soziales Engagement, ein Internetauftritt für Alle zugänglich zu machen.
Quellennachweise
Allgemeines über Barrierefreiheit im Internet
- Wikipedia-Beitrag ‚barrierefreies Internet‘ -> https://de.wikipedia.org/wiki/Barrierefreies_Internet
- Stiftung «Zugang für alle» -> https://access-for-all.ch/
Richtlinien zur Barrierefreiheit im Web
- Web Content Accessibility Guidelines (WCAG 2.0 deutsch) -> https://www.w3.org/Translations/WCAG20-de/
- Web Content Accessibility Guidelines (WCAG 2.1 englisch) -> https://www.w3.org/TR/WCAG21/
- Behindertengleichstellungsgesetz, BehiG (CH) -> https://www.fedlex.admin.ch/eli/cc/2003/667/de
- Behindertengleichstellungsverordnung, BehiV (CH) -> https://www.fedlex.admin.ch/eli/cc/2003/668/de
- Pdf-Dokument -> Richtlinien des Bundes für die Gestaltung von barrierefreien Internetangeboten (P028)
- Pdf-Dokument -> Schweizer Accessibility Standard eCH-0059
Online-Accessibility-Tools
- Test des ganzen Internetauftritts mit mehreren Seiten -> https://www.experte.de/barrierefreiheit
- Test für PageSpeed, Barrierefreiheit und SEO -> https://pagespeed.web.dev/
- Detaillierter Accessibility-Test einzelner Seiten -> https://wave.webaim.org/
- Test Kontrastverhältnisse -> https://accessibleweb.com/color-contrast-checker/
- Simulator für Farbenblindheit -> https://www.color-blindness.com/coblis-color-blindness-simulator/
In eigener Sache:
Bei der Entwicklung von Websites strebe ich generell die Einhaltung des Accessibility Standards AA an.
Mehr Informationen zur Entwicklung von Homepages siehe:
Produktübersicht Entwicklung Websites / Kosten.
