Barriere-freiheit!
👵

Wa isch da übohopt?

Ziel

Inhalt auch für Besucher mit speziellen Bedürfnissen zugänglich machen

Beispiele

  • Sehbehinderung
  • Hörbehinderung
  • Sprachbehinderung
  • motorische Behinderung

Abo wiso?

Tim Berners-Lee

«The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.»

Bundesamt für Statistik

«Gemäss verschiedenen Quellen kann die Anzahl
Menschen mit Behinderungen auf rund 1,4 Millionen geschätzt werden.»

Isch mio doch glich!

Grundlagen

  • Behindertengleichstellungsgesetz: Dienstleistungen des Gemeinwesens müssen auch für Menschen mit Behinderungen zugänglich sein
  • Behindertengleichstellungsverordnung: Internetangebote des Bundes müssen so gestaltet sein, dass Menschen mit Behinderungen diese barrierefrei nutzen können → Details
  • DOT: [Airline] Websites are required to meet the standards for accessibility contained in the widely accepted Website Content Accessibility Guidelines (WCAG) → Quelle

Okay, übozügt.
Wi goht da?

Typische Fehler

Fehler 1

Eigenbauten anstelle von "nativen" Lösungen

Fehler 2

Mausbenutzer über restliche User priorisiert

Fehler 3

JavaScript-Widgets ohne ARIA

Wäo definiot Barriärofraihait?

Kriterien

  • WCAG (Web Content Accessibility Guidelines): http://www.w3.org/TR/WCAG/
    • 4 Prinzipien
      • perceivable / wahrnehmbar
      • operable / bedienbar
      • understandable / verständlich
      • robust
    • 12 Richtlinien
    • Testbare Erfolgskriterien für jede Richtlinie
    • 3 Konformitätslevels für Erfolgskriterien: A (tiefstes), AA, AAA (höchstes)
    • Ausreichende und empfohlene Techniken zur Erfüllung eines Kriteriums

WCAG: Beispiel

  • Principle 3: Understandable: Information and the operation of user interface must be understandable
    • Guideline 3.3: Input Assistance: Help users avoid and correct mistakes
      • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input (Level A)
        • Sufficient Techniques:
          • G131: Providing descriptive labels AND
          • H90: Indicating required form controls using label or legend
          • ...

Tools

  • Minimum: HTML Validator
  • Empfehlung: Spezialisiertes Tool:
    • aXe (u.a. mit Browser-Extension)
    • Tenon (SaaS)
  • In jedem Fall sinnvoll: Screenreader

Zertifizierung 

  • «Zugang für alle» / «Access for all»
  • Unabhängige (und einzige) Zertifizierungsstelle für barrierefreie Websites
  • http://www.access-for-all.ch

Bald:

Bildquelle: https://www.flickr.com/photos/merec0/694499591

Merci!

A11y

By Thomas Jaggi

A11y

Slides Webdesday St. Gallen

  • 385