Barrierefreiheit - mehr als nice to have

Barrierefreiheit ist seit den 90er Jahren zu einem alltäglichen Begriff gereift. Bezeichnete er anfänglich die Notwendigkeit Gebäude und Zugänge allen Menschen, egal mit welchen Einschränkungen zugänglich zu gestalten, hat sich der Begriff dem digitalen Zeitalter entsprechend ausgeweitet. Er beschreibt nun zusätzlich die Notwendigkeit eines barrierefreien Internetzugangs für Jedermann. Im folgenden Artikel zeigen wir worum es beim Thema Barrierefreiheit im Internet geht und warum das Thema für jeden Webauftritt relevant ist, nicht nur für jene mit gesetzlichen Auflagen - Stichwort: SEO.

Von Barrierefreiheit profitieren alle

Barrierefreiheit im Internet ist ein wichtiges Thema. Über 1 Milliarden Menschen weltweit haben mit Einschränkungen in der Nutzung des World Wide Web zu kämpfen. Mehr als die Hälfte von ihnen sind farbenblind, Tendenz steigend. Doch auch andere Beeinträchtigungen wie das taubstumm sein oder fehlende Gliedmaßen verhindern einen reibungslosen Umgang mit Inhalten aus dem Internet. Barrierefreies Internet verhindert, dass die Fülle des Web-Angebots nur auf Gesunde beschränkt ist, sondern alle Menschen von den Vorteilen des Internets profitieren. Alleine der Kerngedanke, einen diskriminierungsfreien Zugang zum Internet möglich zu machen, lässt die Implementierung eines barrierefreien Webauftritts als wichtige Komponente bei der Seitenerstellung erscheinen. In diese Kerbe schlagen auch wichtige Internet-Firmen, wie etwa Google. Aus diesem Grund bringt Barrierefreiheit nicht nur gleichberechtigende Facetten mit sich, vielmehr ist Barrierefreiheit mittlerweile auch aus SEO-Perspektive eine profitable Sache für Webseitenbetreiber. Webseiten, die nicht den Standards Barrierefreiheit entsprechen, werden in ihrer Relevanz abgestuft.

Wie vermeide ich Barrieren?

Worum es im Kern bei einem barrierefreien Auftritt geht erschließt sich jedem Entwickler sofort. Doch was gilt es letztlich alles genau zu beachten? Wo lauern potenzielle Barrierenherde in einem Webauftritt? Die folgenden drei Punkte liefern eine Antwort darauf, welche Dinge bei der Erstellung einer barrierefreien Webseite beachtet werden sollte:

  1. Gut strukturierter und aufbereiteter Text

    Gut strukturierte Texte zeichnen sich durch Verwendung bestimmter Elemente bei der Erstellung aus. Diese sollen dem Leser das Verstehen der Inhalte so einfach wie möglich. Ein gut strukturierter Text besteht demnach aus:

    • einer klaren Überschrift

    • einem kurzen Teaser

    • Zwischenüberschriften

    • Absätzen

    • Fettungen (zur klaren Unterscheidung von Textebenen oder dem Hervorheben besonders wichtiger Wörter)

    • Listen

  2. Bilder

    Dass barrierefreie Bilder eine Beschreibung benötigen (am besten für Suchmaschinen und Screenreader zuordenbar durch ALT Tags) ist vielen Menschen durchaus bekannt. Dennoch gibt es weitere zusätzliche Prinzipien und Techniken für die Barrierefreiheit in Bezug auf Bildern. Bei der Verwendung von Bildern sollte darauf geachtet werden, dass sie für alle Menschen richtig wahrgenommen und die Message hinter dem Bild fehlerfrei wahrgenommen werden kann. Es reicht nicht lediglich an blinde und taube Menschen zu denken, wenn es um Barrierefreiheit geht. Farbenblinde Menschen beispielsweise könnten die Darstellung der Londoner U-Bahn-Linie nicht im entferntesten nachvollziehen, da das Bild ohne Farben viel zu verwirrend angelegt ist. Eine Einzeldarstellung der Linien bietet sich für diesen Fall an. Testen Sie ihre Seite gerne auf Verlust des Verständnisses Ihrer Bilder für Menschen, die keine Farben wahrnehmen können. Zu diesem Zweck gibt es Tools, die eine Simulation von Farbblindheit ermöglichen. Auch die Verpixelung von vergrößerten Bildern stellt für viele Menschen eine Barriere dar. Personen mit geringer Sehkraft nutzen Programme um sich die Elemente einer Seite stark vergrößert anzeigen zu lassen. Werden die Bilder dadurch stark verpixelt dargestellt, sind sie für diese Personen nicht mehr vollumfänglich zu erkennen. Auch animierte Bilder oder Banner sind mit Vorsicht einzusetzen. Für Menschen mit starken, krankhaften Konzentrationsstörungen können sie so vereinnahmend sein, dass der Rest der Seite für sie nicht zugänglich wird. Im schlimmsten Fall können stark blinkende Bilder bei bestimmten Personengruppen sogar zu Anfällen führen.
     

  3. Navigation nicht nur via Maus

    Menschen mit einer Sehbehinderung oder mit motorischen Störungen setzen eine Maus nur bedingt ein. Sie profitieren, ebenso wie jeder der lieber mit der Tastatur als der Maus arbeitet, von der Angabe sogenannter Keyboard Shortcuts. Diese Kurzbefehle über die Tastatur werden über ein "accesskey-Attribut" für wichtige Verweise und Formular-Kontrollelemente bereitgestellt. Als ein weiterer Navigationsweg kann eine Tabulator-Reihenfolge festgelegt werden. Die anzuspringenden Elemente werden dabei in einer zuvor definierten Reihenfolge angesteuert. Schwierig gestaltet sich das Unterfangen jedoch bei der Browser-übergreifenden Betrachtung. Jeder Browser hat eigene vordefinierte Shortcuts und Tastenkombinationen zur Aktivierung der Shortcut-Funktion. Deshalb stellt das AccessKey-Pad eine gelungene Alternative zu Shortcuts dar. Dieses lässt sich in die Webseite anbinden, da es ausschließlich mittels HTML und CSS realisiert worden ist. Anpassungen können problemlos vorgenommen und das Key-Pad via Einbettung in einen Container auf der Seite positioniert werden. Das Grundprinzip hinter dem AccessKey-Pad basiert darauf, dass jeder Ziffer von 0 bis 9 eine Funktion zugewiesen ist. So kann die 0 beispielsweise für "zur Startseite" stehen. Es lässt sich sogar eine direkte Kontaktaufnahme mit dem Autor einleiten oder das Impressum via Tastenbefehl direkt aufrufen.
     

  4. Einhaltung technischer Standards 

    Einhaltung technischer Standards wie W3C ist für eine barrierefreie Nutzung des World Wide Web unerlässlich. Einige gängige Standards sind in den sogenannten W3C Richtlinien festgehalten. Diese sind für die meisten Webseiten nicht bindend, weshalb sie entsprechend selten auch wirklich Anwendung finden. Ist dies der Fall, können viele Menschen mit Einschränkungen die Webseite nicht so erfassen, dass sie einen Nutzen daraus ziehen. Ihre Hilfstools, wie beispielsweise Screenreader oder Braillezeilen können auf solchen Webseiten nicht funktionieren. Die Richtlinien thematisieren dabei neben den bereits erwähnten Punkten auch fehlerhafte HTML Codierung. Zur Überprüfung des Webseiten-Quellcodes stehen Tools wie der W3C Markup Validation Service zur Verfügung: https://validator.w3.org. Mit diesem Tool werden Fehler im Code verdeutlicht sowie Empfehlungen für saubereren Code ausgesprochen.

Wie groß ist die Schnittmenge mit SEO?

Ein barrierefreies Interface ist tatsächlich sehr stark mit SEO verknüpft. Neben der Zielgruppenerweiterung erleichtert Barrierefreiheit zudem den Suchmaschinen die Indexierung. Barrierefreiheit hilft bei der Bereitstellung von Metadaten, wodurch es mehr indexierbare Inhalte gibt. Ein Schritt Richtung Barrierefreiheit ist somit automatisch immer auch ein Schritt in Richtung OnPage-Optimierung. Dies ist vielen Webseiten-Betreibern zunächst nicht klar. Deutlich wird die Verbindung, wenn man sich vor Augen führt, dass Crawler definitiv davon profitieren, wenn die Inhalte einer Webseite für eine Maschine, in diesem Fall einen Screenreader, optimiert werden. Das gilt sicherlich nicht für alle vorgenommen Optimierungen zur Barrierefreiheit, allerdings deckt der Screenreader bereits einen großen Teil der Anforderungen ab. Barrierefreie Webseiten verfügen in aller Regel über sauberes HTML, was bedeutet, dass der Aufbau des HTML bereits bei der Erstellung hierarchisch in Position gebracht wird, statt es später mittels CSS zu verschieben. Mit dieser Maßnahme geht automatisch eine verbesserte Lesbarkeit für Crawler einher. Weitere "mitinbegriffene" Suchmaschinenoptimierungen ergeben sich beispielsweise aus der Kennzeichnung von Bildern mit sinnvollen Alt-Tags und exakt bezeichneten Links.

Fazit

Barrierefreiheit im Internet ist ein lohnendes Thema. Einerseits werden sämtliche Personengruppen gleichberechtigt dazu eingeladen die Inhalte einer Webseite zu nutzen, andererseits wird bei der Seitenerstellung sauberer gearbeitet und deshalb eine Verbesserung im Bereich SEO erzielt. Die größte Herausforderung bei der Erstellung barrierefreier Webseiten ist, daran zu denken möglichst allen Personengruppen die Interaktion mit der Seite so leicht wie möglich zu machen. Dabei reichen Meta Descriptions und Alt-Tags nicht aus. Das Beispiel der Londoner U-Bahn-Linien zeigt, dass Bilder auch stets farblos noch im Kontext Sinn ergeben müssen. Die Seitennavigation muss mehr Möglichkeiten bieten als nur per Maus und das HTML muss sauber gecoded sein. Bei allen Mühen bleibt jedoch festzuhalten: Eine saubere inhaltliche Konzeption lohnt sich gleich doppelt und sollte auf jeden Fall bei der nächsten Erstellung Ihrer Webseite bedacht werden.

  • Konzentration auf mehr als eine Art von Nutzer, am besten auf drei oder vier verschiedene Nutzergruppen
  • Saubere Arbeit auf Code-Ebene
  • Text, Bild und Navigation müssen für alle Gruppen gleichermaßen nutzbar sein

Jetzt Praxisbezug holen

Profitieren Sie durch die Case Study zum Thema Barrierefreiheit von unseren Erfahrungen in einem erfolgreich umgesetzten Projekt:

  • Empfehlungen zur gelungenen Umsetzung
  • Expertenstimmen
  • Hinweise auf eventuelle Stolperfallen

Barrierefreiheit erfolgreich umsetzen

Newsletter abonnieren

Die besten Tricks und Expertentipps für rundum erfolgreiche Webprojekte.

Folgen Sie uns ...

... und verpassen Sie nie wieder einen neuen Beitrag in unserem Blog.

Sie haben noch Fragen?

Dann kontaktieren Sie uns einfach und wir stehen sofort zur Verfügung.

Nachricht senden

×

Eine Nachricht senden...

Formular wird geladen ...

Tipps der Redaktion

Um-logo-teaser

Bieten Sie Ihren Kunden die perfekte Customer Experience

  • E-Mail-Marketing
  • Customer Interaction
  • Website-Personalisierung

Mehr Infos zur Software

×Schließen

Leadgenerierung im B2B

Unser neuestes Whitepaper: Mit Leadmanagement zum Erfolg – so erzielen Sie täglich neue Abschlüsse.

Zum kostenlosen Download