Barrierefreiheit im Web: Deine Website zugänglich für alle Nutzer:innen

Business Icon

Wir nutzen jeden Tag verschiedenste Webanwendungen und Websites. Von Bankangelegenheiten über Jobsuche und Bewerbungsprozesse, Online-Bestellungen von Lebensmitteln und Kleidung, sogar Behördengänge können mittlerweile digital abgewickelt werden.

Während die Nutzung all dieser digitalen Services für die meistens Menschen selbstverständlich und hilfreich ist, kann es für Menschen mit unterschiedlichen Beeinträchtigungen Schwierigkeiten mit sich bringen.

Besonders betroffen sind ältere Internetnutzer:innen, Menschen mit Seh- und Hörbeeinträchtigung oder kognitiven Einschränkungen. Manche dieser Nutzer:innen bedienen sich verschiedener Hilfsmittel wie Screenreader oder Assistenz-Geräten. Damit diese Hilfsmittel optimal genutzt werden können, sollen auch wir als Website-Besitzende, Screendesigner und Content-Creator maßgeblich etwas beitragen. Wir können Websites, Web-Anwendungen und Apps so gestalten, dass wir alle Nutzer:innen inkludieren!

Wir sehen es in unserer Verantwortung Barrierefreiheit bei world4you so gut es geht umzusetzen. Es gibt aber sogar gesetzliche Institutionen wie die ADA (Americans with Disabilities Act) in Amerika, eEurope Action Plan innerhalb der Europäischen Union und die Web Content Accessibility Guidelines (WCAG), die die Regelungen für Barrierefreiheit im Web festlegen.

In diesem Blog-Artikel wollen wir dir diese Regelungen zusammengefasst näher bringen und dir Tipps sowie Tricks zur praktischen Umsetzung mitgeben.

Barrierefreiheit Icons und bunte Figuren

Was bedeutet also Barrierefreiheit im Web genau?

Unter Barrierefreiheit versteht man die uneingeschränkte Zugänglichkeit von öffentlichen Plätzen, Arbeitsstätten, Wohnorten, Verkehrsmitteln, Angeboten und Gegenständen, aber mittlerweile auch von Websites und digitalen Dokumenten. Diese sollen so gestaltet sein, dass sie ohne fremde Hilfe von allen Menschen aufgerufen und genutzt werden können.

Die WCAG bewertet die Zugänglichkeit von Websites und digitalen Dokumenten in den folgenden 4 Stufen:

KriterienElemente
Wahrnehmbarkeit– Textalternativen
– Alternativen für Video- und Audiodateien
– Unterscheidbarkeit (Hinter- und Vordergrund, Bild und Text)
Bedienbarkeit– Tastaturbedienbarkeit – Funktionalitäten müssen über Tastatur zugänglich sein
– genügend Zeit bei Weiterleitungen oder swipen von Inhalten, sodass die vorherigen Inhalte auch sichtbar sind
– Vorsorge gegen epileptische Anfälle
– Navigierbarkeit
Verständlichkeit– Lesbare Inhalte einfach ohne Wortkreationen
– Erklärung von FremdwörternVorhersehbarkeit
– Hilfestellung bei Eingabe (z.B. Vorschläge bei Suchfeldern)
Robustheit– Browserkompatibilität
– Gerätekompatibilität
– Responsivität

Wem nutzt eine barrierefreie Website und welche Hilfsmittel gibt es?

Es sind viel mehr Menschen von Barrieren im Web betroffen als man auf den ersten Blick glaubt. Barrierefreier Zugang, im Englischen „accessibility“ genannt, hilft Internetnutzenden mit Behinderungen, sowie der wachsenden Zielgruppe von älteren Menschen. Auch für uns Website-Inhaber:innen hat es Vorteile bei der Erstellung und Wartung unserer Websites auf Userfreundlichkeit zu achten. Das Suchmaschinenranking bei Google und weiteren Anbietenden wird zum Beispiel durch Alternativ-Texte und Bildtitel enorm verbessert.

Folgende Nutzer:innen können wir mit optimierten Inhalten im Web unterstützen:

  • Menschen mit Einschränkungen wie Hörbeeinträchtigung oder Taubheit, Sehbeeinträchtigung bis hin zur Blindheit und auch Menschen mit kognitiver Beeinträchtigung, Autismus sowie weiteren Handicaps.
  • Ältere Internetnutzer:innen und Nutzer:innen, die eventuell technisch nicht versiert sind.
  • Smartphone und Tablet User zählen aufgrund von Responsivität auf mobilen Websites auch zu einer eingeschränkten Gruppe.

Welche Hilfsmittel benutzen betroffene Personen?

Wie bereits erwähnt, nutzen einige Menschen mit Einschränkungen verschiedenste Hilfsmittel, um sich im Web zurechtzufinden. Das bekannteste sind wahrscheinlich Screenreader – ein Ausgabegerät, dass die Inhalte einer Website (auch Bilder) über einen Lautsprecher oder Kopfhörer ausgibt. Neben den Screenreadern gibt es für Menschen mit Sehbehinderung auch noch die sogenannte Braille-Zeile. Diese ermöglicht, Texte als Braille-Schrift (Blindenschrift) wiederzugeben. Weiters gibt es für Menschen mit Seh-Einschränkungen Vergrößerungs-Software, bei der teilweise auch Farb- und Kontrastanpassungen vorgenommen werden können.

Wir haben schon kurz über die Wichtigkeit von Tastaturbedienbarkeit gesprochen, der Grund dafür ist, dass es ganz viele verschiedene Tastaturmodelle gibt. Hier können zum Beispiel Spezial-Tastaturen als Hilfsmittel genutzt werden, die etwa mit Ellenbogen oder dem Kopf bedient werden können. Eine beliebte Alternative zur Tastatursteuerung ist die Sprachsteuerung. Eine Softwarelösung zur Spracheingabe wandelt gesprochenes Wort in Text um und hilft sogar dabei, Computerbefehle umzusetzen.

Wie kann ich Barrierefreiheit auf meiner eigenen Website bewerten?

Nun da du weißt, was Barrierefreiheit im Web bedeutet und wem sie nutzt, möchten wir dir ein paar Tipps und Tricks mitgeben, wie du das Gelernte auf deiner eigenen Website analysieren und umsetzen kannst.

Zuerst werfen wir einen genauen Blick auf den aktuellen Stand deiner Website.
Folgende Punkte kannst du gut und einfach selbst überprüfen:

KriterienÜberprüfungsmethode
TastaturbedienbarkeitVersuche ohne Maus auf deiner Website zu navigieren.
Zoom und BildschirmauflösungBetrachte deine Website auf unterschiedlichen Bildschirmen und Zoom-Einstellungen. Sind deine Inhalte noch gut leserlich?
Kontrast Text zu HintergrundfarbeSind Texte auf unterschiedlichen Hintergründen gut sichtbar? Es gibt hierzu einige Webanbietende, bei denen du online und gratis Kontraste kontrollieren kannst. Auch der bekannte Anbieter Adobe stellt hier ein sehr nützliches Tool zur Verfügung.
Sauberer CodeUm die Richtigkeit des Codes auf deiner Website zu prüfen, gibt es ebenfalls einige Online-Checker wie den HTML-Validator von W3C (World Wide Web Consortium).

Wie in der Tabelle bereits erwähnt, gibt es viele Anbietende für WCAG-Checker sowie Online-Testprogramme, die bei der Überprüfung deiner Website auf Barrierefreiheit helfen. Bei manchen davon reicht es sogar deine URL direkt auf der Webpage einzufügen z.B. WAVE. Andere Programme wie TotalValidator werden als Browser-Plugin hinzugefügt oder als App heruntergeladen.

Es lohnt sich hier Recherche-Zeit zu investieren, um ein für dich passendes Tool zu finden, das dich bei der Bewertung der Barrierefreiheit deiner Website unterstützt. Natürlich kannst du dich auch durch eine externe Fachperson beraten lassen. In Österreich findest du hier zum Beispiel Hilfestellungen bei der WKO.

Frau im Rollstuhl und Checkliste bei Webseite

Nun geht es an die Umsetzung!

Wenn du dich nun an die Überarbeitung deiner eigenen Website oder digitalen Dokumente machen möchtest, geben wir dir gerne noch einen kleinen Spickzettel aus unserem FAQ-Bereich mit, auf dem wir einige einfach umsetzbare Tipps für dich festgehalten haben:

  • Achte darauf, dein Webdesign skalierbar zu gestalten. Das Layout deiner Website passt sich also an die Fenstergröße des Browsers (auch bei starkem Zoom) oder die Größe des Gerätes, mit dem die Seite aufgerufen wird, an.
  • Gestalte das Design deiner Website so, dass Bilder und Texte getrennt sind. Dies ist mit HTML und CSS gut möglich. Vermeide es, Texte und Überschriften in Bilddateien unterzubringen. Menschen mit Sehbeeinträchtigungen nutzen oft eine Unterstützungstechnologie, die Texte vorliest oder diese sogar in Blindenschrift umwandeln kann.
  • Nutze Alternativ-Texte für Bilder, die ebenfalls im HTML-Code oder in einem CMS (Content-Management-System) festgelegt werden. Auch diese können von unterstützenden Programmen ausgelesen werden. Zusätzlich verbessert das das SEO-Ranking deiner Website bei Google und anderen Suchmaschinen.
  • Wähle eine gut verständliche Sprache und Formulierung der Textinhalte. Falls du Fachbegriffe oder Abkürzungen verwendest, erkläre diese im Text.
  • Eine gut durchdachte Struktur vereinfacht die Navigation merklich. Kurze URLs und klare Benennungen helfen dem schnellen Verständnis. Versuche deine User mit so wenigen Klicks wie möglich ans Ziel zu bringen.
  • Vermeide hektische Videoinhalte oder blinkende Effekte sowie Animationen. Sie können bei manchen Usern epileptische Anfälle auslösen.
  • Entscheide dich für eine gut leserliche Schriftart und Schriftgröße. Für Fließtexte sollte die Größe 16px oder mehr sein. Bei der Schriftart wird allgemein empfohlen für Webinhalte eine serifenlose Schriftfamilie zu nutzen, die feste Abstände zwischen den Buchstaben hat und nicht zu dünn ist – hier eignen sich zum Beispiel die Schriften Arial, Helvetica, Tahoma, Calibri und Verdana sehr gut.
  • Auch durch Textformatierungen wie GROSS, fett, kursiv usw. kannst du mehr Struktur in deinen Content bringen und somit die Leserlichkeit verbessern.
  • Biete Video-Alternativen. Können aufgrund von körperlichen oder technischen Beeinträchtigungen keine Videos angeschaut werden, hilft zum Beispiel ein erklärender Text, der den im Video gesprochenen Inhalt nochmals beschreibt.

Barrierefreie Websites  –  es lohnt sich für alle 😊

Nun, da du dich mit dem komplexen Thema der Barrierefreiheit im Web und den vielen verschiedenen Standards, den Menschen dahinter sowie ihren Hilfsmitteln befasst hast, wünschen wir dir ganz viel Erfolg bei der Verbesserung deiner Website und digitalen Dokumente. Es lohnt sich für uns alle, diesem Thema Aufmerksamkeit zu widmen, uns dafür zu sensibilisieren und es bei unseren eigenen Web-Projekten im Hinterkopf zu behalten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Letzter Beitrag
Mail Icon

E-Mail-Programm oder Webmail – Was ist besser?

Nächster Beitrag
Business Icon

Responsive Webdesign: So funktioniert deine Website auf allen Endgeräten

Verwandte Beiträge

Newsletter Icon

Mit dem world4you-Newsletter bleibst du am Laufenden

Fachwissen rund um deine Online-Plattform
inspirierende Storys unserer Kundinnen & Kunden
interessante world4You-Insights
einzigartige Rabattaktionen

Fachwissen rund um deine Online-Plattform
inspirierende Kundenstorys
interessante world4You-Insights
einzigartige Rabattaktionen

    *Pflichtfeld