Tipps zur Barrierefreiheit von Websites, um mehr Menschen zu erreichen

Antje Fabel in Wissen 02.06.2022

Die Anforderungen an die Barrierefreiheit sind so vielfältig wie die Fähigkeiten der Nutzerinnen und Nutzer. Fehlende Videountertitel, schlechte Nutzerführung oder schlecht erkennbare Schaltflächen auf einer Website werden schnell zum Hindernis. Rund 30 % der Bevölkerung können ausgeschlossen werden, wenn Barrierefreiheit bei der Planung einer Website vernachlässigt wird. Allein “Online sein” mit einer Website reicht nicht mehr, um möglichst viele Menschen im Internet zu erreichen.

Was bedeutet Barrierefreiheit?

Die Begriffe „Barrierefreiheit“, „Barrierearmut“ und „Zugänglichkeit“ werden oft synonym verwendet.

Aktuell hat sich der Begriff Barrierefreiheit durchgesetzt, um die Frage zu klären: Werden möglichst alle Menschen eingeschlossen oder nicht? Das betrifft auch Onlineservices wie Websites, Info-Portale und Onlineshops. Die Frage ist, ob alle das Onlineangebot uneingeschränkt nutzen können.

Gemäß der „WCAG-Richtlinie für barrierefreie Webinhalte“ gilt eine Website als barrierearm, wenn sich Einschränkungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen nicht negativ auf die Nutzung von Onlineservices auswirken.

Warum ist Barrierefreiheit so wichtig? Und für wen ist Barrierearmut nötig und sinnvoll?

Oft ist nicht klar, welche Einschränkungen bereits zu Barrieren, Fehlbenutzung und schließlich Nutzungsabbrüchen führen können. Blindheit, Sehbehinderungen wie Farbfehlsichtigkeit, Schwerhörigkeit, Gehörlosigkeit, motorische Beeinträchtigungen, Lese-Rechtschreibschwäche, Lern- und geistige Behinderungen führen zu Barrieren im Internet.

Für 10 % unerlässlich

Für 10 % der Bevölkerung sind beispielsweise Tastatursteuerung, Sprachausgabe oder Joysticks notwendig, um Onlineangebote nutzen zu können.

Für 30 % - 40 % notwendig

Leicht bedienbare Websites mit Texten in einfacher Sprache helfen Menschen mit motorischen Einschränkungen oder einer Sehschwäche. Aber auch älteren Menschen, Nicht-Muttersprachler und Menschen mit einer Konzentrationsschwäche können damit unterstützt werden.

Für 100 % eine Erleichterung

Wir alle können Informationen schneller erfassen und Onlineservices leichter bedienen, wenn sie nutzerfreundlich aufbereitet sind. Hohe Kontraste sind auch für die mobile Nutzung von Webseiten von großem Nutzen, da Texte auf dem Smartphone auch bei starkem Sonnenlicht besser lesbar sind.

Wer muss barrierefreie Onlineangebot zur Verfügung stellen?

Barrierefreie Websites sind für Bund, Länder, Gemeinden sowie für juristische Personen des öffentlichen und privaten Rechts bereits Pflicht.

Gut zu wissen: Ab 2025 wird Barrierefreiheit auch im elektronischen Geschäftsverkehr (E-Commerce) verpflichtend, um Produkte und Dienstleistungen für Verbraucherinnen und Verbraucher barrierefrei zu gestalten. Dies gilt für Produkte und Dienstleistungen, die nach dem 28. Juni 2025 in den Verkehr gebracht werden.

Es ist vorteilhaft, wenn Barrierefreiheit von Anfang an in das Konzept integriert wird, um laufende Anpassungen zu ermöglichen und Kosten im Rahmen zu halten.

Tipp: Barrierefreiheit beim Relaunch berücksichtigen

Ein Relaunch einer Website oder eines Onlineshops bietet einen günstigen Einstiegspunkt für Barrierefreiheit.

Wenn Sie planen, Inhalte und Design zu überarbeiten, können Sie die Anforderungen der Barrierefreiheit von Anfang an berücksichtigen und dauerhaft implementieren. Dadurch werden große Aktionen überflüssig, und die Kosten werden gesenkt.

Vorteile eines barrierefreien Webangebots

  • Reichweite erhöhen durch besseres Ranking:
    Durch Nutzerfreundlichkeit und leichte Zugänglichkeit werden Websites besser gefunden. Dabei helfen Alternativtexte bei Bildern, die den Vorlese-Programmen für Sehbehinderte und Blinde dienen. Diese Bildbeschreibungen werden von Suchmaschinen wie Google ausgewertet und ins Ranking einbezogen.

  • Mehr Menschen erreichen und zufriedene Kundschaft gewinnen:
    Durch barrierefreie Webinhalte werden mehr Menschen erreicht, die durch kundenorientierte Benutzerführung Webservice erfolgreich nutzen können. Abbrüche im Bestellvorgang können damit umgangen werden.

Laut einer Umfrage der Europäischen Union von 2013 wären rund zwei Drittel der Menschen mit und ohne Behinderung dazu bereit, mehr für barrierefreie Produkte zu bezahlen.

6 Lösungen für häufige Barrieren bei der Benutzung von Websites

  1. Nutzerfreundlichkeit (UX): Das Design der Website muss die Inhalte gut vermitteln und den Besuchenden in sinnvolle Richtungen lenken, um das Verständnis zu fördern. Links und Formularfelder müssen beispielsweise ausreichend groß und eindeutig als solche gestaltet und erkennbar sein, damit sie korrekt benutzt werden können.

  2. Bedienbarkeit: Mehrere Bedienkonzepte wie die Maus-, Joystick-, Tastatursteuerung oder Sprachausgabe müssen ermöglicht werden. Auch die Touchbedienung am Bildschirm wie auf dem Smartphone bei der mobilen Nutzung sind zu berücksichtigen.

  3. Kontraste: Texte müssen sich ausreichend vom Hintergrund abheben, damit sie von Menschen mit einer Sehbehinderung gelesen werden können.

  4. Videos: Videos benötigen Untertitel z. B. durch Video-Transkription, damit sie auch Gehörlose oder schwerhörige Menschen konsumieren können.

  5. Alternativtexte: Bilder, Formulare und Schaltflächen müssen mit Alternativtexten versehen werden, damit Programme für blinde Menschen diese richtig erfassen und vorlesen können. Nur so kann die Website zielführend genutzt werden.

  6. Textverständlichkeit: Leichte Sprache unterstützt alle Menschen, den Inhalt schnell und korrekt erfassen zu können, ist aber auch in Hinblick auf Barrierefreiheit essenziell.

Wie so etwas in der Umsetzung aussehen kann, sehen Sie in unseren Projekten ...

Wie Sie die Barrierefreiheit Ihrer Website überprüfen können

Lighthouse-Prüfung im Chrome-Browser

Für einen groben Überblick können Sie mit dem Tool „Lighthouse“ prüfen, was Google vorschlägt, um die Barrierefreiheit zu verbessern.

  1. Öffnen Sie dafür Ihre Website im Internetbrowser Chrome und rufen Sie die Unterseite auf, die Sie überprüfen möchten.

  2. Klicken Sie auf die rechte Maustaste und wählen Sie „Untersuchen“. Es öffnet sich ein Bereich, der hauptsächlich für Entwickler gedacht ist, um eine Webseite zu prüfen usw.

  3. Im oberen Bereich finden Sie Schaltflächen, um bestimmte Funktionsbereiche zu öffnen. Klicken Sie auf den Reiter „Lighthouse“, um diesen Bereich zu öffnen.

  4. Auf Wunsch können Sie alle Kategorien unter Lighthouse prüfen lassen. Die Kategorie „Accessibility“ überprüft die Barrierefreiheit. Klick auf „Generate report“ startet die Prüfung der geöffneten Webseite.
    Nach wenigen Augenblicken wird das Ergebnis angezeigt.

  5. Die Prüfung kann auf jeder Unterseite Ihres Onlineauftritts wiederholt werden.

Die Startseite von tyclipso.net wird im Internetbrowser Chrome angezeigt. Im unteren Bereich ist das Entwicklertool Lighthouse geöffnet. Die Seite wurde auf Barrierefreiheit überprüft und mit dem Ergebnis 97 von 100 bewertet.

Das Prüfergebnis für tyclipso.net in der Kategorie Barrierefreiheit

Kontrast checken

Überprüfen Sie Elemente Ihrer Website auf ausreichende Kontraste. Beispielsweise auf der Website contrastchecker.com. Geben Sie dazu die Vorder- und Hintergrundfarbe eines Elements oder eines Textbereiches ein, die Sie testen möchten.

Bei größerer Schrift ist ein Kontrastverhältnis von 3:1 Minimum. Erforderlich sind im Allgemeinen 4,5:1 bei Schriftgrößen ab 18 pt.

Um die ganze Website in einem Vorgang zu prüfen, kann der Farbkontrasttest auf experte.de genutzt werden. Nach Eingabe der Website-URL wird Seite für Seite nach ungenügenden Farbkontrasten gesucht. Anschließend werden die Ergebnisse übersichtlich pro Seite aufgelistet.

Tastaturbedienbarkeit prüfen

Testen Sie, ob Ihre Website ohne Maus bedienbar ist. Nutzen Sie dazu folgenden Tasten Ihrer Tastatur:

  • Pfeiltasten: Auf der Seite nach oben/unten bzw. rechts/links scrollen.

  • Tab-Taste: Zu interaktiven Elementen wie Links und Eingabefeldern springen.

  • Umschalt/Shift + Tab springt zum vorherigen interaktiven Element zurück.

  • Eingabe/Enter: Der angesteuerte Link wird geöffnet.

  • Leertaste: Checkboxen aktivieren/deaktivieren.

  • Dropdown-Menüs können über die Leertaste geöffnet werden, über die Pfeiltasten kann innerhalb des Menüs navigiert werden. Eingabe folgt dem Menüpunkt.

Vergrößerung der Webseite testen

Überprüfen Sie, ob die Inhalte Ihrer Website problemlos und verlustfrei vergrößert werden können. Gehen Sie dabei wie folgt vor:

  1. Öffnen Sie Ihre Website.

  2. Halten Sie die Strg-Taste gehalten und scrollen Sie mit dem Mausrad.
    Damit zoomen Sie in eine Webseite bzw. wieder heraus.

  3. Stellen Sie die Vergrößerung auf 200 % und überprüfen Sie, ob Sie noch alle Inhalte sehen können.

Wie wir barrierefreie Info-Portale unserer Partner umsetzen, lesen Sie hier

Fazit: Barrierefreiheit als Standard etablieren

Barrierefreiheit sollte nicht nur als Qualitätsmerkmal betrachtet werden, sondern als Standard. Alle sollten die gleichen Zugangsbedingungen zu Onlineservices erhalten, unabhängig von individuellen Fähigkeiten.

“Digitale Teilhabe ist für alle Menschen wichtig. Alle Menschen sollten ganz selbstverständlich überall dabei sein. Auch bei der Digitalisierung. Das ist Inklusion. Inklusion und digitale Teilhabe sorgen dafür, dass alle Menschen gut für die Zukunft vorbereitet sind.” Aktion Mensch, Digitale Teilhabe.

Und nicht zu vergessen: Wir alle werden älter und das Seh- und Hörvermögen kann nachlassen. Irgendwann werden auch wir dankbar für verständliche und bedienbare Webangebote sein, die uns teilhaben lassen.

Quellen

www.aktion-mensch.de

www.w3.org

www.dzblesen.de

www.einfach-fuer-alle.de

Albrecht Mauersberger kümmert sich um einen gelungenen Projektauftakt

Für alle erreichbar sein

Sie wollen mit Barrierefreiheit mehr Menschen erreichen?

Wir helfen Ihnen, Ihren Webauftritt zu überarbeiten und zu optimieren.

KONTAKT AUFNEHMEN