Die wichtigsten Tipps zu barrierefreien Websites

1. Die 10 wichtigsten Tipps, Websites für alle
zugänglich zu machen
Markus Riesch, Andreas Uebelbacher, Gianfranco Giudice
Stiftung «Zugang für alle»

2. Gründung im Jahr 2000
Zweck: Förderung der Barrierefreiheit
8 Mitarbeiter, 3 Praktikanten
Tätigkeiten:
Grundlagen
Forschungsprojekte
Dienstleistungen
Ausbildung
ONE Experience | 15. + 16. Mai 2013 2
Die Stiftung «Zugang für alle»
http://www.one-schweiz.ch/experience

3. Behinderungen in der Schweiz
• Weltweit über 800 Millionen
Menschen mit Behinderungen
• 15% der Schweizer Bevölkerung ist
von einer Behinderung betroffen:
• 14‘000 Blinde
• 300‘000 Sehbehinderte
• 500‘000 Hörbehinderte
3

4. Behinderungsformen
Sehbehinderungen und Blindheit
Hörbehinderungen und Gehörlosigkeit
Motorische Behinderungen
Kognitive und
neurologische
Behinderungen
Altersbedingte
Einschränkungen

5. Assistierende Technologien
5

6. Assistierende Technologien
6

7. Sehbehinderte sehen nur einen kleinen
Ausschnitt
7

8. Assistierende Technologien
8

9. Assistierende Technologien
9

10. Zugänglichkeit bedeutet, dass Website für möglichst
viele Menschen – unabhängig ihrer Fähigkeiten und
Möglichkeiten – genutzt werden können
Zugänglichkeit bedeutet, dass eine Website für
unterschiedlichste Ein- und Ausgabegeräte optimiert
ist
Zugänglichkeit bedeutet, dass Websites für
Maschinen lesbar sind
10
Was bedeutet „Zugänglichkeit“?
http://www.one-schweiz.ch/experience ONE Experience | 15. + 16. Mai 2013

11. 17. Mai 2013
11

12. 1. Berücksichtigen Sie Accessibility früh im Projekt
2. Achten Sie auf ausreichende Farbkontraste
3. Bieten Sie Alternativen für graphisch vermittelte Informationen
4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site
5. Verwenden Sie Tabellen und Listen korrekt
6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)
7. Gestalten Sie Formulare bedienbar
8. Gestalten Sie RIA zugänglich
9. Gestalten Sie Ihre Website skalierbar
10. Vermeiden Sie PDFs
ONE Experience | 15. + 16. Mai 2013 12
10 wichtigste Tipps
http://www.one-schweiz.ch/experience

13. «Wir wollen unsere fertige Site jetzt nur noch als
‘barrierefrei’ zertifizieren lassen.»
Häufige Situation:
Styleguide (CI/CD) definiert nicht zugängliche Elemente
flächendeckend problematische Umsetzungen in
hunderten von Templates
> enormer Anpassungsaufwand auf Entwicklerseite…!
ONE Experience | 15. + 16. Mai 2013 13
1. Berücksichtigen Sie Accessibility früh im Projekt
http://www.one-schweiz.ch/experience

14. Wann sollten Accessibility-Anforderungen ins
Projekt einfliessen?
Styleguides
Wireframes
erste Templates
WCAG-Audit (falls Zertifizierung erwünscht)
ONE Experience | 15. + 16. Mai 2013 14
1. Berücksichtigen Sie Accessibility früh im Projekt (2)
http://www.one-schweiz.ch/experience

15. ONE Experience | 15. + 16. Mai 2013 15
2. Achten Sie auf ausreichende Farbkontraste
http://www.one-schweiz.ch/experience

16. Wen betreffen ungenügende Farbkontraste?
Ältere Menschen
Menschen mit Sehbehinderung
Junge, Normalsichtige
während mobiler Nutzung
ONE Experience | 15. + 16. Mai 2013 16
2. Achten Sie auf ausreichende Farbkontraste (2)
http://www.one-schweiz.ch/experience

17. ONE Experience | 15. + 16. Mai 2013 17
3. Bieten Sie Alternativen für nicht-textlich vermittelte
Informationen
http://www.one-schweiz.ch/experience

18. ONE Experience | 15. + 16. Mai 2013 18
3. Bieten Sie Alternativen für nicht-textlich vermittelte
Informationen (2)
http://www.one-schweiz.ch/experience
Ausserdem: «Google ist auch blind…!»
Nicht-textliche Informationen sind vor Webcrawlern
ebenso versteckt wie vor blinden Menschen
Informationen in Form von Bild, Ton und Multimedia
erfordern immer Text-Alternativen

19. ONE Experience | 15. + 16. Mai 2013 19
4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site
http://www.one-schweiz.ch/experience

20. Sichtbarkeit Tastatur-Fokus
Power-User
(z.B. Formulareingabe beim eBanking)
Tab-Reihenfolge (auch für Power-User)
Flyout-Navigationen sind hip, aber…
ONE Experience | 15. + 16. Mai 2013 20
4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site
http://www.one-schweiz.ch/experience

21. 17. Mai 2013

22. Die häufigsten Fehler bei Tabellen
Fehlende Zeilen- und/oder Spaltenüberschriften
Einsatz von Layouttabellen
Tabellen statt Definitionslisten
Keine Caption bei Tabellen
Die häufigsten Fehler bei Listen
Aufzählungen nicht als Listen definiert
ONE Experience | 15. + 16. Mai 2013 22
5. Verwenden Sie Tabellen und Listen korrekt
http://www.one-schweiz.ch/experience

23. 17. Mai 2013

24. HTML semantisch richtig anwenden
Einsatz von Headings
Alle Bereiche mit einer Heading auszeichnen
Unsichtbare Headings
Achtung: display:none darf nicht verwendet werden
ONE Experience | 15. + 16. Mai 2013 24
6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)
http://www.one-schweiz.ch/experience

25. ONE Experience | 15. + 16. Mai 2013 25
6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)
http://www.one-schweiz.ch/experience

26. Anforderungen, damit Formulare auch für
Menschen mit Behinderungen bedienbar sind:
Labels sind mit den Feldern verknüpft
bei Gruppierungen auch mit Beschriftung
Tab-Reihenfolge ist benutzerfreundlich
Fehlermeldungen sind im Screenreader erkennbar
CAPTCHAs zugänglich gestalten
Pflichtfeld-Beschriftung nicht nur mit *
ONE Experience | 15. + 16. Mai 2013 26
7. Gestalten Sie Formulare bedienbar
http://www.one-schweiz.ch/experience

27. HTML ist nicht geeignet für dynamische Anwendungen
Interaktion durch zusätzliche Technologien (JS AJAX,
Adobe Air, Silverlight …)
WAI-ARIA als Retter
Tastaturbedienbarkeit
Auszeichnung von Rollen
Zustände und Eigenschaften
Live-Regionen
ONE Experience | 15. + 16. Mai 2013 27
8. Gestalten Sie RIA zugänglich
http://www.one-schweiz.ch/experience

28. 17. Mai 2013

29. 17. Mai 2013

30. 17. Mai 2013

31. Zoomen vs. Nur-Text-Vergrösserung
Responsive Design
ONE Experience | 15. + 16. Mai 2013 31
9. Gestalten Sie Ihre Website skalierbar
http://www.one-schweiz.ch/experience

32. 17. Mai 2013

33. PDFs sind…
kein Ersatz für Webseiten
i.d.R. nicht barrierefrei
auch auf Mobilgeräten nur mühsam zu benutzen
ONE Experience | 15. + 16. Mai 2013 33
10. Vermeiden Sie PDFs
http://www.one-schweiz.ch/experience

34. Eigene Projekte prüfen, ob Accessibility (früh genug)
eingeplant ist
Eigene Websites abklopfen auf die aufgezeigten
Problematiken
Und natürlich….:
Nehmen Sie mit uns Kontakt auf…! ;o)
ONE Experience | 15. + 16. Mai 2013 34
Call to action…!
http://www.one-schweiz.ch/experience

35. 17. Mai 2013

36. Referent/in
Markus Riesch, Andreas Uebelbacher,
Gianfranco Giudice
Stiftung «Zugang für alle»
info@access-for-all.ch
ONE Schweiz
schmid + siegenthaler consulting gmbh
Willistattstrasse 23
CH-6206 Neuenkirch
info@one-schweiz.ch
36
Kontakt
http://www.one-schweiz.ch/experience ONE Experience | 15. + 16. Mai 2013
Messesponsor Moderation
Realisierungspartner