Insights Home » Barrierefreie Website erstellen

Barrierefreie Website erstellen – ein Thema, das zu oft vernachlässigt wird

Barrierefreie Kontraste

Buttons sollten besonders hervorgehoben und durch prägnante Kontraste unterstützt werden. So macht es STORMING:

Kontakt

Wir stehen in den Startlöchern und freuen uns auf Ihr Projekt. Schreiben Sie uns, rufen Sie an oder kommen Sie vorbei und wir klären alles Weitere.

insights@storming-studios.com
+49 (0) 7152 31 99 84 – 0
22.03.2022 | Barrierefreiheit bedeutet soziale Verantwortung – das gilt sowohl offline als auch online. Websitebetreiber können einiges dafür tun, um Menschen mit körperlichen oder geistigen Einschränkungen den Zugang zum Internet zu erleichtern, indem sie ihre Website barrierefrei gestalten.

Warum es so wichtig ist, eine barrierefreie Website zu erstellen

Vieles geschieht heute im und über das Internet, doch noch immer denken viele Entwickler und Websitebetreiber nicht an Menschen mit Behinderungen, wenn sie Websites erstellen oder Dienstleistungen anbieten. Es ist von immenser Bedeutung, eine barrierefreie Website zu erstellen, denn nach wie vor werden unzählige Menschen auf nicht-barrierefreien Websites von der Nutzung ausgeschlossen. Für viele Websitebetreiber heißt das nichts anderes, als dass sie potenzielle Kunden, Interessenten und Käufer vernachlässigen. Etwa jeder Zehnte in Deutschland wird als schwerbehindert eingestuft. Dazu gehören beispielsweise Gehörlose, Blinde und motorisch oder geistig eingeschränkte Personen. Diese sind auf Menschen angewiesen, die ihre Website barrierefrei gestalten, denn der Zugang zu etlichen Informationen, Online-Broschüren oder auch Bestellformularen bleibt ihnen sonst grundsätzlich vorenthalten.

Barrierefreie Kontraste

Buttons sollten besonders hervorgehoben und durch prägnante Kontraste unterstützt werden. So macht es STORMING:

Kontakt

Wir stehen in den Startlöchern und freuen uns auf Ihr Projekt. Schreiben Sie uns, rufen Sie an oder kommen Sie vorbei und wir klären alles Weitere.

insights@storming-studios.com
+49 (0) 7152 31 99 84 – 0

Welche Bedeutung hat es, wenn wir unsere Website barrierefrei gestalten?

In unserer digitalen Zeit erscheint der Zugang zum Internet nahezu selbstverständlich. Menschen, die keinen uneingeschränkten Zugang zum Internet haben, sind heute ganz klar im Nachteil. Der Grund dafür ist die Tatsache, dass viele Informationen heutzutage nur noch über das Internet zugänglich sind. Außerdem wird ein Großteil der Produkte oder Dienstleistungen über das Web angeboten und sowohl die Kommunikation als auch alltägliche Dinge, wie die Jobsuche, passieren online über soziale Medien und Plattformen. Das Internet ist also mittlerweile in der Arbeitswelt sowie im Privaten ein essenzieller Bestandteil unserer Zeit. Leider läuft die Ambition, eine barrierefreie Website zu erstellen nach wie vor schleppend und führt dazu, dass sehr viele Menschen mit Behinderung einen erschwerten Zugang zum Web haben. Dies möglich zu machen, bedeutet also auch, Gleichberechtigung zu schaffen.

Welche Barrieren gibt es im Internet?

Eine barrierefreie Website zu gestalten, bedeutet, dass Begrenzungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen im Vorfeld bedacht und vermieden werden sollten. Kurz: Alle Informationen sowie Elemente müssen ohne Einschränkung zugänglich und bedienbar sein.

Klare Barrieren sind beispielsweise:

  • Texte oder Formularfelder, die sich nur minimal vom Hintergrund unterscheiden, können Menschen mit Sehbehinderung nur schwer erkennen.
  • Videos ohne Untertitel können von schwerhörigen oder gehörlosen Menschen nicht konsumiert werden.
  • Websites, die Formulare, Bilder und Buttons nicht textlich wiedergeben, schließen blinde Menschen von der Nutzung aus.
  • Animierte Inhalte oder Videos, die sich zu schnell bewegen, können für Epileptiker gefährlich werden.

Damit individuelle Benachteiligungen vermieden werden – und das nicht nur im Internet – wurde in den USA im Jahr 1990 der Americans with Disabilities Act (ADA) zum Bundesgesetz. Das Gesetz schreibt die Gleichstellung von Menschen mit Behinderungen vor und verbietet deren Diskriminierung durch staatliche Institutionen und Unternehmen. Im Oktober 2016 wurde seitens der Europäischen Union die Richtlinie zur Barrierefreiheit im Internet verabschiedet. Geregelt werden damit barrierefreie Zugänge zu Websites und mobilen Anwendungen, wie beispielsweise von öffentlichen Behörden und Ämtern. Alle Mitgliedsstaaten sind dazu verpflichtet, Apps anzupassen und die Website barrierefrei zu gestalten. Ein barrierefreier Zugang muss in vollem Umfang gewährleistet werden. Betreiber müssen hierzu die vier Grundprinzipien der Web-Content-Accessibility-Guidelines (WCAG) beachten, die die Grundlage der EU-Richtlinie darstellen.

Wahrnehmbarkeit

nformationen sowie Bestandteile einer Benutzerschnittstelle müssen so dargestellt werden, dass sie von allen Nutzern wahrgenommen werden können. Auf diese Weise wird gewährleistet, dass Menschen mit eingeschränktem oder gar ohne Seh- oder Hörvermögen eine Website nutzen können.

Bedienbarkeit

Es muss gewährleistet sein, dass Menschen mit limitierten manuellen Fähigkeiten oder eingeschränkter Kraft eine Website anwenden können. Im Klartext: Bestandteile einer Website und die Navigation müssen bedienbar und ausreichend groß sein.

Verständlichkeit

Die Inhalte und auch Funktionen einzelner Website-Elemente müssen klar zu verstehen und bestenfalls in „leichter Sprache“ verfasst sein. Mit anderen Worten: Unternehmen, die eine barrierefreie Website erstellen, sollten möglichst auf Fremdwörter oder komplexe Formulierungen verzichten, damit Menschen mit eingeschränkter Wahrnehmung oder Kognition die Website verstehen und verwenden können.

Robustheit

Content muss verlässlich von einer größeren Auswahl an User Agenten und unterstützenden Techniken erfasst werden können. Damit wird gewährleistet, dass eine Website von Menschen mit unterstützenden Technologien, wie beispielsweise Braillezeilen, Spracheingabe oder Screenreader, genutzt werden kann.

Was gilt es zu beachten, wenn wir eine barrierefreie Website erstellen?

Um eine barrierefreie Website erstellen zu können, sind verschiedene Anpassungen bezüglich Screenreader, Tastaturnavigation und Design notwendig.

Screenreader

Menschen mit gravierender Sehbehinderung können als Unterstützung für Vorleseprogramme auf sogenannte Screenreader zurückgreifen. Wer die eigene Website barrierefrei gestalten möchte, sollte beachten, dass ihr Content von Bildschirmlesegeräten komplett interpretiert werden kann. Diese Aspekte helfen Screenreadern dabei, Inhalte zu lesen:

ALT-Tags

Bei ALT-Tags (Alternative Tags) handelt es sich um eine kurze Bildbeschreibung, die visuelle Inhalte sprachlich übersetzt. Anstelle eines Bildes wird blinden Nutzern diese Beschreibung von Screenreadern vorgelesen. Der Code für den ALT-Tag lässt sich als HTML-Bestandteil im Quelltext zur Bilddatei hinterlegen. Sogenannte Voice-Browser oder Screenreader können den Inhalt des Bildes vorlesen.

ARIA-Attribute

ARIA ist eine semantische Erweiterung für HTML. Mithilfe von ARIA-Attributen können Webentwickler verschiedene Inhalte und Web-Applikationen für Menschen mit besonderen Einschränkungen zugänglicher machen. Das Layout einer Website bleibt beim Einsatz von ARIA zur Entwicklung barrierefreier Websites unverändert. In den meisten Browsern und Screenreadern ist ARIA implementiert.

Rollen- & Navigations-Landmarken

Durch die Einführung von ARIA 1.0 gibt es neue Möglichkeiten für die strukturelle Navigation. Mit den sogenannten Landmark Roles wird eine Website in unterschiedliche Regionen gegliedert und Funktionalitäten semantisch gekennzeichnet – so werden Inhalte für Hilfsmittel wie Screenreader ansteuerbar gemacht. Screenreader können durch die Verwendung von Landmark Roles Tastenbefehle anbieten, um bestimmte Website-Regionen direkt anzuspringen. Eine wichtige Eigenschaft, um die Website barrierefrei zu gestalten.

Slider &
Bewegtbilder

Slider oder Bewegtbilder sind nicht immer abschaltbar. Wenn man eine barrierefreie Website erstellen möchte, sollte man auf die Verwendung eines sogenannten Scroll Snaps setzen. Diese Technik bringt die Bilder zum Einrasten und funktioniert mit allen gängigen Browsern. Der Slider verwendet ausnahmslos valides HTML und CSS, ist responsiv, barrierefrei und eine Bedienung über die Tab-Taste ist ebenfalls möglich. Nutzer mit Screenreader können von Bild zu Bild steuern und die entsprechenden Alternativtexte (Bildbeschreibungen) lesen.

Icons &
Schaltflächen

Funktionale Alternativtexte werden dann angewendet, wenn Icons verlinkt oder als Schaltflächen verwendet werden. Linkzweck oder Funktion müssen dabei eindeutig sein. Das heißt, anstatt die Bezeichnung „stilisierter Drucker“ zu nutzen, sollte es „Drucken“ heißen. Grafiken werden oftmals in Verbindung mit dem Text aktiv ausgespielt. Bei der Verwendung von funktionalen Alternativtexten kommt es demnach auf den Linktext an und nicht auf die Erklärung zur Grafik.

Formulare &
Validierung

Von zentraler Bedeutung für die Barrierefreiheit von Formularen ist deren Semantik. Das heißt, Steuerelemente müssen auch im Back-End immer beschriftet werden, damit Screenreader sie lesen können. Sinnvolle Fehlermeldungen müssen angeboten werden und sollten nicht nur farblich angezeigt werden. Wer eine barrierefreie Website erstellen möchte, sollte also darauf achten, dass Screenreader diese Meldungen vorlesen können.

Eine Tastatur und eine Computermaus in einem Flatlay-Design.

Tastaturnavigation

Nutzer mit motorischen Einschränkungen haben oftmals Probleme, die Maus zu bedienen oder über mobilen Endgeräten mit dem Finger auf kleinere Links und Schaltflächen zu klicken. Optimalerweise müssen angemessene Größen von klickbaren Bereichen angeboten werden. In einzelnen Fällen ist die Bedienung der Maus allerdings nahezu unmöglich. Deshalb sollte man eine barrierefreie Website erstellen, die auch mittels Tastatur steuerbar ist. Das Access Key-Pad stellt eine gute Lösungsmöglichkeit dar, da es recht einfach in die eigene Website integrierbar ist – auch ein wichtiger Aspekt für die allgemeine Usability.

Ausklappmenüs

Viele Drop-Down-Menüs funktionieren nur mit dem Mouseover und die Möglichkeit, die Navigation mit der Tastatur zu bedienen, fehlt sehr oft. Ein Ausklappmenü, das andere Navigationspunkte überlagert, kann vor allem bei Menschen mit motorischen Einschränkungen zu Problemen in der Bedienbarkeit einer Website führen, weshalb die Möglichkeit zur Tastaturnavigation adaptiert werden sollte.

Überlagerungsfenster

Pop-up-Fenster verwirren nicht nur Screenreader, sondern blockieren manchmal auch die Tastaturnavigation. Deshalb sollten Überlagerungsfenster explizit angekündigt werden, denn öffnet sich ein neues Browserfenster, bekommen dies Menschen mit Sehbehinderung oft nicht mit. Insofern ist es besonders wichtig, die User über die Funktion zu informieren – oder bestenfalls ganz auf Pop-Ups zu verzichten, um die Website barrierefrei zu gestalten.

Menüs

Speziell horizontale Navigationsmenüs mit Unterkategorien benötigen Dropdowns, die meist nicht barrierefrei benutzbar sind. Ein alternatives, barrierefreies Dropdown-Menü ist beispielsweise das Accessible Mega Menu. Dabei handelt es sich um ein Navigationselement an der obersten Position einer Website, welches die Bedienbarkeit mit der Tastatur und den Einsatz von Screenreadern unterstützt.

Formulare

Auch in Bezug auf Online-Formulare ist die Bedienbarkeit per Tastatur ideal einsetzbar, um eine barrierefreie Website zu erstellen. Über den generellen Mindestanspruch an die Tastaturbedienbarkeit hinaus, geht es speziell um die Vereinheitlichung der Texte und Darstellungen für dieselben Funktionen sowie die Kennzeichnung der Pflichtfelder.

Schaltflächen

Oft sind Schaltflächen aufgrund von Scripts weder mit der Eingabetaste noch der Leertaste bedienbar. Besondere Probleme tauchen beim Absenden eines Formulars auf. Das Abschicken eines Formulars muss vom Nutzer klar ausgelöst werden und erfolgt durch die Eingabetaste. Entscheidend für die Barrierefreiheit ist, dass der Nutzer die Kontrolle über den Fokus der Tastatur behält und nicht ungewollt zu anderen Seiten weitergeleitet wird.

Designanpassungen

Einige Menschen mit einer Sehbehinderung setzen Vergrößerungssysteme als Hilfsmittel ein – andere ändern über die Systemeinstellungen die Bildschirmfarbe, Schriftart und Schriftgröße. Doch wenn man eine Website barrierefrei zu gestalten weiß, kann man verschiedene Dinge bereits während der Konzeption berücksichtigen.

Inhalte & Anzeigen

Der Text sollte immer gut lesbar sein. Eine unkomplizierte Schriftart, die angemessene Größe, kontrastreiche Farben und ausreichende Zeilen- und Zeichenabstände dienen einer besseren Lesbarkeit. Zum Verfassen des Inhalts sollte vor allem eine einfache Sprache oder bestenfalls die sogenannte „leichte Sprache“ verwendet werden. Auch die Anordnung spielt eine entscheidende Rolle bei dem Prozess, eine barrierefreie Website zu erstellen und sollte logisch aufgebaut sein. Dies erleichtert auch die Texterfassung durch Screenreader.

Kontrastreiches Design

Ein hoher Kontrast ist für eine gute Visualität unabdingbar. Ähnelt die Farbe eines Textes zu sehr dem Hintergrund, ist er für viele Nutzer schwierig zu lesen – vor allem bei Farbenblindheit. Mit einem Contrast-Checker kann man dies relativ einfach testen und gegebenenfalls anpassen. Aber nicht nur auf Kontraste sollte das Augenmerk gerichtet werden: Auch auf die Farbsehschwäche wie die Rot-Grün-Schwäche sollte bei der Farbauswahl der Website besonders geachtet werden.

Fokus & Akzentuierung

Ein Teil des visuellen Designs ist der sichtbare Tastaturfokus. Im Unterschied zur Steuerung des Mauszeigers ist die Erkennbarkeit des Fokus vom Webdesign abhängig und sollte veranschaulicht werden. Wer eine Website barrierefrei gestalten will, sollte sich an den empfohlenen Wert eines Kontrastverhältnisses von mindestens 3:1 halten.

Ton-Anpassung

Töne und Geräusche, die automatisch starten, wenn eine Website geladen ist, sollten ausschaltbar sein. Unternehmen, die eine barrierefreie Website erstellen, sollten einerseits eine Einstellung, die sich auf die ganze Website bezieht und andererseits die Einrichtung eines Steuerelements am Anfang einer Website, mit dem der Ton ausgeschaltet werden kann, bereitstellen. Dauerhafte Töne können assistierende Techniken, wie beispielsweise Screenreader, stören.

Animations-Stopp

Für Animationen muss es ein Mechanismus geben, der Benutzern das Stoppen erlaubt. Dazu zählen alle sich bewegenden, blinkenden oder scrollenden Informationen, die meist automatisch starten und mehr als fünf Sekunden dauern. Vor allem blinkende Animationen können für Menschen mit epileptischen Erkrankungen eine Gefahr darstellen. Wenn man eine barrierefreie Website gestaltet, sollte man direkt auf derlei Animationen verzichten.

So könnten Anpassungen in der Praxis aussehen

Wer unterstützt wird, wenn Unternehmen ihre Website barrierefrei gestalten

Eine Vielzahl von möglichen Einschränkungen können die Nutzung von Websites erschweren. Dabei treten für unterschiedliche körperliche oder geistige Beeinträchtigungen auch unterschiedliche Hürden im Internet auf. Eine Website barrierefrei zu gestalten, gewährleistet die uneingeschränkte Nutzung ohne fremde Unterstützung. Für diese und viele weitere Personengruppen sollten Websitebetreiber vermehrt auf Barrierefreiheit achten:

Blinde und sehbehinderte Menschen

Es gibt so einige Barrieren, mit denen blinde und sehbehinderte Menschen zu kämpfen haben. Bilder, Grafiken und grafische Funktionselemente werden von Screenreadern, die von vielen sehbehinderten Menschen genutzt werden, gar nicht oder nur bedingt gelesen. Zu lange, komplexe oder vielsprachige Texte, schlechte Kontraste und eine zu kleine Schrift sind einige weitere Beispiele für Hürden im Web-Alltag. Um eine barrierefreie Website zu erstellen und somit die Nutzererfahrung für blinde und sehbehinderte Menschen zu verbessern, müssen zum Beispiel Bilder und Grafiken mit einem Alternativtext versehen werden, damit Screenreader sie lesen können. Achtet man bei der Verwendung von Farbkombinationen darauf, dass Text und Hintergrund farblich nicht zu nah beieinander liegen, so ergibt sich ein Kontrast, der sehbehinderten Menschen das Lesen vereinfacht.

Menschen mit Epilepsie

Es kann für Menschen mit lichtempfindlicher Epilepsie gefährlich werden, wenn sie durch das Internet surfen, denn eine Animation oder ein blinkendes GIF kann jederzeit einen Anfall auslösen. Um für Epileptiker eine barrierefreie Website zu erstellen und solch einen Anfall zu verhindern, muss nicht zwingend auf bewegte Elemente verzichtet werden. Es genügt, wenn zum Beispiel mit einem Button die Möglichkeit gegeben ist, alle möglichen Auslöser für einen epileptischen Anfall zu deaktivieren. Dazu gehören unter anderem Videos, GIFs, Animationen oder auffällige Muster.

Gehörlose und schwerhörige Menschen

Eine barrierefreie Website zu erstellen, bedeutet auch die Berücksichtigung von gehörlosen und schwerhörigen Menschen. Allein in Deutschland leben 80.000 gehörlose Personen. Auch bei gehörlosen und schwerhörigen Menschen sind Videos und Bilder sehr beliebt. Diese sollten immer mit Untertiteln versehen werden. Zumindest sollte die Möglichkeit vorhanden sein, Untertitel unkompliziert zu aktivieren. Noch besser ist die Einbindung einer Video-Variante in Gebärdensprache.

Menschen mit kognitiver Beeinträchtigung

Für Menschen mit verminderten kognitiven Fähigkeiten kann es eine Herausforderung sein, komplexe Zusammenhänge zu erfassen und komplizierte Inhalte zu verstehen. Auch hier gibt es mehrere Ansatzpunkte, um eine Website barrierefrei zu gestalten. Klare Strukturen, eine eindeutige Navigation und die Verwendung von unterstützenden Bildern und kurzen Sätzen in einfacher Sprache machen Websites für Menschen mit kognitiver Beeinträchtigung zugänglicher.

Menschen mit sprachlichen Einschränkungen

Für Menschen, die unter der sogenannten Dyslexie leiden, ist es ebenso wichtig, wenn Betreiber ihre Website barrierefrei gestalten. Unter Dyslexie wird die Unfähigkeit verstanden, zusammenhängende Texte zu verstehen. Für diesen Fall bietet die Software WordPress ein spezielles Plugin an, welches den passenden Font zur besseren Verständlichkeit einrichtet. Davon profitieren nicht nur Dyslektiker, Legastheniker und Menschen mit eingeschränktem Sprachvermögen – auch für Autisten kann diese Funktion beispielsweise hilfreich sein. Websitebetreiber können somit eine zusätzliche Gruppe von Menschen erreichen, die etwa 15-20 Prozent ausmachen.

Menschen mit motorischer Beeinträchtigung

Auch für Personen mit motorischen Einschränkungen tauchen immer wieder Hürden in der Website-Nutzung auf. Beispielsweise ist es für einige nicht immer möglich, mit der Maus durch die Inhalte einer Website zu navigieren. Kleine Links und Schaltflächen sind dabei ganz besonders problematisch. Eine weitere Herausforderung kann die Bedienung mit dem Finger auf mobilen Geräten darstellen. Um diesen Schwierigkeiten entgegenzuwirken, sollten alle klickbaren Elemente für die mobile Nutzung optimiert werden. Die Möglichkeit der Navigation per Tastatur reduziert ebenfalls Barrieren für Menschen mit motorischen Einschränkungen.

Barrierefreie Website erstellen – eine Win-win-Strategie

In erster Linie sollte bei der Erstellung einer barrierefreien Website eines im Fokus stehen: Menschen mit unterschiedlichen Beeinträchtigungen die Möglichkeit zu bieten, für sich selbst zu sprechen und selbständig Inhalte aus dem Internet zu konsumieren. Es handelt sich also um eine menschliche und gesellschaftliche Aufgabe. Doch auch Websitebetreiber selbst profitieren von mehr Barrierefreiheit, denn so kann eine höhere Anzahl an Menschen erreicht werden, was die Chance auf einen höheren Marktanteil und mehr Gewinne zur Folge hat. Nebenbei werden die Suchmaschinenoptimierung und die Usability durch leichte Sprache, eine übersichtliche Struktur und intuitive Bedienbarkeit positiv beeinflusst. Wer eine Website barrierefrei gestalten möchte, muss zunächst herausfinden, welche Probleme auf der Website auftreten können. Eine Agentur kann an dieser Stelle helfen – sowohl bei der Identifizierung möglicher Barrieren als auch bei der Umsetzung eines barrierefreien Webauftritts. Denn wie deutlich wurde, ist die Mission „barrierefreie Website erstellen“ nichts, was von heute auf morgen erledigt werden kann. Es erfordert tiefgründiges Know-how und Erfahrung.

Über die Autorin

Viorica Mic

Ein Schwarz-weiß Portrait von Viorica Mic.

Über die Autorin

Viorica Mic

Mit ihrem Scharfsinn und Unternehmergeist findet Viorica in allen Belangen rund um das Marketing stets sinnvolle Lösungsansätze. Als Datenanalystin verwandelt sie Zahlen in Wissen und ist als Schnittstelle zum Development fähig, erfolgsorientierte Entscheidungen zu treffen, von denen nicht nur ihr Team, sondern vor allem Unternehmen profitieren können.

concepts@storming-studios.com