Wie erstelle ich eine barrierefreie Webseite?

  • User Experience
  • Webdesign
Lesedauer: ca. 5 min

Was genau ist die WCAG 2.1? Was beinhaltet sie? Wie lässt sich mit ihrer Hilfe eine barrierefreie Webseite erstellen? Darauf und noch viel mehr im Zusammenhang mit Barrierefreiheit wird in diesem Artikel eingegangen.

Inhalt

    Triff die WCAG 2.1

    Die Richtlinien für barrierefreie Inhalte (engl. Web Content Accessibility Guidelines, kurz WCAG) ist ein online Standard. Dieser beschreibt, wie Webseiten barrierefrei gestaltet werden können. Unter w3.org/tr/wcag21/ stehen alle notwendigen Informationen.

    Es handelt sich hierbei um ein sehr komplexes Thema. Die WCAG 2.1 ist ein wirklich technisches Dokument. Es ist ein Standard. Daher liest man diesen nicht so einfach wie ein gutes Buch an einem Stück durch.

    Es ist viel mehr ein Referenz Dokument. Die WCAG enthält klar definierte Regeln darüber, wie man Interfaces barrierefrei gestalten kann. Im Folgenden werden die Inhalte der WCAG durchgegangen. Daraufhin wird gezeigt wie sich diese in die Tat umsetzen lassen.

    Was beinhaltet die WCAG?

    Die WCAG 2.1 ist ein klar strukturiertes Dokument. Sie besteht dabei aus mehreren Ebenen:

    Ebenen der WCAG 2.1

    Die WCAG 2.1 besteht aus 4 Grundprinzipien. Sie beinhalten wiederum eine oder mehrere Richtlinien. Diese Richtlinien hingegen enthalten ein oder mehr Erfolgskriterium.

    Prinzipien

    Die vier Prinzipien der WCAG 2.1 stellen die Grundlagen der barrierefreiheit im Internet dar. Es handelt sich hierbei um die Wahrnehmbarkeit, die Bedienbarkeit, die Verständlichkeit und die Robustheit.

    Die Richtlinien sind gut für die Entwickler. Man muss jedoch auch die Prinzipien dahinter verstehen. Auch die WCAG ist nicht perfekt. Daher kann es auch vorkommen, dass eine Entwicklung barrierefreier wäre, wenn einzelne Richtlinien nicht eingehalten werden. Die Prinzipien helfen nicht nur dabei barrierefreie Interfaces zu erstellen. Sie machen sie auch wirklich nutzbar.

    Diese vier Prinzipien sorgen dafür, dass man nicht vergisst, dass man für Menschen entwickelt.

    Richtlinien

    Eine Webseite barrierefrei zu gestalten wirkt auf den ersten Blick einschüchternd. Nur darauf abzuzielen die Webseite wahrnehmbar, bedienbar, verständlich und robust zu entwickeln reicht nicht aus. Aus diesem Grund gibt es nahezu unendlich viele Kombinationen von Fähigkeiten, die Benutzer haben oder nicht haben. Das ist mehr als nur sehr aufwändig. Es ist de facto unmöglich.

    Die WCAG enthält jedoch nur eine überschaubare Anzahl an Richtlinien. Darüber hinaus sind einige oft nicht relevant. Beispielsweise die Richtlinie 2.1 zu zeitbasierten Inhalten.

    Einige Richtlinien ergeben auch ohne Zusammenhang Sinn. So die Richtlinie 2.1. Diese besagt, dass alle Funktionen nur durch eine Tastatur genutzt werden können. Bei einigen ist das nicht sofort ersichtlich.

    Jedoch haben sie auch gute Daseinsberechtigungen. Doch so oder so enthält jede Richtlinie Erfolgskriterien. Diese beschreiben klar, was sie bedeuten.

    Erfolgskriterien

    Erfolgskriterien sind greifbar. Richtlinien hingegen beschreiben nur, was zu tun ist. Die Erfolgskriterien beschreiben jedoch genau, was das aus technischer Sicht bedeutet.

    Beispielsweise besagt Richtlinie 1.4:

    Machen Sie es für den Benutzer leichter, Inhalte zu sehen und zu hören, einschließlich der Trennung zwischen Vordergrund und Hintergrund.

    Das ist gut zu wissen, aber was genau bedeutet das? Wie macht man das für seine Benutzer leichter? Die Erfolgskriterien gehen hier unter anderem ein auf:

    • Regeln zum zeigen von Informationen durch Farbe
    • Minimum Kontrast Anforderungen für Texte
    • Regeln über die Lautstärke Kontrolle für Audio
    • Regeln über die Skalierbarkeit von Text
    • und weitere relevante Regeln

    Für wen Richtlinien zu schwammig sind, sind die Erfolgskriterien genau das Richtige. Denn diese sind testbar. Mit ihnen lässt sich genau sagen, an welchen Richtlinien noch gearbeitet werden muss.

    Konformitätsstufen

    Nicht alle Erfolgskriterien sind gleich. Jedes Erfolgskriterium gehört zu einer Konformitätsstufe. Diese heißen A, AA und AAA. Sie beschreiben das Verhältnis von Aufwand zum erreichten Wert. Als Erklärung:

    Level A Erfolgskriterien sind die Grundlagen. Sie sind für gewöhnlich einfach umzusetzen. Trotzdem sind sie das Fundament von Barrierefreiheit. Bei Nichteinhaltung werden Informationen für Personen, die auf Hilfstechnologien angewiesen sind verweigert. So gehört beispielsweise das Kriterium 2.1 über die Bedienbarkeit mit einer Tastatur zum Level A. Ansonsten können auf Tastaturen angewiesene Nutzer die Webseite sonst nicht bedienen.

    Level AA Kriterien sind ein guter Mittelweg. Diese erlauben Freiheiten im Design. Darüber hinaus liefern sie viel Wert für jeden. Hier wird unter anderem das minimale Kontrastverhältnis definiert. Daher folgen einige Einschränkungen im Design. Zudem wird trotzdem die Nutzer Erfahrung für alle verbessert. Das kann für Personen mit Sehschwäche genauso hilfreich sein wie für Personen die draußen in der Sonne schnell nach Informationen suchen.

    Level AAA Erfolgskriterien sind die höchste Stufe. Daher sind sie auch schwer einzuhalten. Sie liefern einen Mehrwert und existieren nicht ohne Grund. Jedoch sind sie schwerer zu implementieren. Level AAA wird für gewöhnlich nicht empfohlen. Häufig sind nicht alle Kriterien mit einigen Inhalten umsetzbar.

    Um eine Konformitätsstufe zu erreichen müssen alle dazugehörigen Erfolgskriterien erfüllt werden. Darüber hinaus natürlich auch die der Level darunter.

    Anwendung von WCAG 2.1

    Jetzt sind die Inhalte der WCAG bekannt. Darauf folgen die Anwendungen im echten Leben.

    Nutzen als Referenz während der Entstehung

    Es ist einfacher etwas von Anfang an richtig aufzubauen, als nachträglich alles zu richten.

    Beim Designen ist die WCAG zu berücksichtigen. Zudem erhält man auch automatisch ein viel besseres Produkt. Wenn Barrierefreiheit von Anfang an eingeplant ist, zeigt sich das. Das Konzept sollte bedenken, wie Designs in HTML Elemente umgewandelt können.

    Auch bei der Entwicklung muss die WCAG berücksichtigt werden. Dazu müssen alle wichtigen Elemente barrierefrei aufgebaut sein. Nachträglich ein Code-Grundgerüst zu verändern kostet nur Zeit und Mühe.

    Nutzen der WCAG um Audits durchzuführen

    Egal, wie gut man die Barrierefreiheit beim Entstehungsprozess berücksichtigt, einige Fehler passieren immer. Ein Audit zur Barrierefreiheit nach WCAG 2.1 sucht nach diesen potenziellen Fehlern. Somit verbessert sich die Webseite.

    Die WCAG kann hier als verständliche Checkliste dienen.

    Achtsame Nutzung von WCAG

    Es ist möglich allen Vorschlägen der WCAG zu folgen. Dennoch können Personen, die auf Hilfstechnologien angewiesen sind, eine schlechte Nutzererfahrung haben.

    Die WCAG ist als ein Standard ein exzellentes Referenzwerk. Daher zeigt sie uns den richtigen Weg. Sie kann jedoch nicht kritisch für uns denken. Ohne nachzudenken den Erfolgskriterien zu folgen kann sich auch negativ für die Nutzer auswirken. Die Webseiten werden letztendlich für die Menschen auf der anderen Seite des Computers entwickelt.

    Illustration by Freepik Stories

    Lassen Sie uns über dieses Thema sprechen

    Jetzt kontaktieren
    Jetzt bei blauvoll anrufen E-Mail an blauvoll senden