Barrierefreiheit ist mehr als nur ein Trend: Warum Sie Ihre Webseite jetzt barrierefrei gestalten sollten | Teil 1

Barrierefreiheit ist ein wichtiges Thema für alle, die das Web nutzen oder gestalten. Barrierefreiheit bedeutet, dass Webseiten für alle Menschen zugänglich und nutzbar sind, unabhängig von ihren körperlichen oder geistigen Fähigkeiten. In diesem Blogbeitrag möchten wir Ihnen einige Grundlagen und Tipps zur grafischen Gestaltung von Barrierefreiheit für Webseiten vorstellen. Wir werden Ihnen erklären, was die Standards und Richtlinien für barrierefreie Webinhalte sind, wie Sie Ihre Webseite auf Barrierefreiheit testen und verbessern können, und welche Vorteile eine barrierefreie Webseite für Sie und Ihre Nutzer hat.

Was ist Barrierefreiheit

Barrierefrei bei Webseiten bedeutet, dass alle Menschen, unabhängig von ihren körperlichen oder geistigen Fähigkeiten, die Inhalte und Funktionen einer Webseite nutzen können. Barrierefreie Webseiten sind so gestaltet, dass sie für verschiedene Arten von Nutzern wahrnehmbar, bedienbar, verständlich und robust sind. Barrierefreie Webseiten folgen den Standards und Richtlinien des W3C, wie zum Beispiel WCAG 2.1. Barrierefreie Webseiten haben viele Vorteile, wie zum Beispiel eine bessere Benutzerfreundlichkeit, eine höhere Reichweite und eine bessere Suchmaschinenoptimierung.

Unterscheidung von Einschränkungen:

• Ständige Einschränkung z.B.: Blindheit, Taubheit
• Temporäre Einschränkung z.B.: nach einer Augen OP wegen grauem Star
• Situationsbedingte Einschränkung z.B.: direkte Sonneneinstrahlung

Wer hat die Richtlinine für die Erstellung von barrierefreien Webseiten erstellt

Die Richtlinien für die Erstellung von barrierefreien Webseiten wurden vom World Wide Web Consortium (W3C) erstellt. Das W3C ist eine internationale Organisation, die Standards und Empfehlungen für das Web entwickelt und fördert. Die Richtlinien heißen Web Content Accessibility Guidelines (WCAG) und beschreiben, wie Webinhalte für alle Nutzer und Nutzerinnen zugänglich gemacht werden können, insbesondere für Menschen mit Behinderungen. Die aktuelle Version ist WCAG 2.1, die im Juni 2018 veröffentlicht wurde. Eine neue Version WCAG 2.2 ist bereits als Entwurf veröffentlicht und eine komplett neue Version WCAG 3.0 ist in Arbeit.

Barrierefreiheit ist nicht gleich Usability

Barrierefreiheit und Usability sind zwei verwandte Begriffe, die die Nutzerorientierung von Webseiten beschreiben. Barrierefreiheit bedeutet, dass Webseiten für alle Menschen zugänglich und nutzbar sind, unabhängig von ihren körperlichen oder geistigen Fähigkeiten. Usability bedeutet, dass Webseiten einfach und angenehm zu bedienen sind, und eine gute User Experience bieten. (Quelle: https://www.webdesign-journal.de/barrierefreiheit/)

Barrierefreiheit und Usability sind dabei nicht dasselbe, jedoch beeinflussen sie sich gegenseitig. Das heißt eine barrierefreie Webseite ist nicht automatisch benutzerfreundlich, und eine benutzerfreundliche Webseite ist deshalb nicht automatisch barrierefrei. Beachtet man bei der Erstellung einer Webseite auf beide Aspekte, tragen diese dazu bei, dass eine Webseite für mehr Menschen erreichbar, verständlich und attraktiv ist.

Es sollte daher bei der Erstellung einer Webseite darauf geachtet werden,

• wie die Webseite technisch funktioniert (Plattformunabhängigkeit, Validität, Performance).
• wie die Webseite aussieht (Farbe, Kontraste, Schriftarten, Layout).
• was die Webseite aussagt (Sprache, Struktur, Navigation, Feedback).
• wie die Webseite bedient wird (Tastatur, Fokus, Alternativtexte, Formulare).
• für wen und wo die Webseite ist (Zielgruppe, Kultur, Ethik, Datenschutz).

Aufkommende Fragen und Feedbacks zum Thema Barrierefreiheit

Im Gespräch mit Kunden zum Thema Barrierefreiheit bei Webseiten fällt uns oft, auf das es zu Mißverständnissen kommt was die Umsetzung angeht. Hier zeigen wir einige der häufigsten Fragen die uns zu diesem Thema gestellt werden und bieten auch gleich die passenden Antworten dazu.

Wir haben nie negatives Feedback von Usern betreffend unserer Webseite.
Warum sollte man dann was ändern?
Nur 10% der User mit Behinderung melden auch die Nicht Nutzbarkeit einer Webseite – die anderen 90% klicken weg und kommen auch nicht wieder.
Dieser Verlust betrifft in Zahlen ca. 14 mio euro (im Bereich des UK) – clickawaypound.com

Das Korrigieren von einer Webseite damit sie barrierefrei wird ist doch sehr teuer – oder nicht?
Ist die Basis der Webseite bereits gut aufgebaut lassen sich je nach Anforderungen auch an bereits erstellten Webseiten notwendige Anpassungen kostengünstig durchführen. Je nach Zustand der Webseite kann eine Korrektur kostspielig sein. Daher empfiehlt es sich die Seite bereits am Start des Projekts barrierefrei korrekt zu planen. Haben Sie bei der Planung bereits die verschiedenen Arten der Einschränkungen im Kopf – dadurch verhindern Sie im Weiteren das Aufkommen von hohen Kosten.

Barrierefreiheit? Dafür bin ich nicht zuständig, oder?
Im Agenturbereich sind viele Personen an einem Projekt beteiligt. Das Problem von sich wegzuschieben ist dabei keine Lösung. Je mehr Personen sich mit diesem Thema auseinandersetzen desto mehr Anwendungsfälle können beachtet werden und desto besser wird das Endprodukt.

Der Marktanteil von Personen mit Einschränkungen ist so klein, dass es sich nicht auszahlt diese zu beachten. Oder doch?
Hochgerechnet rund 1,0 Mio. Personen, das sind 14,1% der österreichischen Bevölkerung ab einem Alter von 15 Jahren in Privathaushalten, waren davon betroffen. (Quelle: Statistik Österreich). Und das bezieht nicht alle Personen mit ein die Webseiten nutzen und eine Beeinträchtigung haben. Wenn man das auf den DACH-Bereich ausbreitet, geht die Zahl um einige Millionen User hoch.

Barrierefreies Design bedeutet doch sehr langweiliges Design, oder?
Sich diesem Thema zu öffnen, bedeutet auch die Möglichkeit für neue und innovative Lösungen. Barrierefreies Design sollte für die nutzbar sein die es benötigen und für jene die es nicht benötigen unsichtbar sein. Deshalb lassen Sie Ihre Kreativ sprühen und erstellen Sie Webseiten, welche die unterschiedlichsten Usergruppen abdecken.

Wer prüft die Einhaltung von WCAG-Richtlinien?
Gibt es sowas wie eine WCAG-Polizei?

Die meisten Länder auf der ganzen Welt haben das sogenannte Übereinkommen der Vereinten Nationen über die Rechte von Menschen mit Behinderungen (UNCRPD) verabschiedet und rechtsverbindlich erklärt. Es wurde angenommen, dass Menschen mit Behinderungen ihre Menschenrechte verweigert würden. Die Weltgesundheitsorganisation (WHO) schätzt, dass 15 bis 20 % der Weltbevölkerung von Behinderungen betroffen sind. Ziel der Konvention ist es, die Rechte von Menschen mit Behinderungen zu schützen. Sie schafft keine neuen Rechte.

Es gibt auch bereits dokumentierte Fälle von eingeschränkten Personen die gerichtlich gegen Webseiten vorgegangen sind, welche sich nicht an die barrierefreien Richtlinien gehalten haben. Diese Fälle wurden oft zugunsten dieser Personen entschieden. Es zahlt sich also aus sich mit diesem Thema auseinander zu setzen.

Worauf achten beim Erstellen einer Webseite?

Was den Designaspekt einer barrierefreien Webseite angeht, gilt es einige Aspekte einzughalten.
Wir wollen hier auf die drei wichtigsten eingehen.

• Kontrastverhältnis
• Farbunabhängigkeit
• Interaktive Elemente

Kontrastverhältnis

Das Kontrastverhältnis für barrierefreie Webseiten ist ein Maß dafür, wie gut sich die Farben von Text und Hintergrund oder von anderen funktionalen Elementen wie Buttons oder Links voneinander abheben. Ein gutes Kontrastverhältnis erleichtert die Wahrnehmung und Lesbarkeit der Webseiten für alle Nutzer, insbesondere für Menschen mit Sehbeeinträchtigungen oder Farbenfehlsichtigkeit.

1:1 = Minimales Kontrastverhältnis = Die verglichenen Farben sind identisch.
21:1 = Maximales Kontrastverhältnis = Schwarzer Text auf weißem Hintergrund (oder umgekehrt).

Die WCAG empfiehlt dabei einen minimales Kontrastverhältnis von 4.5:1 zwischen einem Hintergrund und dem darauf platzierten Text. Dieses Verhältnis trifft bei Text zu, der kleiner ist als 24 Pixel (und nicht fett geschrieben) und bei einem Text, der kleiner ist als 19 Pixel (und fett geschrieben). Für größere Texte ist ein Verhältnis von 3:1 ausreichend.

Welche Elemente sind nun zu beachten, was das Kontrastverhältnis betrifft?

Zu beachten -> Informationstragende Elemente (4.5:1+ mit Ausnahme 3:1+):

• Text und stati z.B. Buttons
• Bilder aus Text
• Alleinstehende Icons
• Text (siehe oben)
• UI Bedienelemente z.B. Checkboxen, Switcher
• Grafische Objekte welche Informationen beinhalten z.B. Diagramme

Nicht zu beachten -> Dekorative & deaktivierte Elemente:
(Jedoch kann man diese zwecks ansprechenderen Designs berücksichtigen)

• Deaktivierte Buttons
• Dekorative Rahmen
• Hintergrundmuster
• Fotografien
• Logos

Aber Achtung: Dies sind jedoch nur minimal Anforderungen. Um den Kontrast noch weiter zu verbessern, sollte ein Kontrastverhältnis von 7:1 bei normalem Text und 4.5:1 bei fettem Text anvisiert werden. „Das Kontrastverhältnis von 4,5:1 wurde gewählt, weil es den Verlust der Kontrastempfindlichkeit ausgleicht, den Benutzer normalerweise mit einem Sehverlust von etwa 20/40 erleben. 20/40 wird allgemein als typische Sehschärfe von Menschen im Alter von etwa 80 Jahren angegeben.“
Der Zähler beschreibt den Abstand, in dem der Test durchgeführt wurde. Der Nenner beschreibt die Größe des betrachteten Buchstabens. Daher zeigt ein 20/40-Visus an, dass eine Person einen Buchstaben mit einer Größe von 40 Fuß aus 20 Fuß Entfernung sehen kann.

Tools zum Checken der Barrierefreiheit von Webseiten bzw. deren Elemente:

 Firefox Plugin:
WCAG Color contrast checker bewertet den Kontrast aller Elemente der Seite unter Berücksichtigung ihres berechneten Stils für die CSS-Eigenschaften Farbe und Hintergrundfarbe. Wenn diese Farben mit RGBA-Werten definiert sind, wird auch die Deckkraft berücksichtigt, um die tatsächliche Farbe abzuleiten, die letztendlich angezeigt wird.
Das Tool umfasst außerdem zwei Felder, in die die Farben manuell zum Testen eingegeben werden können.
https://addons.mozilla.org/de/firefox/addon/wcag-contrast-checker/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

 Chrome Plugin:
WAVE ist ein von WebAIM.org entwickeltes Tool zur Bewertung der Barrierefreiheit im Internet. Es bietet visuelles Feedback über die Zugänglichkeit Ihrer Webinhalte, indem es Symbole und Indikatoren in Ihre Seite einfügt. Kein automatisiertes Tool kann Ihnen sagen, ob Ihre Seite barrierefrei ist, aber WAVE erleichtert die menschliche Bewertung und klärt über Barrierefreiheitsprobleme auf. Die gesamte Analyse erfolgt vollständig im Chrome-Browser und ermöglicht eine sichere Bewertung von Intranet-, lokalen, passwortgeschützten und anderen sensiblen Webseiten.
https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

 Webseite zur Prüfung des Kontrastverhältnisses von verschiedenen Farben zu Text:
https://webaim.org/resources/contrastchecker/

 Webseite zur Prüfung des Kontrastverhältnisses von Linkfarben zu Text:
https://webaim.org/resources/linkcontrastchecker/

Fazit

In diesem ersten Teil des Beitrags haben wir uns mit dem Thema Barrierefreiheit von Webseiten beschäftigt. Wir haben gelernt, was Barrierefreiheit bedeutet, für wen Sie gemacht ist und warum es wichtig ist diese bei der Erstellung von Webseiten zu beachten. Wir haben uns auch mit einem wichtigen Aspekt der Barrierefreiheit befasst: dem Kontrastverhältnis. Wir haben erklärt, was das Kontrastverhältnis ist, wie man es messen und optimieren kann, und welche Vorteile es für die Lesbarkeit und die User Experience hat.

Ich hoffe, Sie haben diesen ersten Teil des Beitrags interessant und nützlich gefunden. Im zweiten Teil werden wir uns mit weiteren Aspekten der Barrierefreiheit von Webseiten befassen, wie zum Beispiel zum Thema Farbunabhängigkeit, die korrekte Erstellung von Buttons und Links. Bleiben Sie dran!