Eine Person sitzt an einem Schreibtisch und bedient ein Braille Display. Das Gerät hat neben der Ausgabe von Braillezeichen weitere große weiße Tasten. Hinter dem Braille Display liegt eine schwarze Tastatur.
Kerstin | 26.09.2024

Webinar Recap: Barrierefreies Web

Webentwicklung > Webinar Recap: Barrierefreies Web

Ein barrierearmes Web ist mir wichtig - und zwar so wichtig, dass ich mich nicht nur bemühe, Informationen in kleinen Wissenspaketen über Social Media zu teilen, sondern ich diesen Monat auch mein erstes Webinar dazu gehalten habe.

Der Themenbereich der Barrierefreiheit ist breit gefächert. Selbst wenn man sich bereits auf den Teilbereich von Softwareprodukten beschränkt. In diesem Blogartikel fasse ich also kurz zusammen, welchen Fokus ich im Webinar gesetzt habe. Vielleicht haben Sie das Webinar ja verpasst oder wollen nochmal durchgehen, welche Punkte für Sie relevant sind!


Das BFSG

Das Barrierefreiheitsstärkungsgesetz wurde am 16. Juli 2021 erlassen und gilt ab dem 28. Juni 2025. Das Gesetz ist eine Erweiterung der betroffenen Webanwendungen und zielt auf die Umsetzung des European Accessibility Acts ab.


Welche Produkte sind betroffen?

Produkte sind betroffen, wenn sie digital bedient werden. Auch Dienstleistungen sind betroffen, wenn der Verkauf und Erwerb über das Internet stattfindet. U.a. zählen dazu:

  • E-Books

  • Messenger-Dienste

  • Online Shops

  • Hotelbuchungen

  • verbindliche Terminbuchungen

Es gibt Ausnahmen und konkrete Betonungen. Detaillierter auf das Gesetz bin ich in einem anderen Blogartikel eingegangen.





Faktor Mensch

Das Gesetz dient der besseren Zugänglichkeit von Produkten und Dienstleistungen für jeden Menschen. Das kann man nicht garantieren und das gibt der Name des Gesetzes schon her: Barrierefreiheitsstärkungsgesetz. Ein barrierefreies Web kann man nicht garantieren. Ein barrierearmes Web können wir alle anstreben. Davon profitieren dann nicht nur Menschen mit sichtbarer Behinderung, sondern alle Menschen. Denn: Jeder Mensch kommt mal in eine Situation, in der er von einem barrierearmen Design profitiert. Dazu gehören z.B.


1. Motorik:

  • Ein gebrochener Arm sorgt für einige Wochen für Bewegungsarmut.

  • Ein Kleinkind auf dem Arm sorgt für nur eine freie Hand.

  • Krankheiten wie Rheuma und Multiple Sklerose sorgen für Schmerzen bei Bewegungen und einem geringeren Bewegungsradius.


Eine Person sitzt an einem Schreibtisch und bedient ein Braille Display. Das Gerät hat neben der Ausgabe von Braillezeichen weitere große weiße Tasten. Hinter dem Braille Display liegt eine schwarze Tastatur.

2. Sehvermögen:

  • 2019 gab es 600.000 blinde Menschen in Deutschland.

  • Fast 10% aller Männer haben eine Rot-/Grün-Schwäche. Bei Farbsehschwächen spielt eine vorausschauende Farbkombination eine entscheidende Rolle!

  • Mobile Smartphone-Nutzer:innen, die draußen unter der prallen Sonne geblendet werden, profitieren von starken Kontrasten.


3. Kognition:

  • 15% der Menschen in Deutschland mit Schwerbehinderung haben ihre ausgeprägteste Behinderung im kognitiven Bereich.

  • Die Informationsverarbeitung im Gehirn kann stark beeinträchtigt sein.

  • Auch wer z.B. ADHS hat, hat es leichter, wenn ein Produkt ein cleanes Design mit prägnantem Informationsdesign hat. Ablenkende Animationen sind hier schwierig!



4. Umwelt & Innovationen

Vergessen Sie nicht, dass unsere Gesellschaft im Durchschnitt älter wird! Und je älter man wird, desto höher ist die Wahrscheinlichkeit, dass man ein barrierearmes Design braucht, um eine Webanwendung effizient nutzen zu können.




WCAG

Die Web Content Accessibility Guidelines werden durch das BFSG referenziert. Sie liegen aktuell in der Version 2.1 vor und bündeln 13 Guidelines mit 78 Erfolgskriterien. Sie sind damit eine gute Grundlage, um Ihr Produkt auf Barrierefreiheit zu prüfen. Das BFSG gibt vor, dass betroffene Produkte und Dienstleistungen die Ausprägungen über das Level A und AA abdecken müssen. Das WCAG ordnet ihre Richtlinien in drei Leveln ein; A entspricht dem niedrigsten Anforderungslevel und AAA dem höchsten.


Beispiel für einen Nutzungskontext:

Nutzer:innen müssen in der Webanwendung ein Formular ausfüllen. Einige der Formularfelder sind über ein Format eingegrenzt. Wie holen Sie die User am besten ab?

Level A:

Eine falsche Eingabe wird erkannt und das Eingabefeld wird markiert. Der Fehler wird darüberhinaus in Textform angezeigt.

Level AA:

Der Fehler wird mit einem Lösungsvorschlag markiert.

Level AAA:

Die Eingabefelder werden zu Beginn des Formulars erklärt. Damit ist eine Hilfe gegeben, noch bevor ein Fehler entstehen kann.





Was ist das wichtigstes To-do?

Einfache Antwort: Die Semantik im Code muss stimmen! Im Beispiel-Bild sehen Sie zweimal die gleiche Webseite: Beide Male, wie sie einem User mit Screenreader oder schlechter Internetverbindung angezeigt wird. Der entscheidende Unterschied: Beim rechten Bild stimmt die Semantik der Webseite, die Hierarchie der Elemente ist bedacht und Bilder haben alt-Texte. So verliert die Webseite auch mit Einschränkungen nicht an Wert und Nutzbarkeit.

Weiterhin essentiell: Die Webanwendung muss komplett über die Tastatur navigierbar und bedienbar sein. In Extremfällen sind User auf assistive Technologien angewiesen. Und die erfordern am Ende immer die Tastaturnavigation. Auch hierfür ist die richtige Semantik wichtig!


Welche hilfreichen Tools gibt es?

Wenn Sie Ihr Produkt noch nicht barrierearm angepasst haben, dann sollten Sie sich mit Browser Extensions vertraut machen, die Ihnen einen schnellen Überblick geben können. Colorblindly z.B. passt die Ansicht so an, wie jemand mit Farbsehschwäche die Seite sehen würde. Lighthouse hilft nicht nur bei der SEO, sondern ebenfalls bei der detaillierten Analyse der Accessibility.

Sie dürfen allerdings nicht vergessen, dass es mit automatisierten Tests nicht getan ist: Ich habe im Webinar viel über den Faktor Mensch gesprochen, weil die Nutzungskontexte unterschiedlich und speziell sind. Genauso individuell wie Ihr Produkt.

Ihr Produktdesign sollte individuell optimiert werden, damit die implementierten Anpassungen einen realen Mehrwert für genau Ihre Nutzer:innen haben.

Wir bei newcubator bieten Ihnen umfassende Beratung bei Ihrem individuellen Audit zur Barrierefreiheit in Ihrer Software oder auf Ihrer Webseite. Auch begleiten wir Sie bei der Umsetzung der Code-Anpassungen. Kontaktieren Sie uns dafür einfach über unsere Webseite.

Ich hoffe, ich konnte Ihnen eine gute Übersicht bieten. Wenn Sie mehr zu barrierefreien Themen erfahren möchten, können Sie z.B. meinen Artikel zu einem optimierten Design oder zu wirklich hilfreichen Bild-Alternativen lesen. Ich freue mich auf das nächste Webinar und freue mich über jeden Teilnehmenden!


Inhalt
  • Das BFSG
  • Betroffene Produkte
  • Faktor Mensch: Motorik, Sehvermögen, Kognition, Umwelt
  • Die WCAG
  • So wichtig ist die Semantik
  • Toolvorstellung
Kerstin Meschede
Kerstin (Softwareentwicklerin)

... ist eine leidenschaftliche Frontendentwicklerin in Dortmund. Ihre Hauptwerkzeuge sind TypeScript, Angular, und Figma. Sie baut im Nu zauberhafte Mockups und setzt diese effizient um. Nutzerzentrie... mehr anzeigen

More from Kerstin

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund