Das ist doch behindert! Über Barrieren und Freiheiten

Webseiten und Webanwendungen in Deutschlands müssen barrierefrei sein. Aber welche Barrieren gibt es überhaupt und wann ist eine Anwendung frei von diesen? Während es relativ viele Informationen gibt, wie auf Barrierefreiheit getestet wird, sind Methoden zur konkreten Implementierung rar.

In diesem Talk berichte ich von den Erfahrungen, die mein Team und ich bei der Umsetzung der Barrierefreiheit gesammelt haben. Hierbei werden zunächst einige Grundlagen geschaffen. So werde ich erklären, welche Barrieren es gibt, was Barrierefreiheit ist und welche Rolle die "Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0" sowie das "Barrierefreiheitsstärkungsgesetz" spielt. Anschließend gebe ich an Hand von Praxisbeispielen für häufig auftretende Szenarien Empfehlungen, wie man Barriereheitheit erreichen kann. Dabei gehe ich auch auf Standards und Test(-tools) ein. Natürlich zeige ich Stolpersteineauf, weil eben doch nicht alles so einfach ist, wie man denkt.

Transcript

1. Das ist doch behindert! Über Barrieren und Freiheiten
2. About me Matthias Bünger  Softwareentwickler  OSS: Maven, JUnit Pioneer  @bukama@mastodon.social  @bukama.bsky.social
3. Inhalt  Behinderung und Barrierefreiheit  Barrieren bei Webseiten  Entwicklungsaspekte  Fazit
4. Behinderung und Barrierefreiheit Bewusstsein schärfen
5. Behinderungen
6. Definition: Behinderung „Menschen mit Behinderungen sind Menschen, die körperliche, seelische, geistige oder Sinnesbeeinträchtigungen haben, die sie in Wechselwirkung mit einstellungs- und umweltbedingten Barrieren an der gleichberechtigten Teilhabe an der Gesellschaft mit hoher Wahrscheinlichkeit länger als sechs Monate hindern können.“ Quelle: § 2 Abs. 1 Satz 1 SGB IX
7. Bewusstsein schaffen  "X ist behindert."  "X ist durch Y behindert."  "Die Nutzung von Z durch X ist (wegen Y) eingeschränkt."  "Der Zugang zu Z ist für X (wegen Y) eingeschränkt."
8. Barrierefreiheit  Einschränkungen entfernen  Barrieren / Hindernisse abbauen  Zugänglichkeit (Accessibility) / Barrierefreiheit schaffen
9. Barrieren bei Webseiten
10. Visuelle Einschränkungen  Blind  Farbwahrnehmung  Farben  Kontraste  Textgröße
11. Tool: Web Disability Simulator Keine Farben Rot-Grün Gelb-Blau
12. Auditive Einschränkungen  Hörgeschädigt / taub  Lokalisation  Selektion
13. Verständnisprobleme  Leseschwäche  Fremdsprache  Komplizierte Texte  Irreführende Beschreibungen
14. Mechanische Einschränkungen  Körperlich  Bspw. Parkinson  Reaktionsverhalten
15. Hilfen
16. Bessere Zugänglichkeit hilft allen!
17. Gesetzliche Anforderungen  European accessibility act  BFSG  BITV 2.0 & BITV-Test
18. Technische Anforderungen  EN 301 549 (bei ETSI ICT Standards)  W3C: Web Content Accessibility Guidelines (WCAG) 2.1  Min. Level AA  Inoffizielle Guides  Chartability als Guide Datenvisualisierung (Diagramme)
19. Anforderungen an Webseiten (Auswahl)  Zoombare Inhalte  Aussagekräftige Beschreibungen, Fehlertexte, Alternativtexte  Sinnvolle Farbauswahl und Kontraste  Screenreader-Support (z.B. NVDA, JAWS)
20. Entwicklungsaspekte
21. Basics  Syntaktisch und semantisch korrektes HTML  H-Level  Strukturelemente  Keine Layout-Tabellen  Labels (ggf. ARIA-Labels), Alternativbeschriftungen
22. Farben & Kontraste  Farben  Keine Informationen durch Farbe  Kontraste  4,5:1 (bei normaler Schrift, 3:1 bei großer Schrift)  Diverse Browser-Extensions, z.B.  Accessibility Insights for Web  Web accessibility evaluation tool (WAVE)
24. Tool: WAVE: Web accessibility evaluation tool
25. Responsive Design Anforderungen ➢ Text auf 200 % vergrößerbar ➢ Inhalte brechen um (bei 400 % Zoom)  Viewport: 1280px (400% = 320px)  Anordnung in Leserichtung  Datentabellen müssen nicht umbrechen
26. Hilfestellung bei der Eingabe  Inputelement  Keine deaktivierten Elemente!  Label  Bezeichnung des Feldes  Hinweistext  Kein Platzhalter (Watermark)!  Feldübergreifende Hinweistexte vor dem Formular  Fehlertext
27. Eingabe: Umsetzung als „Quadtupel“
28. Hinweistexte
29. Hinweis- & Fehlermeldungen
30. Navigation Navigierbar:  Bereiche überspringbar  Zwei Navigationswege  Breadcrumbs zählen nicht! Vorhersehbar:  Linktexte, Überschriften  Fokus deutlich, sinnvolle Reihenfolge bei Tastaturbedienung
31. Tabellen  Screenreadersupport für Zeilenauswahl  Auswahl- / Aktionsspalte am Ende  Alternativtext für Aktions-Icons mit identifizierendem Merkmal
32. Tabellen: Aktionsspalte
33. Umgang mit Programmfehlern  Fehlerquellen:  Eigener (HTML-)Code  Fremder / Generierter (HTML-)Code  Accessibility APIs  Screenreader  Keine Fehler im eigenen Code!  Fremdfehler dokumentieren.
34. Erklärung der Barrierefreiheit  Beschreibt den „Grad“ der Barrierefreiheit einer Webseite  Welche Anforderungen gelten?  Wann wurde zuletzt auf Barrierefreiheit getestet?  Welche Inhalte sind nicht barrierefrei?  Muss immer vorhanden und von jeder Seite erreichbar sein  Vorlagen im Netz verfügbar
35. Fazit
36. Fazit  Vielfältige Einschränkungen  vielfältige Barrieren  Bessere Zugänglichkeit hilft allen!  Anforderungen: BFSG / WCAG AA-Level  Bereits beim Design berücksichtigen  Basics machen den Großteil aus!  Weniger ist manchmal mehr!
37. JavaScript Library - KoliBri  Komponenten-Library für JavaScript  Open Source (EU-PL)  https://public-ui.github.io/docs
38. Bild-Referenzen  Freepik.com:  Junger Mann mit Down-Syndrom  Web responsive design  Unsplash.com  Person im Rollstuhl an Bahnsteig  Kleines Kind vor Treppenstufen  Treppen und Aufzug  Farbstifte  Kopfhöher und Mikrofon  Buchstabenklötzchen  Braille-Tastatur  Mädchen versteht Aufgabe nicht  Hörgerät  Mann mit Kind auf Arm und Handy  Frau arbeitet konzentriert  Pixabay.com  The Others  Wikipedia.org  Ishihara-Farbkreis  Mockups  Erstellt mit Balsamiq