POUR me a glass of accessibility

Wenn Du beginnst, Dich mit digitaler Barrierefreiheit zu befassen, wirst Du schnell auf die Abkürzung "POUR" stoßen. Ausgeschrieben beschreiben die Buchstaben die vier Grundprinzipien der Web Accessibility:

P - Perceivable

O - Operable

U - Understandable

R - Robust

Das bedeutet:

Deine Website muss so gestaltet sein, dass Menschen sie wahrnehmen können (perceivable). Außerdem müssen User Deine Website bedienen (operable) und verstehen (understandable) können. Zu guter Letzt müssen verschiedene User-Agents inklusive assistive Technologien in der Lage sein, Deine Website zu interpretieren (robust).

So einfach wie es jetzt vielleicht klingt, ist es aber nicht. Daher möchte ich Dir heute und in meinen nächsten Artikeln die einzelnen Prinzipien der digitalen Barrierefreiheit genauer vorstellen. Los geht es mit "Perceivable".

Perceivable = Wahrnehmbar

"Information and user interface components must be presentable to users in ways they can perceive." (deutsch: ​​Die Informationen und die Komponenten der Benutzeroberfläche müssen für die Benutzer auf eine Weise dargestellt werden, die sie wahrnehmen können.) – § 1 WCAG

Der Relativsatz "die sie wahrnehmen können" ist hier besonders hervorzuheben. Vielleicht hast Du jetzt direkt das Bild eines blinden Menschen im Kopf, der mit Hilfe eines Screenreaders über Deine Website navigiert. Dass das funktioniert, ist wichtig, aber auch sehende Menschen profitieren von digitaler Barrierefreiheit.

So haben in Deutschland 8% der Männer und 0,4% der Frauen eine Farbsinnstörung. Die Rot-Grün-Blindheit ist nur eine Variante dessen. Sie führt aber zum Beispiel dazu, dass Betroffene die beiden Farben nicht deutlich erkennen können. Wenn Du auf Deiner Seite jetzt ein Kontaktformular hast, das ein falsch ausgefülltes Feld nur rot markiert, ist für Menschen mit Rot-Grün-Blindheit dieser Fehler schwer zu erkennen. Statt des Hinweises allein über die rote Farbe sollte es deswegen auch eine Fehlermeldung in Textform geben. Das gilt aber nicht nur für Felder in Kontaktformularen. Auch Verlinkungen können schwer erkennbar sein, wenn man sie nur durch ihre Farbe identifizieren kann.

Ein Beispiel – Noras Artikel über neue Karussells in den SERPs von letzter Woche:

Mit Protanopia, also kein Rot (hier simuliert über die Chrome Developer Tools), sieht Noras Text so aus:

Da die Links unterstrichen sind, kann man sie noch als solche erkennen, auch wenn sie sich farblich nicht mehr so gut vom Text abheben. Ohne die Unterstreichung wäre es aber schwer:

Hier muss man schon genauer hinsehen, um den Link erkennen zu können. Zudem sieht Noras Überschrift jetzt genauso aus wie der Link und könnte fälschlicherweise dafür gehalten werden.

Abgesehen von den Kriterien zur Farbe, ist für manche Menschen eine deutlich größere Schrift notwendig, um Inhalte richtig erkennen zu können. Deine Webseite muss daher auch mit einem Screen Magnifier oder bei 200%-Vergrößerung vernünftig wahrnehmbar sein – ohne dass sich dabei Elemente überlagern oder sich durch gleichzeitig vergrößerte Abstände der Text schlechter liest (Lesetipp dazu: Barrierefreie Schrifteinheiten – Mach deine Texte skalierbar auf gehirngerecht.digital).

Auch sollte nach der Vergrößerung kein gleichzeitiges horizontales und vertikales Scrollen notwendig sein, um zum Beispiel Text zu lesen. Denn, wenn Du sowohl horizontal als auch vertikal scrollen musst, verlierst sicher auch Du den Überblick in welcher Zeile Du weiterlesen musst.

4 "Perceivable" Richtlinien

Insgesamt gibt es für das Prinzip "Perceivable" vier Richtlinien:

• Textalternativen: Für Nicht-Textinhalte gibt es Text-Alternativen (Beispiel: Informative Bilder haben Alt-Texte).

• Zeitbasierte Medien: Für zeitbasierte Medien gibt es Alternativen (Beispiel: Für Videos gibt es Untertitel).

• Anpassbar: Inhalte können auf verschiedene Art dargestellt werden, ohne dass Informationen oder Strukturen verloren gehen (Beispiel: Headlines sind mit h1-h6 ausgezeichnet, sodass es nicht nur eine visuelle Unterscheidung der Headlines durch ihre Größe gibt, sondern auch Screenreader-Nutzende die Headline-Struktur erfassen können).

• Unterscheidbar: Inhalte sind einfach zu sehen und zu hören (Beispiel: Es gibt ausreichend Kontrast zwischen Text und Hintergrund). Nächstes Mal geht es dann um die Bedienbarkeit und das Prinzip "Operable". Falls Du Dich bis dahin genauer mit der Wahrnehmbarkeit beschäftigen möchtest, findest Du hier alle Erfolgskriterien des Prinzips "Perceivable" der WCAG 2.2.