Loading...
Accessibility
Work in Progress

Accessibility

Eine Barrierefreie Webseite ermöglicht es möglichst allen User*innen mit oder ohne Behinderungen, die Webseite zu verstehen und zu bedienen. Wir schauen uns die gestalterischen Aspekte an.

Access for All

Inklusion aller Menschen

Webseiten sollten für möglichst viele Menschen zugänglich sein. Damit dies gelingt, können Designer ihren Beitrag leisten.

Menschen mit einer Beeinträchtigung nutzen entsprechend ihrer Einschränkung das Internet anders.

Farbenblinde können Komplementärfarben nicht sehen. Blinde Menschen navigieren sich mit z. B. Voice-over. Hörbeeinträchtigte Menschen nutzen FaceTime statt das Telefon und Menschen, die sehr Lichtempfindlich sind, schauen sich Webseiten mit invertierten Farben an.

Wichtige Aspekte sind bereits in den Betriebssystemen und Browsern eingebaut.

Die vier Prinzipien

WCAG 2.0 Prinzipien

Wenn eine Webseite barrierefrei gemacht werden soll, hält man sich am besten an die Richtlinien für barrierefreie Webinhalte (WCAG) des W3C.

Beim Entwickeln einer Webseite sollten diese vier Prinzipien im Hinterkopf sein, um eine barrierefreiere Webseite zu gestalten.

Prinzip 1: Wahrnehmbar

Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.

Prinzip 2: Bedienbar

Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.

Prinzip 3: Verständlich

Informationen und die Bedienung der Benutzerschnittstelle müssen verständlich sein.

Prinzip 4: Robust

Inhalte müssen robust genug sein, damit sie zuverlässig von einer grossen Auswahl an Benutzeragenten einschliesslich assistierender Techniken interpretiert werden können.

Kreisdiagramm mit vier sich schneidenden Kreisen. Es werden die vier Prinzipien (Wahrnehmbar, Bedienbar, Verständlich und Robust) erklärt.
© Webdesign Essentials
Kreisdiagramm mit vier sich schneidenden Kreisen. Es werden die vier Prinzipien (Wahrnehmbar, Bedienbar, Verständlich und Robust) erklärt.
2

Saubere Struktur

Get it Right

Die Basis von Accessibility-Standards sind eine saubere Struktur, die sich auf Web-Konventionen wie Strukturen bezieht.

Typografie Struktur

Die Typografie sollte sich nach den HTML-Tags H1-H6 und P richten, um eine klare hierarchische Struktur sowohl visuell wie auch im Code zu applizieren.

Sprache

Verwende auf Webseiten, die für eine grössere Zielgruppe ist, Texte die einfacher verständlich sind.

Usability Guidelines

Usability Prinzipien unterstützen durch ihre Vereinfachung und ihren Fokus den Accessibility-Prozess im Design.

Doppelte Veränderung

Interaktionen verdeutlichen

Um Interaktionen zu verdeutlichen, gilt die Regeln, dass sich zwei Elemente ändern sollten.

So können User*innen mit einer Sehschwäche die Veränderungen stärker wahrnehmen, respektive, falls eine der gewählten Veränderungen für die User*in nicht wahrgenommen werden kann, so hilft die andere.

Beispiel

Ein Button ändert sich bei Hover in der Hintergrundfarbe und in der Textfarbe.

Drei Versionen wie Buttons im Hover-Zustand geändert werden sollen. Zuerst ein negatives Beispiel, dann zwei gute Beispiele.
© Webdesign Essentials
Drei Versionen wie Buttons im Hover-Zustand geändert werden sollen. Zuerst ein negatives Beispiel, dann zwei gute Beispiele.
4

Kontrast

Farben

Farbkontrast ist ein zentrales Thema von Accessibility für Designer*innen.

Der Farbkontrast lässt sich berechnen. Ist er zu tief, können Menschen mit einer Sehschwäche den Unterschied nicht oder nur sehr begrenzt wahrnehmen.

Farbkontraste gibt es von Hell zu Dunkel und von Komplementärfarben (z.B. Rot-Grün Farbenblindheit)

Es gilt daher auf gute Kontrastverhältnisse zu achten.

Rot-Grün

Eine Ampel ist Rot-Grün aber durch die spezifische Platzierung der Farben, ist eine Ampel auch für Rot-Grün Farbenblinde verständlich.

Alternative Bildtext

Alt-TAG

Jedes Bild sollte mit Alternativen Texten versehen werden, damit sie von Screenreadern vorgelesen werden können.

Der HTML-Alt-Tag wird dazu verwendet.

Die Beschreibung sollte sich nur auf die Bildinformation fokussieren. Ein Screenreader weiss, dass es sich um ein Bild handelt.

Die Beschreibung sollte kurz und treffend sein. So zwischen 70 und 140 Zeichen oder so 16 Wörter. Aber der Alt-Tag hat keine Beschränkung und kann dem Inhalt des Bildes gerecht werden.

Die Beschreibung sollte als ganzer Satz geschrieben sein. Keine Keyword-Liste.

Der Text sollte, wenn möglich alle Texte-Elemente eines Bildes beinhalten oder zumindest umschreiben.

Bilder mit grosser Aussagekraft zuerst Formal und danach in seiner Bedeutung erklären.

Ein guter Artikel über den Alt-Tag

© VM Measures
5

SEO-Benefits

Alt-Text werten eine Webseite auf. Google belohnt diese Arbeit mit besserem Ranking.

Alt-Text beschreiben ein Bild. Daher werden die Bilder besonders in der Google-Bildsuche positiv bewertet.

Background Images

ARGH

Background Images haben keinen Alt-Text und darum sollten sie, auch wenn immer möglich nicht mit relevanter Bildinformation gefüllt sein.

Dies ist nicht einfach, da viele Interessante Layout-Optionen vor allem durch Background-Images erstellt werden. Der Hero Beispielsweise.

Background Images sind als solche zu werten. Die Bildinformation sollte Schmuck sein. Nichts mehr.

© Annie Elainey
6

Zeitbasierte Medien

Videos und Audio

Videos und Audio sollten mit Audiodeskription und Captions versehen werden. Damit blinde und gehörlose Menschen Zugang zum Inhalt erhalten.

Zwei-Sinnes Prinzip

Hinter dem Zwei-Sinnes-Prinzip steht einfache Statistik. Die Wahrscheinlichkeit, dass eine Person zwei Sinne nicht vollständig nutzen kann, ist um ein Vielfaches kleiner, als dass nur ein Sinn betroffen ist.

Closed Caption (CC)

Sind erweiterte Untertitel für Filmaufnahmen. Nebst dem gesprochenen Inhalt werden auch die relevanten Geräusche und Effekte beschrieben.

Audiodeskription

Erklärt die Bildwelt und das visuelle Geschehen eines Filmes.

Gebärdensprache aufgezeichnet

Neben dem Film wird der Inhalt in Gebärdensprache übersetzt aufgezeichnet und ebenfalls in den Film integriert.

Ein Beispiel

Zertifizierung

Web Content Accessibility Guidelines (WCAG) 2.0

Die Accessibility Guidelines gibt es in drei Stufen. Single-A, Double-A (AA) und Triple-A (AAA).

Wobei der A Standard der Tiefste ist und Triple A (AAA) der Höchste.

Der Double-A ist per Gesetz Pflicht für alle Webseiten von staatlichen oder öffentlichen Institutionen.

Access-for-all.ch ist die Schweizer Zertifizierungsstelle für barrierefreie Webseiten. Die Grundlagen der Zertifizierung kommen von den WCAG 2.0 der W3C (World Wide Web Consortium)

Die Standards kann man auch ohne Zertifizierung einhalten, aber nur eine Zertifizierung erlaubt einem aktiv dies so zu benennen.

Viele Gestaltungsentscheide, lassen sich hinsichtlich der Accessibility extrem gut Argumentieren.

Die Inklusion aller Menschen gehört zum Internet. Als Designer*in ist man genauso dafür Verantwortlich seinen Beitrag zu diesem gemeinsamen Ziel zu leisten.

Design Fundamentals

Eine Reise durch eine sich stetig veränderbare Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.

Scroll Snap
On
Off