Weblösungen am Puls der Zeit, innovativ und massgeschneidert.

#Blog

Beratung Frontend Intersim AG UX-Design

vor 8 Monaten

Annika Neijt

Barrierefreiheit beschäftigt sich mit einem hindernisfreien Zugang zu Webangeboten. Wie dies erreicht werden kann, erfahren Sie in diesem Artikel.

Barrierefreiheit im Web: Ein Weg zu mehr Inklusion

Das Internet ist heute nicht mehr aus unserem Alltag wegzudenken. Wir kaufen im Web ein, kommunizieren miteinander, holen Informationen ein oder erledigen Behördengänge online. Die Nutzung des Internets ist so essenziell für die meisten von uns, dass sie ohne Hindernisse möglich sein sollte.

Einen solchen hindernisfreien Zugang bezeichnen wir im Web mit Barrierefreiheit oder Accessibility.

Wir alle bewegen uns anders im Internet, haben unterschiedliche Zugangsmöglichkeiten und Bedürfnisse. Manche Menschen haben Einschränkungen beim Sehen oder sind blind, andere Menschen sind taub oder hören schlecht, manchmal sind Einschränkungen bei der Nutzung des Webs auch nur temporär, wie beispielsweise ein gebrochener Arm.

©Microsoft. Persona Spectrum

Um sicherzustellen, dass allen Menschen derselbe Zugang zum Web ermöglicht wird, hat unter anderem das W3C die so genannten «Web Content Accessibility Guidelines (WCAG 2.1)» erlassen, welche einen internationalen Standard zur Umsetzung von digitaler Barrierefreiheit bieten. In den WCAG werden 3 verschiedene Stufen der Barrierefreiheit unterschieden:

  • A (niedrigste Stufe)
  • AA (mittlere Stufe)
  • AAA (höchste Stufe)

Erst die höchste dieser Stufen bietet wirklich eine durchgängige Barrierefreiheit für die Nutzenden.

Herangehensweise

Damit ein Produkt am Ende barrierefrei ist, muss schon in der Konzeption ein Fokus auf die geltenden Richtlinien gelegt werden. Im UX Design werden viele Teile der Barrierefreiheit bereits über allgemeingültige Aspekte der Usability abgedeckt. Schliesslich ist Barrierefreiheit oder Usability nicht nur für Menschen mit einer Behinderung von Vorteil, sondern alle Nutzenden profitieren von einem hindernisfreien, einfachen und effizienten Zugang zu Webinhalten.

Konkret hat Barrierefreiheit im UX Design beispielsweise Einfluss auf die Informationsarchitektur, also Struktur, einer Webseite, auf die Benennung einzelner Komponenten sowie auf das schlussendliche Design einer Applikation. So gibt es konkrete Anforderungen an die Schriftgrösse, Farbkontrastverhältnisse oder die Grösse von einzelnen Komponenten und Schaltflächen. Um die einzelnen Aspekte der Barrierefreiheit immer vor Augen zu haben, sollten auch die zu Beginn erstellten Personas schon mögliche Behinderungen oder Einschränkungen widerspiegeln.

©Pablo Stanley. Informationen sollten nie ausschliesslich über einen Aspekt, wie hier die Farbe, vermittelt werden.

In der Frontend-Entwicklung muss Barrierefreiheit von Anfang an beim Programmieren beachtet werden. Der Code muss teilweise einem spezifischen Aufbau entsprechen, es sollten die vorgesehenen HTML-Tags verwendet werden und die Webseite sollte mit einem Screenreader sowie über die Tastatur bedienbar sein.

Sobald diese Grundlagen gelegt sind, muss auch bei der Bearbeitung und dem Abfüllen von Inhalt stets an die Barrierefreiheit gedacht werden. Bilder müssen beispielsweise mit einem so genannten Alt-Text versehen werden, welcher den Inhalt eines Bildes für sehbehinderte oder blinde Nutzende erklärt. Videos dürfen nur in einem gewissen Rahmen blitzende Sequenzen enthalten, um keine Krampfanfälle auszulösen oder müssen neben Untertiteln auch eine Audiodeskription sowie eine Übersetzung in Gebärdensprache enthalten.

Testing

Um eine durchgängige Barrierefreiheit zu erreichen, ist das Testing mit am wichtigsten. Das Feedback einer blinden Probandin zum Screenreader oder eines motorisch eingeschränkten Probanden zur Bedienung der Webseite mit der Tastatur ist hierbei natürlich am hilfreichsten.

Weiterhin gibt es spezielle Tools, um die Struktur und den HTML-Aufbau einer Webseite zu testen. Mozilla Firefox bietet in seinen Entwicklertools einen speziellen Bereich zur Überprüfung der Barrierefreiheit an.

Zertifizierung

In der Schweiz kann eine Applikation durch die «Stiftung für Alle» bezüglich ihrer Barrierefreiheit zertifiziert werden. Dabei kann eine der drei vorgängig erwähnten Barrierefreiheitsstufen erreicht werden. Webseiten bundesnaher Betriebe beispielweise müssen zwingend barrierefrei sein.

«Zugang für Alle» bietet ausserdem regelmässig Schulungen im Umgang mit Barrierefreiheit an. Auch wir waren an der letzten Schulung dabei und konnten dabei wertvolle Eindrücke gewinnen.

Inklusives Web Engineering

Barrierefreiheit ist mit Aufwand verbunden, sowohl im Design, der technischen Umsetzung als auch in der Entwicklung und dem Abfüllen von Content. Aber es lohnt sich.

Je mehr wir uns mit diesem Thema auseinandersetzen und unsere Produkte entsprechend gestalten, desto mehr Menschen können wir mit ihnen erreichen und so weiter zu einem offenen und inklusiven Internet beitragen. Denn Inklusion und soziale Verantwortung gehen uns alle etwas an.

Weiterführende Links

WCAG 2.1
https://www.w3.org/WAI/WCAG21/Understanding/

Microsoft Inclusive Design
https://www.microsoft.com/design/inclusive/

Accessibility Developer Guide
https://www.accessibility-developer-guide.com/