Barrierefreiheit ist mehr als nur ein Trend: Warum Sie Ihre Webseite jetzt barrierefrei gestalten sollten | Teil 2

Das Web für alle Menschen zugänglich und nutzbar zu machen, ist das Ziel von Barrierefreiheit im Internet. Dabei geht es vor allem um Menschen mit Behinderung, die von barrierefreien Webangeboten profitieren. Aber auch die wachsende Zahl der älteren Nutzer hat Vorteile davon. Im ersten Teil unseres Blog Beitrags zum Thema Barrierefreiheit haben wir uns damit beschäftigt was Barrierefreiheit bedeutet und wer die Richtlinien erstellt hat. Auch haben wir diverse aufkommende Fragen zu diesem Thema behandelt. Was die Gestaltung einer barrierefreien Webseite angeht haben wir uns im ersten Schritt mit dem Kontrastverhältnis auseinandergesetzt. In diesem Blog Beitrag wollen wir nun auf die weiteren beiden wichtigen Aspekte bei der grafischen Gestaltung von barrierefreien Webseiten eingehen.

Kontrastverhältnis

Wie erwähnt sind wir im letzten Blog Artikel auf das Kontrastverhältnis eingegangen. Hier noch einmal kurz zusammengefasst worum es sich genau handelt.

Das Kontrastverhältnis ist ein wichtiger Faktor für die Barrierefreiheit von Webseiten. Es beschreibt, wie gut sich Text und Hintergrund oder andere Elemente farblich unterscheiden. Je höher das Kontrastverhältnis, desto besser ist die Lesbarkeit für alle Nutzer, vor allem für Menschen mit Sehproblemen. Die WCAG gibt Mindestwerte für das Kontrastverhältnis an, die je nach Textgröße und -stärke variieren.

Farbunabhängigkeit

Farbunabhängigkeit für barrierefreie Webseiten bedeutet, dass die Informationen und Funktionen einer Webseite nicht nur durch Farben vermittelt werden, sondern auch durch andere Mittel, wie zum Beispiel Text, Symbole, Formen oder Klänge. Farbunabhängigkeit ist wichtig, um Menschen mit Farbenfehlsichtigkeit oder Sehbehinderungen den Zugang zu einer Webseite zu ermöglichen.
Farbenfehlsichtigkeit ist ein Sammelbegriff für verschiedene Sehstörungen, die die Farbwahrnehmung beeinträchtigen.

Die häufigsten Arten von Farbenblindheit sind:

• Rot-Grün-Schwäche oder Rot-Grün-Blindheit: Dabei können die Betroffenen die Farben Rot und Grün nicht oder nur schwer unterscheiden. Dies liegt an einer Störung oder einem Ausfall der Zapfen im Auge, die für die Wahrnehmung von lang- oder mittelwelligen Lichtwellen zuständig sind. Diese Form der Farbenblindheit ist meist angeboren und vererbbar und betrifft vor allem Männer. (Quelle https://de.wikipedia.org/wiki/Farbenblindheit.)

• Blau-Gelb-Schwäche oder Blau-Gelb-Blindheit: Dabei können die Betroffenen die Farben Blau und Gelb nicht oder nur schwer unterscheiden. Dies liegt an einer Störung oder einem Ausfall der Zapfen im Auge, die für die Wahrnehmung von kurzwelligem Licht zuständig sind. Diese Form der Farbenblindheit ist seltener und kann sowohl angeboren als auch erworben sein. Sie betrifft Männer und Frauen gleich häufig.

• Achromatopsie oder völlige Farbenblindheit: Dabei können die Betroffenen überhaupt keine Farben wahrnehmen, sondern nur Grautöne. Dies liegt an einem vollständigen Ausfall aller Zapfen im Auge. Diese Form der Farbenblindheit ist sehr selten und kann sowohl angeboren als auch erworben sein. Sie geht oft mit anderen Sehproblemen wie Lichtempfindlichkeit oder Sehschwäche einher.

Verwenden Sie Plugins wie z.B.: den „WCAG Color contrast checker“ für Firefox um Farbenfehlsichtigkeit zu simulieren und um festzustellen ob die Datenvisualisierung auch ohne den Nutzen von Farbe interpretiert werden kann.

Verwenden Sie dennoch Farbe, da die Farbcodierung für Menschen ohne Sehbehinderung von Vorteil ist, achten Sie nur darauf, dass die Unterschiede nicht allein durch Farbe dargestellt werden. Verwenden Sie verschiedene Musterfüllungen (wenn der Bereich groß genug ist, um eine Musterfüllung zu erkennen) und stellen Sie sicher, dass die Musterfarbe und die Hintergrundfarbe ein Kontrastverhältnis von 3:1 haben.

Beispiel – Diagramme

Verwenden Sie verschiedene gestrichelte/gepunktete Linienstile (und/oder Linienbreiten) für Liniendiagramme. Unterschiedliche Linienstärken sind dann sinnvoll, wenn es nur eine begrenzte Anzahl von Linien gibt, so dass sich die Linienbreiten deutlich voneinander unterscheiden können.
Verwenden Sie unterschiedliche Formen für Datenpunkte (für Linien- oder Knotengrafiken).

Verwenden Sie eine relative Leuchtdichte, bei der jede Farbe ein Kontrastverhältnis von 3:1 zu allen anderen Farben des farbcodierten Teils der Datenvisualisierung hat. Ein monochromes Farbschema (alle Schattierungen einer Farbe) kann dies bei einer großen Anzahl von Teilen erleichtern.

Fügen Sie, wenn möglich, die Werte neben den Datenpunkten hinzu (z. B. neben jeder Linie, auf jedes Tortenstück zeigend, über jeden Balken schwebend). Diese können bei einfachen Datenvisualisierungen standardmäßig verfügbar sein oder bei datenintensiveren Visualisierungen durch Hovern oder Antippen ausgelöst werden.

Wenn möglich

Nutzen Sie die Interaktivität, um den spezifischen Wert und/oder die Beschriftung für jeden Datenpunkt leichter abrufen zu können. Nutzen Sie die Interaktivität auch, um eine Linie/einen Bereich/eine Region bei Hover/Tap isoliert darzustellen, damit einzelne Teile des Diagramms leichter zu sehen sind.

Interaktive Elemente

Interaktive Elemente für barrierefreie Webseiten sind solche, die eine Aktion auslösen oder eine Information vermitteln, wenn der Nutzer oder die Nutzerin mit ihnen interagiert.

Beispiele für interaktive Elemente sind

• Links
• Schaltflächen
• Formulare
• Menüs
• Tabellen
• Grafiken

Interaktive Elemente für barrierefreie Webseiten müssen so gestaltet sein, dass sie für alle Nutzer und Nutzerinnen wahrnehmbar, bedienbar, verständlich und robust sind.

Das bedeutet unter anderem, dass sie:

• über die Tastatur oder andere Eingabegeräte erreichbar sind
• einen klaren Fokus und eine sichtbare Hervorhebung haben
• einen aussagekräftigen und eindeutigen Text oder Alternativtext haben
• einen angemessenen Kontrast und eine gute Lesbarkeit haben
• eine logische Reihenfolge und Struktur haben
• eine Rückmeldung oder Bestätigung geben
• eine Fehlerbehandlung oder Hilfe anbieten

Interaktive Elemente für barrierefreie Webseiten sind wichtig, um allen Nutzern und Nutzerinnen eine gleichberechtigte Teilhabe und Selbstbestimmung im Web zu ermöglichen. Sie verbessern auch die Benutzerfreundlichkeit und die Suchmaschinenoptimierung der Webseite.

Interaktive Elemente müssen somit deutlich erkennbar und bedienbar sein.

Buttons für Webseiten und Apps

Buttons sind wichtige Elemente für die Bedienbarkeit und Interaktivität von Webseiten. Die Benutzer sollten in der Lage sein, stets zu erkennen, was benutzbar ist, indem sie einfach auf die Benutzeroberfläche schauen, ohne mit der Maus über den Bildschirm streichen zu müssen, um herauszufinden, was interaktiv ist.

Für die korrekte Umsetzung von Buttons erwiesen sich folgende Techniken als sehr hilfreich:

Die Formtechnik:
Die Form kann uns sagen, ob etwas ein Button ist oder nicht. Rechtecke sind die sicherste Wahl, aber andere Formen können ebenfalls funktionieren – insbesondere in Verbindung mit starken Indizien für die Klickbarkeit. Egal für welche Form Sie sich entscheiden, seien Sie durchgehend konsistent bei der Gestaltung Ihres digitalen Produkts.

Der Grenzradius Technik:
Der Randradius einer Schaltfläche kann seine „Persönlichkeit“ verändern. Buttons ohne Randradius, die seröser wirken, bis hin zu vollständig abgerundeten Ecken, die verspielter sind – wählen Sie eine „Persönlichkeit“, die zur Ausstrahlung der Marke/des digitalen Produkts passt.

Die Füll- (und Farb-)Technik:
Die Schaltflächenhierarchie lässt sich am besten vermitteln (ohne sich auf die Farbe zu verlassen), in dem man stattdessen Dinge wie Füllungen, Striche und Größe verwendet.
Als Beispiel: Schaltflächen mit durchgehender Füllung für primäre Aktionen, Linienschaltflächen für sekundäre Aktionen usw. randlose Knöpfe für tertiäre Maßnahmen.

Die Schatten- (und Erhebungs-)Technik:
Verwenden Sie eine Schaltflächenfarbe mit etwas höherem Kontrast, dazu fügen Sie einen Hintergrund hinzu, um ihn optisch zu erhöhen, oder verwenden Sie einen hellen Schatten (klein oder lang, im Standardzustand oder als interaktiven Zustand), um die scheinbare Höhe der Schaltfläche, das Erscheinungsbild der Anklickbarkeit und die visuelle Bedeutung zu erhöhen.

Die Wettkampftechnik:
Es ist schwierig, anklickbare Elemente optisch zu erkennen, wenn ähnlich aussehende Elemente mit ihnen konkurrieren. Gestalten Sie alles neu oder entfernen Sie alles, was optisch mit CTAs (Calls To Action) konkurriert, und streben Sie an, nur eine primäre Schaltfläche pro Seite (oder eigenem Bereich) zu haben.

Die Proximity-Technik:
Wenn UI-Elemente zu nahe beieinander liegen, können sie sich gegenseitig behindern, keines wird hervorstechen und es wird schwierig, mit interaktiven Elementen zu interagieren. Verwenden Sie viel Leerraum (vielleicht mehr, als Sie normalerweise möchten), gruppieren Sie verwandte Elemente und machen Sie Touch-Ziele groß genug, damit sie leicht ausgewählt werden können.

Die Technik der Großschreibung von Etiketten:
Die Art der Großschreibung von Schaltflächenbeschriftungen kann unterschiedliche Töne vermitteln. Die Groß-/Kleinschreibung ist die sicherste Wahl, weil sie freundlich, gesprächig und am einfachsten zu lesen ist, aber wenn Sie Zweifel haben, lassen sie die Webseite von Testusern durchklicken.
Reservieren Sie Schaltflächenbezeichnungen nur für Schaltflächen.
Streben Sie nach Konsistenz, aber achten Sie dabei stets auf die Websiteuser und nicht auf das Produkt oder auf Webseiten von Mitbewerbern. Wenn Sie auf Konsistenz verzichten müssen, um die Klarheit oder Benutzerfreundlichkeit zu verbessern, dann tun Sie dies.

Webseitenlinks

Links für barrierefreie Webseiten sind Elemente, die zu anderen Seiten oder Inhalten führen, wenn man sie anklickt oder antippt. Links für barrierefreie Webseiten müssen so gestaltet sein, dass sie für alle Nutzer und Nutzerinnen wahrnehmbar, bedienbar, verständlich und robust sind.

Das bedeutet unter anderem, dass sie:

• unterstrichen sind, um sich vom normalen Text abzuheben
• einen klaren und aussagekräftigen Text haben, der das Ziel des Links beschreibt
• eine sichtbare Hervorhebung haben, wenn sie den Fokus erhalten
• über die Tastatur oder andere Eingabegeräte erreichbar sind
• eine Rückmeldung oder Bestätigung geben, wenn sie aktiviert, werden

Links für barrierefreie Webseiten sind wichtig, um allen Nutzern und Nutzerinnen eine einfache Navigation und Orientierung auf der Webseite zu ermöglichen. Sie verbessern auch die Benutzerfreundlichkeit und die Suchmaschinenoptimierung der Webseite.

Linktexte sollten:

• Mit dem wichtigsten Wort beginnen
• Identifizieren Sie den Zweck des Links
• Seien Sie transparent über den Transport oder Auslöser
• Eindeutig gegenüber anderen Links auf der Schnittstelle sein
• Vermeide allgemeine Bezeichnungen wie z.B.: …mehr lesen, hier klicken,…

Machen Sie stattdessen die Headline klickbar und schreiben Sie diese fett und farbig bzw. unterstrichen

Google Linkstyles

Google Linkstyles sind eine Möglichkeit, die Aussehen von Links in Google-Dokumenten anzupassen. Doch nicht nur in Google-Dokumenten lassen sich dieses Stylings anwenden. Auch für Links auf Webseiten kann man folgendes anwenden, um Links klarer und ansprechender zu gestalten:

• Fett geschriebener Text für Links
• Erhöhung der Laufweite von Wörtern
• Blaue Link Farbe
• „on Hover“ Status unterstrichen

Die optimale Farbe für Links ist an sich Blau, weil wir User bereits seit Beginn der Nutzung des Internets daran gewohnt sind, diese Farbe mit einem Link zu assoziieren. Jedoch besteht auch die Möglichkeit zur Verwendung von Corporate Design Farben für Links, wenn dies konsistent getan wird und besser zum Erscheinungsbild der Webseite passt.

Stati bei interaktiven Elementen:

Stati bei interaktiven Elementen sind Zustände, die anzeigen, wie ein interaktives Element auf die Aktionen des Nutzers oder der Nutzerin reagiert.
Die grundlegenden Stati/Grundzustände, für die es zu entwerfen gilt, sind:

• Standard / Aktiviert
• Fokus
• Schwebend
• Gedrückt/Aktiv
• Besucht → für Links (oder randlose Schaltflächen)
• Deaktiviert
• Ausgewählt/umgeschaltet (auch bekannt als: aktiviert, erweitert)
• Verarbeitung (auch bekannt als: Laden, Arbeiten)
• Abbrechen (auch bekannt als: abbrechen, beenden)
• Fehler → für Formularelemente (Vergessen Sie nicht, den Fehlerstatus für Formulare und Formularelemente zu entwerfen. Dies sind ebenfalls interaktive Elemente.

Wie sieht beispielsweise ein Eingabefeld aus, wenn es einen Fehler aufweist, sowohl das Feld selbst als auch die Fehlermeldung daneben. Oder eine Reihe von Optionsfeldern, die einen Fehler aufweisen, oder Kontrollkästchen.)

Fazit:

In Teil 1 und diesem Blogbeitrag haben wir uns mit einigen Gestaltungsgrundlagen und Tipps zur Barrierefreiheit für Webseiten beschäftigt. Wir haben gelernt, was die Gestaltungsstandards und Richtlinien für barrierefreie Webinhalte sind, wie wir unsere Webseiten auf Barrierefreiheit testen und verbessern können, und welche Vorteile eine barrierefreie Webseite für uns und unsere Nutzer hat. Barrierefreiheit ist ein wichtiges Thema für alle, die das Web nutzen oder gestalten, denn es ermöglicht allen Menschen einen gleichberechtigten Zugang und eine selbstbestimmte Teilhabe im Web. Doch Barrierefreiheit ist auch ein vielfältiges und komplexes Thema, das noch viel mehr Informationen und Aspekte umfasst.

Wenn Sie mehr über Barrierefreiheit für Webseiten erfahren möchten, können Sie sich diese Ressourcen ansehen:

• Barrierefreiheit im Web – Wikipedia – https://de.wikipedia.org/wiki/Barrierefreies_Internet
• Web Accessibility Initiative (WAI) – W3C – https://www.w3.org/WAI/design-develop/
• Barrierefreiheit im Internet – Aktion Mensch – https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website

Wir hoffen Ihnen mit diesem Blogbeitrag zumindest einen Einblick und das doch etwas komplexe Thema der WCAG konformen Webseiten gegeben zu haben.
Es lohnt sich jedenfalls, sich intensiver mit diesem Thema auseinanderzusetzen, da es in den nächsten Jahren sicher noch mehr an Relevanz gewinnen wird.

Sie benötigen professionelle WEB-Services für Ihr Unternehmen?
Unser Team aus erfahrenen WEB Spezialisten begleitet Sie von der Beratung bis zur Durchführung von professionellen WEB Dienstleistungen.

Keine passende Dienstleistung in unserem Portfolio gefunden? Rufen Sie uns unter +43 1 581 01 30 an oder hinterlassen Sie uns unverbindlich eine Nachricht, um eine auf Ihre Bedürfnisse zugeschnittene Lösung zu erhalten.