Das Netz ist für alle da. Jeder Mensch kann Inhalte und Funktionalitäten von Websites wahrnehmen und bedienen. So die Theorie. Die Realität in der Barrierefreiheit für alle im Netz sieht jedoch anders aus. Oder wusstest Du, dass selbst beliebte Funktionen wie Slider, Lightbox, Mega-Menü usw. sich von Menschen mit Behinderungen teils nicht wahrnehmen und schon gar nicht bedienen lassen?
Die Web Accessibility Initiative (WAI) des World Wide Web Consortiums (W3C) hat sich zur Aufgabe gemacht, diesen Umstand zu ändern, um möglichst vielen Menschen den Zugang zu Inhalten jeglicher Art im Netz zu ermöglichen. 2008 haben die von diesen Institutionen entwickelten WCAG 2.0 (Web Content Accessibility Guidelines) Empfehlungsstatus erhalten. Seit Juni 2018 gelten die WCAG 2.1. Bei uns in Deutschland kommt ergänzend noch die Barrierefreie Informationstechnik-Verordnung hinzu.
Gemäß WCAG gibt es 3 unterschiedliche Niveaus, die sogenannten Konformitätsstufen. Diese dienen dazu, die 4 Prinzipien „Wahrnehmbarkeit“, „Bedienbarkeit“, „Verständlichkeit“ und „Robustheit“ mitsamt ihren 13 Richtlinien zu gewährleisten. Seit dem 23. September 2019 gelten die WCAG in der Europäischen Union als verbindlich für neu erstellte Websites von öffentlichen Stellen. Bestehende Websites von öffentlichen Stellen müssen die Vorgaben bis 23. September 2020 erfüllen. Für mobile Anwendungen läuft die Frist am 23. Juni 2021 aus.
| Stufe | Bedeutung | Erläuterung |
| A | Muss | Weil es sonst Menschen gibt, die die Inhalte und Funktionalitäten einer Website weder wahrnehmen noch bedienen können. |
| AA | Möglichst | Weil es sonst Menschen gibt, die die Inhalte und Funktionalitäten einer Website nur erschwert wahrnehmen und bedienen können. |
| AAA | Der Wunsch | Dass alle Menschen die Inhalte und Funktionalitäten einer Website möglichst einfach wahrnehmen und bedienen können. |
Zugegeben, Barrierefreiheit von Websites ist ein vergleichsweise komplexes Thema. Gilt es doch, unterschiedliche Einschränkungen wie Blindheit und Gehörlosigkeit, körperliche Einschränkungen und mehr zu berücksichtigen. In diesem Beitrag zeige ich Dir 5 Tipps, mit denen Du Dich dem Thema auch ohne technische Kenntnisse annähern kannst.
1. Tools mit denen Du die Barrierefreiheit Deiner Website prüfen kannst
Du musst kein ausgefeilter Techie sein, um die Barrierefreiheit Deiner Website zu testen. Das Schöne: Selbst als Laie hast Du die Möglichkeit, Deiner Agentur, Freelancer oder wer auch gerade immer mit der Erstellung deines Auftritts im Netz beschäftigt ist, ein wenig über die Schulter zu gucken. Ist schließlich ein gutes Gefühl, wenn man Dir kein „X“ für ein „U“ vormachen und Du mitreden kannst.
Das Web Accessibility Evaluation Tool
Dieses von der Aktion Mensch e.V. empfohlene Tool ist ein praktischer erster Check. WAVE – so der Kurzname – ermöglicht es Dir, bequem die nicht barrierefreien Stellen auf Deiner Website zu finden.
Beim Barrierefreiheit Web Accessibility Evaluation Tool einfach die URL in das Suchfeld eingeben, um nicht barrierefreie Stellen auf der eigenen Website zu finden.
Dazu gibst Du die gewünschte URL in das Testfeld ein und klickst auf den Pfeil neben der Eingabemaske. Je nach Website, sieht das Ergebnis mal mehr und mal weniger bunt aus. Für diesen Artikel – wie könnte es anders sein – habe ich die OMT-Startseite getestet.
So sieht das Ergebnis aus vom OMT:
So sieht das Testergebnis der Barrierefreiheit beim OMT aus.
Links eine Spalte mit einer Übersicht der Ergebnisse. Als da wären:
- 3 Fehler
- 240 Kontrast-Fehler – das bedeutet jetzt nicht, dass es sich um 240 verschiedene Kontrast-Fehler handelt. Dann wäre die OMT-Website mehr als bunt. Nein, es wird nur jede Stelle aufgezeigt, an der mangelnder Kontrast zwischen Vorder- und Hintergrundfarbe besteht. Welche Möglichkeit es zur Optimierung im Hinblick auf Barrierefreiheit gibt, erfährst Du unter Punkt 3 in diesem Artikel.
- 725 Warnungen – unter anderem Redundanzen bei Linktexten
- 272 Elemente, die den Test bestanden haben
- 234 Elemente zum semantischen Aufbau
- 2 Hinweise zu ARIA
Kurzinfo ARIA = Abkürzung von Accessible Rich Internet Application. Kommt zum Einsatz, wenn:
- kein passendes HTML-Element vorhanden ist und ARIA die Semantik und gegebenenfalls die Bezeichnung der Komponente bestimmt.
- die falsche Nutzung von HTML Elementen und ARIA die Semantik und gegebenenfalls Bezeichnung der Komponente repariert.
Variante 2 sollte möglichst nicht zum Einsatz kommen. Die richtige Nutzung von HTML Elementen – semantisches HTML – sollte das Ziel einer jeden Website sein.
Rechts zeigt es Dir die Website mit den jeweiligen angemerkten Elementen an. Für ausführliche Informationen kannst Du links in der Spalte die Details aufrufen und jeden einzelnen Punkt anklicken. So siehst Du, an welcher Stelle sich das jeweilige Element befindet. Ebenso gibt es Infos zur Struktur und zum Kontrastverhältnis zu der von Dir getesteten Webseite.
Mit Lighthouse stellt Dir Google ein kostenloses und umfangreiches Audit innerhalb der Developer-Tools direkt im Chrome-Browser zur Verfügung. Zu den Developer-Tools gelangst Du über die 3 Punkte ganz rechts in der Adresszeile des Chrome-Browsers. Im sich öffnenden Dropdown wählst Du „Weitere Tools“ und im nächsten Dropdown „Entwicklertools“.
Mit Lighthouse stellt Google direkt im Chrome-Browser ein umfangreiches Audit innerhalb der Developer-Tools zur Verfügung.
Falls Dir der Weg zu umständlich ist:
- Rechter Mausklick und in der Auswahl den letzten Punkt „Untersuchen“ wählen, oder
- STRG + Umschalttaste + I
Sobald aufgerufen, verschiebt sich die aktuell geöffnete Webseite nach links – rechts siehst Du eine neue Spalte mit den Developer-Tools. Wenn Du sie zum ersten Mal aufrufst, ist das Audit vielleicht noch etwas versteckt. Zum Öffnen klickst Du oben in der Leiste der Developer-Tools auf die beiden kleinen nach rechts gerichteten Pfeile.
Wem der zuvor beschriebene Weg zu umständlich ist, kann über den Quelltext die Developer Tools aufrufen.
Im Dropdown wählst Du jetzt „Audits“. Du kannst zwischen „Mobile“ und „Desktop“ wählen. Zusätzlich zur „Accessibility“ kannst Du über das Audit auch noch „Performance“, „PWA“, „Best Practices“ und „SEO“ checken.
Über das Audit bei Google Lighthouse kann zwischen “Mobile” und “Desktop” gewählt werden und neben der “Accessibility” weitere Bereiche wie “Performance” und “SEO” gecheckt werden.
Auch mit diesem Tool habe ich die OMT-Startseite getestet. Das Ergebnis ist ähnlich wie bei WAVE. Von 100 erreichbaren Punkten erreicht die Startseite 95 Punkte im Abschnitt Accessibility.
Mit 95 von 100 möglichen Punkten erzielt der OMT für seine Startseite im Bereich “Accessibility” ein gutes Ergebnis.
Das gute Ergebnis ist darauf zurückzuführen, dass gerade mal 2 Bereiche nicht optimiert sind. Hier das Kontrastverhältnis der Farben und redundante Texte der Schaltflächen. Genau diese beiden Punkte ergaben sich auch bei WAVE, nur dass Wave im Vergleich zu Lighthouse jedes einzelne Vorkommen im Dokument zählt.
Übrigens: Im Abschnitt SEO kommt die OMT-Startseite im Audit sogar auf 100%! Vielleicht wird Dir noch auffallen, dass die Ergebnisse zur Performance nicht so ganz im grünen Bereich liegen. Lass Dich von den Werten nicht verunsichern. Eine seriöse Agentur wird Dir keinesfalls empfehlen, die vorgeschlagenen Verbesserungen zur Performance akribisch umzusetzen.
2. Semantisches HTML
Wo Du im ersten Punkt von semantischem HTML gelesen hast: Hier eine kurze Einführung, falls Du nicht wissen solltest, was es damit auf sich hat. Vom Grundsatz her dient semantisches HTML dazu, Inhalte so zu strukturieren, dass sie sich optimal erfassen lassen. Semantisches HTML ist also die logische Struktur einer Webseite (HTML Dokuments).
Am schnellsten lässt es sich mit der Struktur von Überschriften erläutern. Angenommen, Dir sind die H1 Überschriften zur groß und Du verwendest deshalb H2 Überschriften auf der obersten Ebene. Dann ist Dein Dokument nicht mehr logisch strukturiert. Für Menschen, die einen Screenreader verwenden, kann dies zur Verwirrung führen, weil der Screenreader nicht die inhaltlich oberste Ebene erkennt. Auch Google ist davon alles andere als begeistert. Wenn Du die Inhalte auf Deinen Seiten logisch strukturierst, freuen sich alle. Und für die Optik, z.B. kleinere Überschriften, verwendest Du CSS.
Hier ein Beispiel für semantisches HTML:
<html>
<head>
<title> Der Titel der Seite </title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href=”#”>Menüpunkt 1</a></li>
<li><a href=”#”>Menüpunkt 2</a></li>
<li><a href=”#”>Menüpunkt 3</a></li>
</ul>
</nav>
</header>
<article>
<h1>Die Hauptüberschrift der Seite</h1>
<p>Textabschnitt des Artikels </p>
<h2>Unterüberschrift des Artikels</h2>
<p>Textabschnitt des Artikels </p>
<h2>Weitere Überschrift des Artikels</h2>
<p>Textabschnitt des Artikels</p>
</article>
<aside>
<h3>Überschrift Sidebar</h3>
<p>Textabschnitt in der Sidebar</p>
</aside>
<footer>
<h3>Überschrift im Footer</h3>
<p>Textabschnitt im Footer</p>
</footer>
</body>
</html>
Die einzelnen Elemente befinden sich innerhalb des sich öffnenden <> und schließenden </> Tags. Im Bereich <body> befindet sich all das, was Du auf einer Seite siehst. Zum Beispiel der <header> mit der Navigation, welche auf Basis einer Liste besteht und somit für Google als logisch erfassbar ist. Im Abschnitt <article> dreht sich alles um den Hauptinhalte. <aside> definiert die Sidebar und <Footer> den Fußbereich, der in der Regel gleich ist auf allen Seiten einer Website.
Apropos Struktur im übertragenen Sinne
Die meisten von uns sind es gewohnt, mittels Mausklicks über die Links durch eine Website zu navigieren. Doch nicht jeder kann das. Es gibt Menschen, die aufgrund einer Einschränkung nicht in der Lage sind, eine Maus zu bedienen. Das kann angeboren sein, oder zum Beispiel durch einen Unfall passieren. Dafür können sie oftmals eine Tastatur bedienen. Diese Menschen navigieren mittels Tab- und Enter-Taste durch eine Website. Dabei springt die Tab-Taste von Link zu Link und die Enter-Taste öffnet den gewünschten Link. So die Theorie. In der Praxis gibt es immer wieder Websites mit Drop-Down Menüs, bei denen die Unterpunkte der Navigation durch die alleinige Bedienung mit der Tastatur nicht erreicht werden. Probiere es einfach mal aus und schau Dir auch direkt an, ob sich alle Inhalte einer Seite – zum Beispiel Formulare mit Auswahloptionen oder im Online-Shop der Warenkorb – mittels Tastatur erreichen lassen.
3. Farbwahl in passenden Kontrastverhältnissen
Das richtige Kontrastverhältnis zu finden, ist nicht immer leicht. Das gilt insbesondere für die Farbe von Textlinks. Zum einen soll sich die Farbe von der Schrift – meist schwarz oder dunkelgrau auf weißem Hintergrund – unterscheiden. Außerdem sollen Textlinks sich vom Hintergrund abgrenzen. Meist kommt für Textlinks eine hellere Farbe zum Einsatz. Zwar grenzt sie sich dadurch vom restlichen Text ab, hat aber nicht genug Kontrast zum Hintergrund.
Abhilfe kann hier ein vergrößertes Schriftbild schaffen. Denn bei größerer Schrift, sind auch nicht so kontrastreiche Textlinks besser lesbar. Ebenso hilft es, farblich abgesetzte Textlinks zur Steigerung der Lesbarkeit zusätzlich gefettet darzustellen. Und das nicht nur bei Menschen, die sehbehindert oder blind sind.
Laut WCAG (Web Content Accessibility Guidelines) gilt ein minimales Kontrastverhältnis:
- Konformitätsstufe AA: 4,5:1 bei normaler und 3:1 bei großer Schrift
- Konformitätsstufe AAA: 7:1 bei normaler und 4,5:1 bei großer Schrift
Große Schrift weist mindestens 18pt auf oder mindestens 14pt, dann aber gefettet.
Kontrastverhältnisse prüfen
Auch zur Prüfung der Kontrastverhältnisse stehen verschiedene Tools zur Verfügung. Z.B. der Kontrastrechner von Leserlich oder der englischsprachige Contrast Checker. So sieht die Eingabemaske vom Kontrastrechner aus:
Mit dem Kontrastrechner können die Kontrastverhältnisse einer Website geprüft werden.
Links gibst Du die Werte an und rechts erhältst Du das Ergebnis der Berechnung. An sich folgen alle Tools nach diesem Prinzip. Bei WAVE – das Tool, welches ich Dir zur allgemeinen Prüfung zur Barrierefreiheit am Anfang dieses Artikels vorgestellt habe, kannst Du zusätzlich einen Farbregler nach links verschieben, bis ein gutes Kontrastverhältnis erreicht ist.
4. Die Sache mit den Texten (nicht nur) bei Gehörlosen
Vorneweg: Es heißt gehörlos. Immer. Keinesfalls taubstumm. Der Grund: Gehörlose Menschen haben in der Regel eine Stimme, sie sind also nicht stumm. Leider findet dieser Begriff immer wieder Verwendung und sorgt für unnötige Frustration bei den Betroffenen.
Was viele nicht wissen: Obwohl rein gehörlose Menschen sehen können, kann es ihnen schwerfallen, einen Text zu lesen. Wie kann das sein? Nun ja, diesen Umstand betrifft insbesondere diejenigen, die bereits bei ihrer Geburt nicht hören konnten. Durch das nicht vorhandene Gehör fehlt sozusagen die Schnittstelle zwischen Geschriebenem und dem Verständnis desselben. Dieses Verständnis müssen sich von Geburt an gehörlose Menschen vergleichsweise mühsam erarbeiten.
Daher lohnt es sich, bei den Texten auf gute Lesbarkeit zu achten. Hilfe bietet der Flesch-Index, auch Lesbarkeitsindex genannt. Bei der nach seinem Erfinder Rodolf Flesch benannten Formel handelt es sich um die Annahme, dass kurze Sätze und kurze Wörter vergleichsweise einfacher zu lesen sind. Die Einordnung der Lesbarkeit stellt sich wie folgt dar:
| Wert | Lesbarkeit | Für wen verständlich |
| 00 – 30 | Sehr schwer | Akademiker |
| 30 – 50 | Schwer | |
| 50 – 60 | Mittelschwer | |
| 60 – 70 | Mittel | 13 -15-jährige Schüler |
| 70 – 80 | Mittelleicht | |
| 80 – 90 | Leicht | |
| 90 – 100 | Sehr leicht | 11-jährige Schüler |
Quelle: Wikipedia
Den Flesch-Index von Texten prüfen
Wie es um Deinen Text im Hinblick auf die Lesbarkeit steht, kannst Du schnell prüfen. Im Netz gibt es verschiedene kostenlose Angebote. Zum Beispiel bei „Fleschindex“ oder „Guter Schreibstil“. Betrachte die Ergebnisse als grobe Richtwerte. Denn die Werte unterscheiden sich je nach gewähltem Tool. Übrigens: Laut „Guter Schreibstil“ hat dieser Text einen Flesch-Wert von 63. „Fleschindex“ hingegen ist „strenger“ und gibt nur 53 Punkte.
5. Den Selbsttest machen
Wie fühlt es sich eigentlich an, blind am Rechner zu sitzen und sich alles vorlesen zu lassen? Zugegeben, die Nutzung sogenannter Screen-Reader erfordert Übung, doch es sprichts dagegen, einmal selbst zu tun als ob. Ganz gleich ob Du Entwickler, Webdesigner oder Auftraggeber bist: Du profitierst von einer völlig neuen Perspektive. Kannst Dich besser in die Lage von blinden und sehbehinderten Menschen einfühlen und Dein Website-Projekt entsprechend optimieren.
Mit NVDA (NonVisual Desktop Access) gibt es einen kostenlosen Open-Source-Screen-Reader für Windows. Einfach downloaden, die .exe Datei zur Installation ausführen und sich überraschen lassen ob und inwieweit die eigene Website für Menschen mit Sehbehinderungen lesbar ist.
Zum guten Schluss
Die Barrierefreiheit von Internetauftritten ist nicht nur für Menschen mit Behinderungen von Vorteil. Denn: Je leichter sich Inhalte und Funktionalitäten wahrnehmen und bedienen lassen, umso mehr profitieren wir alle davon. Gleichzeitig belohnt Google barrierefrei optimierte Websites mit guten Platzierungen in den SERPs. Doch Vorsicht! Nicht SEO sollte der ausschlaggebende Impuls sein, sondern die Menschen, die unsere Angebote im Netz aufrufen. Um das zu verwirklichen, genügt manchmal ein kleiner Perspektivwechsel. Dazu noch eine kleine Geschichte:
Es ist tiefster Winter. Die Stiege und die Rampe vor einer Schule müssen vom Schnee freigemacht werden. Der Hausmeister steht bei der Stiege und schaufelt diese frei. Ein Mädchen im Rollstuhl spricht ihn an: “Können Sie bitte die Rampe freimachen, damit ich in das Gebäude kann?” Der Hausmeister: “Erst nachdem ich die Stiege frei habe, über sie müssen mehr Menschen in das Haus.” “Aber wenn Sie die Rampe frei machen, können alle in das Gebäude.”
Quelle: Michael F. Giangreco, Kevin Ruelle; Teaching Old Logs New Tricks: More Absurdities and Realities of Education
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
