Barrierefreiheit für Webseiten und Webanwendungen

Die gängigsten Fehler auf Webseiten und in Webanwendungen, durch die Menschen mit Einschränkungen diskriminiert werden. Und wie man Webseiten dann doch noch barrierearm entwickelt.

Transcript

1. Barrierefreiheit Wieso, weshalb, warum?
2. Barrierefreiheit • Abbauen von Barrieren, welche die Nutzung durch Menschen mit Einschränkungen behindern • Im Web relevante Barrieren – Optische / visuelle – Semantische / inhaltliche
3. Zielgruppen Blindheit Sehschwäche Farbwahrnehmung Visuelle Rot-Grün Schwäche Screenreader Text-Zoom Inhaltliche Geistige Behinderungen Analphabetismus Leseschwäche Lernbehinderungen Akustische Taubheit
4. Gesetzliche Vorgaben • BITV2.0 (aus 2011) – Betrifft nur Webseiten von öffentlichen Einrichtungen • Ansonsten keinerlei Vorgaben BITV = Barrierefreie Informationstechnik-Verordnung
5. BARRIEREN AUF WEBSEITEN
6. Farben • Zu geringer Kontrast (z.B. bei Text auf Hintergrund) • Zu geringe Farbunterschiede bei hover, focus, active • Farben als alleiniger Indikator für inhaltliche Aussagen (z.B. Rot / Gelb / Grün) • Hintergrundgrafiken (css „background“)
7. Grafiken • Hintergrundgrafiken (css „background“) • Grafiken als Bedienelemente ohne Textalternativen • Flash- oder andere aktive Inhalte
8. Fehlende Tastaturbedienung • Keine sinnvolle Navigation per „TAB“ • Fehlende Darstellung des „:focus“ CSS Zustands (analog zu „:hover“) • Fokusverlust durch JS / AJAX Funktionen • JS Funktionen (DropDowns, Gallerien) nicht voll tastaturbedienbar
9. Fehlende Skalierbarkeit • Fixe absolute Höhen oder Breiten (css „height“ / „width“ in px) • Schriftgröße definiert in px • Nicht responsives layout
10. Schlechte Contentaufbereitung • Keine Sprungmarken („skiplinks“) • Viele komplexe Datenstrukturen (Tabellen) • Stimmungs-Bilder mit „alt“ Tag • Keinerlei „accessibility Texte“ • Inhaltliche Zusammenhänge sind reinweg „optisch“ ersichtlich • Fehlende „Leichte Sprache“
11. Schlechtes HTML • Screenreader benötigen Semantik! • Schlechtes HTML = Schlechte Barrierefreiheit = Schlechtes SEO • Fehlende WAI-ARIA Auszeichnung • Fehlende Verwendung semantischer HTML5 Tags • Schlechte Strukturierung (Headlines, Links) • Tabellen für Layoutzwecke
12. TECHNISCHE LÖSUNGSANSÄTZE
13. HTML5 + WAI-ARIA + WCAG • HTML5 bietet umfangreiche Semantik (<article>,<section>,<aside>,<nav>,<header>,<fo oter>,…) • WAI-ARIA erweitert HTML um Attribute zum „Steuern“ von accessibility tools (z.B. Screenreader) • WCAG 2.0 bietet Leitfaden und Checkliste zur Implementierung von barrierefreienarmen Webseiten / Wenanwendungen
14. WCAG / BITV 2.0 • Relativ „alt“ (2008) und teilweise nicht mehr zeitgemäß • Bewertung sollte mit Augenmaß erfolgen • Realistisch ist eine möglichst barrierearme Webseite, barrierefrei ist utopisch • WCAG + BITV sind hervorragende Leitfäden • Update von BITV läuft derzeit an
15. Eure Erfahrungen mit Barrierefreiheit?
16. Fragen? Jan Thiel Jan@WirLiebenWP.de https://WirLiebenWP.de - Jan Thiel
17. Weiterführende Links • http://www.w3.org/Translations/WCAG20-de/ • http://www.barrierefreies-webdesign.de/bitv/bitv-2.0.html • http://www.bitvtest.de/bitvtest.html • http://www.w3schools.com/html/html5_semantic_elements.asp • http://www.w3.org/WAI/intro/aria.php
18. Browser Toolbars • Web Accessibility Toolbar (Internet Explorer) – http://www.paciellogroup.com/resources/wat/ • Accessibility Evaluation Toolbar (Firefox) – https://addons.mozilla.org/de/firefox/addon/accessibi lity-evaluation-toolb/ • Accessibility Developer Tools (Chrome) – https://chrome.google.com/webstore/detail/accessi bility-developer-t/fpkknkljclfencbdbgkenhalefipecmb