Accessibility – So macht ihr eure Website für alle Nutzer zugänglich

Das erwartet euch in diesem Artikel

  • Warum sollten auch eure Websites barrierefrei sein?
  • Wie müsst ihr vorgehen, um eure Seite barrierefrei zu gestalten?
  • Wie könnt ihr eure Seite auf Stolperfallen testen?

Viele von uns sehen die unkomplizierte Nutzung des Internets mittlerweile als selbstverständlich an. Das größte Problem ist dann, wenn im Zug auf einmal das W-Lan weg ist. Und auch wenn das zweifelsohne sehr nervig sein kann, gibt es doch viele Menschen, die beim Surfen weitaus größere, oft permanente Einschränkungen hinnehmen müssen.

Wenn ihr eure Websites optimiert, solltet ihr unbedingt auch an diesen Personenkreis denken. Ihr sorgt damit nicht nur für Inklusion, sondern verschafft euch auch selbst einige Vorteile: Ihr sprecht eine neue Zielgruppe an, könnt zusätzliche Kunden gewinnen und erreicht dank der positiven Nutzersignale ein besseres Ranking in den Suchmaschinen.

Im Folgenden zeigen wir euch, wie ihr eine Seite erschaffen könnt, auf der sich alle Nutzer wohlfühlen. Doch erst einmal müssen wir besprechen, was Accessibility eigentlich genau ist.

Barrierefreiheit auch im Netz

Accessibility steht für die Barrierefreiheit der Umgebung. Aufzüge auf Bahnhöfen zählen genauso dazu wie Rampen als Alternative zu Treppen oder rollstuhlgerechte Toiletten. Doch auch im Internet gibt es Barrieren, die einigen Nutzergruppen das Leben schwer machen. Beim SEO-Faktor Accessibility unterscheidet man zwischen zwei verschiedenen Arten der Einschränkung: Nutzer mit einer situativen Einschränkung und Nutzer mit einer angeborenen oder entwickelten Einschränkung.

  1. Zur ersten Gruppe gehören Menschen, die aufgrund ihrer Umgebung künstlich eingeschränkt sind, weil sie zum Beispiel ein Smartphone verwenden, eine sehr langsame Internetverbindung nutzen oder sehr wenig Zeit haben.
  2. Zur zweiten Gruppe gehören Menschen mit einem eingeschränkten Seh- oder Hörvermögen sowie mit motorischen oder kognitiven Einschränkungen. Dazu zählen auch ältere Menschen, bei denen beispielsweise die Sehkraft mit der Zeit nachlässt.

Ein Nutzer kann selbstverständlich auch durch mehrere der genannten Punkte eingeschränkt sein. Doch oft sind Websites nicht einmal für die kleinsten Widrigkeiten ausgelegt. Und dies ist nicht nur aus moralischen, sondern auch aus unternehmerischen Gründen fatal.

Fakten rund um Accessibility

Denn allein in Europa gibt es eine Zielgruppe von 70 Millionen Nutzern mit körperlichen oder geistigen Einschränkungen.

Diagramm: Anzahl der Menschen mit Einschränkungen in der EU

Abb. 1: Menschen mit Einschränkungen in der EU.

2002 wurde in Deutschland die “Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz”, kurz BITV, vorgestellt. Diese Vorschrift betrifft allerdings aktuell nur Seiten der Bundesregierung und gilt Unternehmen bis heute eher als Richtlinie denn als Standard.

Außerdem gibt es die Web Content Accessibility Guidelines vom W3C, die international vermehrt als Grundlage für neue Vorgaben und Gesetze genutzt werden. Diese unverbindlichen Richtlinien wurden im Jahr 2008 veröffentlicht und sollen sicherstellen, dass alle Internetnutzer problemlos auf die vorhandenen Angebote zugreifen können. Alle User sollen also die gleichen Chancen haben, an Informationen zu gelangen, Tasks auszuführen und sich mit anderen zu vernetzen.

Leider zeigt ein kurzer Check im Web, dass die Unverbindlichkeit dieser Richtlinien sich spürbar auf die Realität auswirkt. Denn nahezu jede Website weist Hindernisse für eingeschränkte User auf.

Wenn ihr hier also zu den Early Adopters gehört und eure Website freiwillig umrüstet, werden eure Nutzer es euch fraglos danken. Doch wie könnt ihr dafür sorgen, dass die Accessibility, die in der „realen Welt“ seit einigen Jahren immer besser beachtet wird, auch auf euren Websites Einzug hält? Dass also euer Angebot von allen Menschen genutzt werden kann – unabhängig von ihrem Alter, ihren körperlichen und geistigen Möglichkeiten sowie ihren technischen Voraussetzungen.

Was könnt ihr für die erste Gruppe konkret tun?

Wenn man unterwegs mit mobilen Endgeräten surft treten oft alle drei der oben genannten künstlichen Beeinträchtigungen auf. Hier spielt also nicht nur die Nutzung des Gerätes an sich eine Rolle, sondern auch die Zeit und die höchstwahrscheinlich eingeschränkte Datennutzung.

Deswegen müsst ihr eure Inhalt (wo es geht) so kurz und prägnant wie möglich auf den Punkt bringen. Vielleicht hilft auch eine kurze Zusammenfassung, die sich an Menschen richtet, die nicht viel Zeit haben.

Außerdem solltet ihr eure Videos nicht automatisch starten lassen. Sekundäre Bilder könnt ihr per Lazy Load nachladen lassen, um dem Nutzer erst einmal eine grundlegende Version der Seite mit allen wichtigen Informationen zu bieten. Und allgemein solltet ihr natürlich alles dafür tun, einen guten Pagespeed zu haben. Sorgt also einfach dafür, dass eure Seiten schnell sind – ob mit oder ohne Accelerated Mobile Pages.

Insgesamt ist aber klar, dass ihr auf diese künstlichen Faktoren nur einen sehr kleinen Einfluss habt. Wenn das W-Lan nicht funktioniert, können eure Inhalte noch so gut, schlank und auf den Punkt gebracht sein – der Nutzer wird sie schlicht nicht zu sehen bekommen. Sorgt also einfach dafür, dass ihr alles, was in eurer Macht steht, tut, um eure Seite allen Nutzern zugänglich zu machen. Der Rest liegt dann nicht mehr in eurer Hand.

Viel mehr Einfluss habt ihr hingegen, wenn ihr eure Website für die zweite Gruppe barrierefrei gestalten wollt.

Was könnt ihr für die zweite Gruppe konkret tun?

Grundsätzlich müsst ihr dafür sorgen, dass auch die Nutzer, die eure Inhalte nicht wie eigentlich konzipiert konsumieren können, voll auf ihre Kosten kommen. Je nach Art und Grad der Einschränkung(en) auf Seiten der Nutzer müsst ihr unterschiedliche Dinge beachten. Folgende zwölf Punkte solltet ihr dabei aber keinesfalls außer Acht lassen.

  1. Gebt Informationen nicht nur durch Farben weiter

Wenn ein Nutzer farbenblind ist, dann bringt ihm die Anweisung „klicke auf den grünen Button“ herzlich wenig. Zusätzlich solltet ihr einen Hinweis wie „den linken Button“ oder ähnliches zur Verfügung stellen.

  1. Der Kontrast muss stimmen

Wer unter einer Sehschwäche leidet, braucht gute Kontraste. Hellgrauer Text auf weißem Grund dürfte in solchen Fällen eher schwer zu entziffern sein. Sorgt also dafür, dass eure Website starke Kontraste aufweist – oder gebt dem Netzer an prominenter Stelle die Möglichkeit, den Kontrast selbst an seine Bedürfnisse anzupassen.

  1. Zoomen muss möglich sein

Auch die Schriftgröße kann für Menschen mit Sehbehinderungen ein Hindernis darstellen. Ihr solltet ihnen also gestatten, alle Elemente so zu skalieren, dass sie diese gut erkennen können. Wichtig ist dabei auch, dass Bilder und Text dann nicht verschwommen oder verpixelt wirken.

  1. Keine Änderungen in der Boiler Plate

Für Menschen, die eure Inhalte nicht gut (oder sogar gar nicht) sehen können, solltet ihr keine zusätzlichen Hürden aufbauen. Eine besondere Gefahr lauert bei Online-Shops und anderen Websites mit vielen Unterseiten: eine uneinheitliche Navigation, die auftritt, sobald der Nutzer tiefer in die Seite eintaucht. Eine einheitliche Navigation sorgt also dafür, dass die Elemente auch ohne Sicht intuitiv bedient werden können. Suchfunktionen sollten deshalb auf jeder Seite an der exakt gleichen Stelle vorkommen.

  1. Transkripte von visuellen Inhalten

Screenreader helfen blinden Menschen dabei, sich durch das Netz zu navigieren. Sie lesen dafür das vor, was sie im Code finden. Eure Aufgabe ist es dann, den Readern eine sinnvolle Grundlage zu liefern. Dafür müsst ihr sämtliche Inhalte so auszuliefern, dass sie auch vorgelesen werden können. Das gilt für Videos – von denen ihr Transkripts anbieten solltet – genauso wie für Bilder. Hier müsst ihr sicherstellen, dass alle Bilder ein sinnvolles und erläuterndes Alt-Attribut haben. Insgesamt müssen alle Texte also auslesbar sein – Texte auf Bildern stehen dem oft im Wege und müssen dann durch sehr ausführliche Alt-Attribute erklärt werden.

  1. Eine Version in Gebärdensprache

Menschen, die ohne Gehör zur Welt gekommen sind, fällt das Lesen oft nicht ganz so leicht. Das liegt daran, dass sie zuerst die Gebärdensprache lernen und die Schriftsprache daher wie eine Fremdsprache zählt. Bietet ihnen also die Möglichkeit an, eure Website auch in Gebärdensprache aufzurufen.

  1. Eine Version in leichter Sprache

Lange und komplizierte Texte sind für Menschen mit kognitiven Einschränkungen oft nur schwer zu erfassen. Hier bietet es sich an, die entsprechenden Teile eurer Website auch in leichter Sprache anzubieten – also ohne Fremdwörter und Schachtelsätze.

  1. Abkürzungen kenntlich machen

Damit auch Nutzer von Screenreadern eure Texte verstehen können, sollet ihr alle Abkürzungen im Code als solche kenntlich machen. Ansonsten liest das Gerät auf einmal zusammenhanglos einige Buchstaben vor oder versucht, diese zu einem komischen Wort zusammenzufassen. Setzt also im HTML einfach „abbr“ ein, um dies zu vermeiden.

  1. Audioversionen eurer Inhalte

Umgekehrt könnt ihr eure Texte natürlich auch im Audioformat anbieten. Mit einer spannenden Stimme wäre dies eine willkommene Abwechslung vom Screenreader. Dabei dürft ihr aber nicht vergessen, diese Möglichkeit im Code so deutlich hervorzuheben, dass die Zielgruppe dies auch erfährt und nutzen kann.

  1. Visuelle Elemente anstatt Text und Audio

Für gehörlose Nutzer könnt ihr zahlreiche visuelle Elemente unterbringen. Diese helfen dabei, eure Seite zu verstehen, ohne lange Texte lesen zu müssen. Und vor allem können diese auch Audio-Inhalte, wie zum Beispiel Podcats, ersetzen. Zudem gehören in diese Kategorie auch Untertitel für Videos.

  1. Blinken und Flackern vermeiden

Es sollte eigentlich heutzutage eh zum guten Ton unter Webdesignern gehören, aber sagen wir es lieber noch einmal deutlich: Aggressiv blinkende Inhalte solltet ihr unbedingt vermeiden. Dies gilt für alle Nutzer – aber gerade auf User mit Sehschwächen oder kognitiven Einschränkungen wirken solche Elemente außerordentlich störend.

  1. Navigation ohne Maus anbieten

Nicht jeder Nutzer kann eine Maus bedienen – motorische Einschränkungen stehen dem oft im Wege. Daher solltet ihr eure Website so aufbauen, dass alle Elemente auch mit der Tastatur problemlos erreicht werden können.

Wie könnt ihr die Performance eurer Website testen?

Wenn ihr diese Best-Practices kennt, dann stellt sich die Frage: Wo sollt ihr anfangen? Was sind aktuell die größten Hürden auf eurer Seite? Und es gibt einige Wege, um diese Fragen zu beantworten.

Am besten ist es natürlich, wenn ihr mit den betroffenen Menschen User-Gruppen bildet und euch ihr Feedback zu Herzen nehmt. Dies ist aber sehr aufwändig und daher nicht immer zu leisten. Es gibt aber einige zielführende Alternativen.

  1. Checkt die Logfiles: Die Logfiles ermöglichen es euch, alle auf eurer Website durchgeführten Aktionen nachzuvollziehen. So könnt ihr eventuelle Fehler oder Sackgassen finden und beheben.
  2. Nutzt HTML5 mit den entsprechenden Befehlen: Lagert Zusatzseiten nicht länger außerhalb des Bodies, sondern innerhalb. Sorgt dafür, dass eure Seite immer aktuell gehalten wird.
  3. Nutzt den TAB-Check: Navigiert euch nur mithilfe eurer Tastatur durch eure Website. Die Elemente sollten nicht nur erreichbar, sondern auch intuitiv steuerbar sein. Können Menüs ausgeklappt werden? Besitzen Formulare eine klare und gelernte Struktur? Und ergibt die Navigation per Tab Sinn? All diese Fragen müsst ihr mit „Ja“ beantworten – oder entsprechende Maßnahmen ergreifen.
  4. Probiert den Smartphone-Check: Nutzt ein Smartphone oder Tablet, um die Desktop-Variante eurer Seite zu erreichen. Durch den kleineren Bildschirm, der Abhängigkeit vom Zoom und die Reduktion der Website-Kontrolle per Touch könnt ihr Fehler in der Usability aufdecken.
  5. Nutzt das Web Accessiblity Tool: Das kostenfreie Tool AChecker zeigt euch die Schwächen und Einschränkungen eurer Website für Personen mit Behinderungen auf.

Fazit: Internet für alle

Wie ihr sicher gemerkt habt, sind nicht alle diese Punkte so leicht umzusetzen. Im Endeffekt würde es darauf hinauslaufen, dass ihr sämtliche Inhalte in allen möglichen Formaten anbietet – ein Aufwand, der natürlich nicht zu unterschätzen wäre. Aber es wäre doch ein toller erster Schritt, wenn ihr zumindest eure wichtigsten Inhalte für alle Nutzer erreichbar machen würdet.

Und oft erfordert es auch gar keinen großen Aufwand, um euren Nutzern das Leben deutlich einfacher zu machen. Und die User werden es euch sicher mit guten Nutzersignalen und lautstarken Empfehlungen danken, wenn sie auf eurer Seite einen barrierefreien Zugang zu allen Informationen erhalten. Zögert also nicht länger sondern macht euch sofort daran, das Zauberwort Inklusion auch für eure Website mit Leben zu erfüllen.

Über den Autor

Oliver Engelbrecht

Chefredakteur
Nach meinem Studium der Politikwissenschaft (mit dem Schwerpunkt Diplomatie) habe ich zunächst das SEO-Portal aufgebaut und zuletzt als Chefredakteur geleitet. Nun bin ich bei der Agentur LEAP/ für das Marketing verantwortlich und koordiniere unser Magazin GrowthUp - wiederum als Chefredakteur.
Kommentare