Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Barrierefreiheit für Webseiten und Webanwendungen

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.

6574ee7c61e5e961ba64928fad6615e5?s=128

Jan Thiel

May 26, 2015
Tweet

More Decks by Jan Thiel

Other Decks in Education

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