Inbound Marketing Blog

Digitale Barrierefreiheit: Die 7 Kriterien für barrierefreie Websites

Geschrieben von Conny Pflanz | 22.2.2022

Kennen Sie die 7 Themenkomplexe digitaler Barrierefreiheit? Denn die EU forciert weiterhin die Gleichstellung im Web. Die Folge sind einklagbare Verpflichtungen für Unternehmen. Es braucht daher Entscheidungen, denn die EU-Richtlinie Europäischer Rechtsakt zur Barrierefreiheit (EAA) soll ab Juni 2025 gesetzlich anwendbar sein. Erfahren Sie das Wichtigste, um diese komplexe Aufgabe umzusetzen.

Digitale Barrierefreiheit: Eine vielschichtige Herausforderung

Sie suchen bereits nach Lösungen, wie Sie Ihre Website barrierefrei optimieren können? Sie fragen sich, was wirklich wichtig ist? Je nach Branche gibt es hierzu unterschiedliche Antworten. 

Klar ist: 7 Bereiche sind anzugehen, um Ihre Website barrierefrei zu gestalten und für Nutzer besser zu machen.
Die Auswahl bezieht sich direkt auf die Vorgaben der relevanten Richtlinien:

  • Die W3C Web Accessibility Initiative (WAI) entwickelt technische Spezifikationen, Richtlinien, Techniken und unterstützende Ressourcen, die Zugänglichkeits-Lösungen beschreiben.
    Diese gelten als internationale Normen für die Barrierefreiheit im Web. So ist WCAG 2.0 beispielsweise auch eine festgelegte ISO-Norm: ISO/IEC 40500.
  • Der WCAG-Standard bewertet Barrierefreiheit in drei Stufen – mit diversen Kriterien, die in unterschiedlichem Grad messbar sind. Dabei gilt die mittlere Stufe – AA – als angemessenes, ambitioniertes Ziel. 

Diese Spezifikationen führen zu den folgenden Themenkomplexen.

7 Kriterien für barrierefreie Websites

  1. Alternativen für Grafiken und Multimedia

    Nicht alle Webseiten werden am Bildschirm dargestellt. Alternativen – wie z.B. ein Screenreader, brauchen für alle grafischen Inhalte eine geeignete Text-Alternative, die parallel angeboten wird. Nur so sind sie auf dem Reader verständlich.

    Bei audiovisuellen Medien sind alternative Inhalte noch komplexer. Insbesondere müssen Untertitel und Audiodeskription berücksichtigt werden. Hier geht es zum Beispiel um Nutzer, die den Inhalt nicht hören können. Oder auch um blinde Nutzer, die Inhalte von Screencasts nicht nutzen, weil Textalternativen oder eine synchronisierte Audio-Deskription fehlt.

  2. Kontraste und Farben

    Gerade ein beeinträchtigtes Sehvermögen oder ein besonders helles oder dunkles Umfeld kann das Web-Erlebnis am Bildschirm beeinträchtigen. Flexible Farbspektren und scharfe Kontraste sind hier maßgebend. 

    Deshalb wird empfohlen, auf beliebigen Browsern die Möglichkeit anzubieten, ein beliebiges Farbschema wählen zu können. Das Gleiche gilt bei den Auswahlmöglichkeiten der Kontraststärke.

  3. Vergrößerbarkeit

    Der nächste Komplex betrifft die Schriftgröße. Eine starke Vergrößerung der Schrift kann für Sehbeeinträchtigte entscheidend für den Website-Besuch sein. Menschen mit starker Beeinträchtigung nutzen dafür oft ein eigenes Vergrößerungssystem. Eher leichte Vergrößerungen werden aber ebenso genutzt. Hier wird zur Aufgabe des Webdesigns, vergrößerbare Texte mit flexiblem Layout bereit zu stellen. 

    Die Erklärung dafür: Browserbasierte Zoom-Funktionen reichen nicht immer aus. Nutzer sollten die Schriftgröße aller Texte verändern könne, ohne danach scrollen oder den Browser anpassen zu müssen.

  4. Linearisierbarkeit

    Auf dem regulären Desktop sind wichtige Seitenelemente meist grafisch aufbereitet. Sie haben zum Beispiel Sonderfarben oder eine bestimmte Position. Alle Elemente (wie Navigation, Kopfzeilen, Inhalte) sind parallel verfügbar.

    Werden aber die Inhalte auf eine lineare Software heruntergebrochen - wie für eine Sprachausgabe - dann müssen diese Inhalte aufeinander folgend besprochen oder dargestellt werden. Sie werden zur Liste.

    Die Reihenfolge aller Seitenelemente muss daher abgestimmt werden und sollte in sich schlüssig zu sein. Dabei ist ein struktureller Aufbau wichtig. Es kommt darauf an, dass Webseiten auch bei ausgeschaltetem Layout funktionieren. Und sie sollten Hilfsmittel und Erweiterungen für Browser, Reader und Hilfssysteme nutzen, um eine strukturelle Navigation auch ohne Layout zu ermöglichen.

  5. Fokus Management und dynamische Komponenten

    Ein weiterer, wichtiger Aspekt im barrierefreien Webdesign ist die Geräteunabhängigkeit. Auch dabei spielt die Bedienbarkeit des Webangebotes, mit Tastatur oder Schaltersteuerungen, eine wichtige Rolle. 

    Als heikel für den barrierefreien Zugang haben sich dynamische Komponenten und andere clientseitige Anwendungen erwiesen. Gerade die Barrierefreiheit von Widgets kann im Webdesign zur Herausforderung werden. 

    Unter diesem Aspekt sollte der Seiteninhalt im Web per Tastatur ebenso bedienbar sein, wie per Maus. Und Elemente, die nicht nativ über HTML abgebildet werden, brauchen eine Ergänzung durch Accessible Rich Internet Applications - kurz ARIA

  6. Verständlichkeit, Navigation und Orientierung

    Hier gibt es viele Leitfragen, die für die besondere Bedeutsamkeit dieser drei Aspekte für die Barrierefreiheit sprechen. Der Ansatz ist ein Höchstmaß an Hilfestellung, um alle Hürden von Inhalten abzubauen. 
    Die formulierten Anforderungen dabei lauten:

    • allgemeine Verständlichkeit der Inhalte
    • Anweisungen zur Fehlervermeidung und eine Fehlerbehandlung bei Formularen
    • Suchfunktionen und eine Übersicht, um unterschiedliche Fähigkeiten der Nutzer zu berücksichtigen
    • Korrekte Angaben zur Sprache des Inhalts, damit Sprachausgaben sie korrekt vorlesen können.

    Außerdem sollten Sie überlegen, ob Inhalte in leichter Sprache sowie in Gebärdensprache bereitgestellt werden. Nur dann wird der Kern von Barrierefreiheit vollständig erfüllt.

  7. Strukturierte Inhalte

    HTML-Strukturelemente bilden den Kern des barrierefreien Webdesigns. Es ist die gemeinsame Sprache, die hinter jeder funktionierenden Webseite steckt.

    Deshalb muss die Semantik in HTML zwingend für alle Inhaltselemente (Überschriften, Absätze, Listen, etc.) beachtet werden. Und alle Formularelemente brauchen eine beschreibende Beschriftung.

    Die Basis für die Standardkonformität jedes Webangebotes ist die Trennung seiner verschiedenen Ebenen. Das bedeutet, die Trennung von Inhalten (HTML), Präsentation (CSS) und Verhalten (JavaScript).  Grundlage dafür ist wiederum die sinnvolle Strukturierung der Inhalte.

Eine barrierefreie Website sollte so nachhaltig wie möglich sein

Neben den sieben Kriterien für barrierefreie Websites empfehlen wir als Digitalagentur, auch die Nachhaltigkeit in den Blick zu nehmen und Ihre Website so nachhaltig wie möglich zu gestalten. 

Denn als Betreiber von Webseiten sowie als Webdesigner und -entwickler haben wir die Verantwortung, digitale Erlebnisse zu bieten, die gleichzeitig den ökologischen Fußabdruck so wenig wie möglich strapazieren. Es gibt viele Maßnahmen, die sich gut umsetzen lassen. Nutzen Sie unsere Tipps für nachhaltiges Webdesign und lesen Sie weiter in diesem Blogartikel:

Checkliste nachhaltiges Webdesign – So verbessern Sie Ihren Footprint

Fazit 

Die eigene Website barrierefrei zu gestalten ist zeitgemäß - und aus Sicht der EU-Verordnungen unvermeidbar. Doch nur durch einen vollständigen Abbau von Barrieren sprechen Sie alle Nutzer in allen Situationen an! 

Die Aufgabe der digitalen Barrierefreiheit ist dabei komplex. Wichtig ist, zunächst die Kernbereiche - wie in diesem Artikel - zu identifizieren und kontinuierlich daran zu arbeiten. Selbst die vorliegende Liste der Kernthemen garantiert jedoch noch nicht die vollständige Barrierefreiheit für jede Website.

Hilfreich kann ein Wechsel der Methodik sein, für eine barrierefreie Gestaltung und Aktualisierung von Webauftritten.
Das sogenannte Growth Driven Design ist eine agile Methode zur Webgestaltung. Damit optimieren Sie Ihre Website in monatlichen Sprints und verbessern so kontinuierlich Qualität sowie Barrierefreiheit. 

Haben Sie Fragen? - Wir helfen gerne.

 

Hier erhalten Sie weitere Einblicke in die digitale Barrierefreiheit

Deshalb brauchen Unternehmen barrierefreie Websites

Anregungen der Aktion Mensch zu barrierefreien Webseiten 

Erfahren Sie mehr über die Growth Driven Design Methode:

Website Redesign: Wie funktioniert Growth Driven Design?

Keine Kopfschmerzen mehr bei Ihrem Website Redesign!

Growth Driven Design vs. Traditionelles Webdesign – die Unterschiede

 

Foto:  © ESP/Shutterstock