Griebie Logo

Gedanken zu Barrierefreiheit auf Webseiten

In das Thema "Barrierefreiheit" / a11y - als Kurzform für accessibility kommt aktuell viel Bewegung. Der Grund ist auch, dass für Websites und Software nun Gesetze in Kraft treten, die hier Verbesserung vorschreiben. Eigentlich schade, dass es Gesetze dafür braucht, wo die Motivation eigentlich ganz anders begründet sein könnte. Simpel gedacht: Wenn ich mehr Menschen erreiche (durch weniger Barrieren) - kann meine Kundschaft im Grunde nur steigen. Und es sind viele Menschen, die auf die eine oder andere Art eine Einschränkung haben und es ist schnell passiert, dass es einen selber trifft, hoffentlich auch nur vorrübergehend.

Arten von Beeinträchtigungen im Netz

Ganz oben auf der Liste steht wohl die Beeinträchtigung der Sehfähigkeit. Auf Platz zwei kommen motorische Einschränkungen, schlussendlich gibt es aber auch Beeinträchtigungen durch Schwindel und ADHS. Eine alltägliche Situation kann allerdings auch von einer barrierefreien Website profitieren: Wenn wir unterwegs sind und bei schlechterem Licht auf dem Handy eine Idee im Web zeigen wollen und die Lesebrille nicht dabei haben... Jetzt können wir schnell unsere Schriftgröße im Browser vergrößern und können alle Inhalte besser lesen. Die anderen Aspekte werden im Idealfall per Media Query abgefragt.

Barrieren wegräumen

Semantisches HTML ist mit HTML5 vor vielen Jahren eingeführt worden. Wenn wir diese Elemente korrekt benutzen haben wir viele a11y-Aspekte quasi out of the box korrekt umgesetzt. Ein plakatives Beispiel: Ein Button ist ein <button> und nicht ein <a class="button"> , andere Beispiele sind vielleicht nicht so geläufig und es hilft immer, das Wissen hier aufzufrischen. Der DOM ist nicht nur die Quelle für den Browser, den wir mit CSS und JS "austricksen" können, indem wir die Darstellung der Reihenfolge oder was auch immer beeinflussen, er ist auch die Basis für Screen-Reader und Tabulator-Bediener, die korrekt und in der richtigen Reihenfolge bedient werden wollen. Ein chaotischer oder semantisch falscher DOM ist so ungenießbar wie ein verwirrter Redner, der sinnlos von Thema zu Thema springt. Das passiert auch, wenn die Hierarchie der Überschriften nicht richtig ist. Es darf nur eine H1 auf einer Seite geben und es darf kein Level übersprungen werden, sonst fängt die Website quasi an zu stottern.

Layout Basics

In den Browsereinstellungen kann die Schriftgröße eingestellt werden, hier im Beispiel der Chrome Browser

Zu den allerwichtigsten Aspekten im Web-Layout gehört die Verwendung relativer Schriftgrößen und eine darauf angewandte flexible Bemaßung aller weiteren Elemente: von Rahmen, Innen- und Außenabständen, Breiten & Höhen bis zu Linienstärken. Flexibel ist hierbei im Grunde alles was nicht "px" oder "pt" als Maßeinheit hat. Der Grund dafür ist simpel: Die Schriftgröße ist die Stellschraube, die der User in seinem Browser ändern kann, um alles in seiner idealen Größe darzustellen. Und mit veränderter Schriftgröße soll alles immer noch sichtbar und lesbar sein. Sind hier feste Größen für ein Element hinterlegt kann es zu Layoutbrüchen kommen.

Das gute aber ist, dass es viele Snippets gibt, die es leicht machen, z.B. den richtigen REM-Wert ausgeben zu lassen, wenn man nur die Standard-Pixel-Angabe kennt. In meiner Konfiguration gibt es eine _Functions.scss mit folgendem Inhalt:

@function calculateRem($size) {
  $remSize: $size / 16;
  @return #{$remSize}rem;
}

Bedienbarkeit mit Tastatur

Für eine gute Barrierefreiheit gehört aber auch die Bedienbarkeit ohne Maus. Das ist nicht nur für Blinde oder stark sehgeschädigte Menschen wichtig sondern für Keyboard-Poweruser oft die bevorzugte Art, Software oder Websites zu nutzen. Der Fokus muss also erkennbar sein, was in modernen Browsern nicht mehr schlimm aussehen muss, da die outline gut gestyled werden kann. 

Rein dekorative Elemente auf der Website interessieren blinde Menschen nicht und können leicht aus dem Fokus ausgeklammert werden: Das Attribut

tabindex = 0

sorgt dafür, dass das entsprechende Element in der Tab-Reihenfolge nicht berücksichtigt wird. Mehr Erklärungen hierzu gibt es u.a. auf der Mozilla Website.

Aria-Attribute bereichern die Website um Informationen, die keinen oder nur unzureichenden Text beinhalten. Der Link auf die Startseite ist meist nur eine Logo Bild-Datei. Entscheidend ist nun, dass der Link in diesem Konstrukt weitere Informationen erhält:

aria-label="Link zur Startseite"

Detaillierte Informationen zu weiteren Aria-Attributen und die korrekte Verwendung gibt das W3C.

Kontraststärke

Der Lightouse Report in den Chrome Developer Tools

Die schnellen gängigen Tools, die einen in der Verbesserung helfen können meckern bei mir am häufigsten im unzureichenden Farbkontrast. Hellgrauer Text auf Weiß ist aber nun nicht gut lesbar - nebenbei gesagt, auf Handys im Sonnenlicht für niemanden. Wobei letzteres im übrigen mit Media Queries (s.u.) sogar anpassbar ist sollte grundsätzlich ein ausreichender Kontrast oder ein anderes Farb-Zusammenspiel gewählt werden. Die Deque University bietet hierzu einen Kontrast-Checker an, der Feedback gibt, welches accessibilty-Level bereits erfüllt wird.

Schwindel und ADHS

Für Menschen mit leichtem Schwindel kann das Surfen zur Qual werden, wenn Elemente unabhängig voneinander in unterschiedlichen Geschwindigkeiten gescrollt werden ("parallax scrolling"). Sieht ziehmlich schick aus, wenn der Hintergrund langsamer als der Text darüber scrollt, kann aber schmerzhaft sein. Facundo Corradini berichtet darüber sehr eindrucksvoll aufA List Apart. 

Für Menschen mit ADHS ist es hingegen hilfreich, wenn Formulare in sinnvolle Abschnitte unterteilt sind und Zwischenüberschriften haben. Das gilt auch für zu lange Texte oder - zu lange Zeilen. Ich habe in diesem Blog zum Beispiel die Zeilenlänge auf maximal 60 Zeichen pro Zeile begrenzt und es kommt dann je nach Aulösung hier bis zu einem 5-spaltigen Layout. Es sind diese einfachen Möglichkeiten, die leicht umzusetzen sind und nebenbei sogar zu einem ansprechenderem Layout verhelfen. Mehr Inspiration dazu im Artikel zu Cognitive Disorders.

Screen Reader lesen den Link-Text vor, wenn der Fokus sie erreicht. Die Sprache für den Screen Reader legen nun wieder die Attribute im HTML-Dokument fest. Das Attribut

lang="de"

legt für den Screen-Reader die Ausgabe fest. Wenn dieser nun denkt, dass es sich um einen deutschen Text handelt kann es unverständlich sein, wenn es englisch oder französisch ist. Und das ist nicht notwendig, denn mit einem 

<span lang="en">This is English</span>

kann das auf die jeweilige Sprache angepasst werden.

Media Queries

Media Queries sind die die Angaben im HTML oder CSS, die wir nutzen können, um die Ausgabe für die beschriebene Situation anzupassen. Der Benutzer kann seine Browsereinstellungen anpassen und die gewünschte Unterstützung einstellen.

Wenn leider noch nicht davon ausgegangen werden kann, dass sie von allen Browsern unterstützt werden, ist trotzdem eine Anwendung ratsam. Entweder wird die Umsetzung noch eingeführt werden oder es ist davon auszugehen, dass diejenige Person, die Unterstützung nutzen möchte, sich eines Browsers bedient, die diese Media Queries unterstützt.

Reduced Motion

Mittels der Bedingung

prefers-reduced-motion: reduce

kann festgelegt werden, dass die folgenden Anweisungen nur für Browser ausgegeben werden, in denen die Einstellung für reduzierte Bewegung aktiviert ist. Im Umkehrschluss kann aber auch im Header der Website mit

<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

eine eigene CSS-Datei zur Verfügung gestellt werden, die alle CSS-Animationen bereit hält. Im Javascript ist eine andere Anweisung vorgesehen:

window.matchMedia( '(prefers-reduced-motion: reduce)' );

 

Prefers color-scheme (dark mode / light mode)

Ob ein Benutzer grundsätzlich den Dark mode bevorzugt, der energiesparender und augenschonender ist, ist eine Festlegung in den Anzeige-Systemeinstellungen. Diese Einstellung kann mittels

@media (prefers-color-scheme: dark){

   // CSS für den dark mode

}

abgefragt werden. In dem Zusammenhang kann in Erwägung gezogen werden, Farbvariablen im HSL(A)-Modus festzulegen, da dann für den Darkmode mit einer Erhöhung des H-Wertes um 180 der invertierte Wert schnell eingestellt ist.

Fazit

Es gibt viele Gründe, Barrierefreiheit soweit wie möglich umzusetzen - sei es nur, den eigenen Kundenstamm zu vergrößern. Vorstellbar ist aber auch, dass das automatisiert testbare Level in Zukunft in das Google-SEO-Ranking Einfluss nehmen wird. Und es gibt viele Möglichkeiten, das eigene Level der Barrierefreiheit zu testen: Lighthouse Reports, Axa ... Wer aber ganz sicher sein möchte sollte seine Website oder die Anwendung von Profis testen lassen. Hier bietet z.B. auch das a11y Projekt eine Übersicht, nebst vielfältiger weiterer Antworten um weitere wichtige Fragen zu diesem Thema.

Veröffentlicht: 08.02.21

Kommentar schreiben

* Pflichtfelder

Kommentare

31.03.2022 | Thorsten Griebenow

Heute gefunden: Ein guter Guide, um Barrierefreiheit im Web zu testen: https://web.dev/how-to-review/