View
552
Download
0
Category
Preview:
DESCRIPTION
Die wichtigsten Tipps zu barrierefreien Websites
Citation preview
Die 10 wichtigsten Tipps, Websites für alle zugänglich zu machen
Markus Riesch, Andreas Uebelbacher, Gianfranco Giudice
Stiftung «Zugang für alle»
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
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
Behinderungsformen
Sehbehinderungen und Blindheit
Hörbehinderungen und Gehörlosigkeit
Motorische Behinderungen
Kognitive und neurologische Behinderungen
Altersbedingte Einschränkungen
Assistierende Technologien
5
Assistierende Technologien
6
Sehbehinderte sehen nur einen kleinen Ausschnitt
7
Assistierende Technologien
8
Assistierende Technologien
9
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
17. Mai 2013
11
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
«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
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
ONE Experience | 15. + 16. Mai 2013 15
2. Achten Sie auf ausreichende Farbkontraste
http://www.one-schweiz.ch/experience
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
ONE Experience | 15. + 16. Mai 2013 17
3. Bieten Sie Alternativen für nicht-textlich vermittelte Informationen
http://www.one-schweiz.ch/experience
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
ONE Experience | 15. + 16. Mai 2013 19
4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site
http://www.one-schweiz.ch/experience
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
17. Mai 2013
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
17. Mai 2013
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
ONE Experience | 15. + 16. Mai 2013 25
6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)
http://www.one-schweiz.ch/experience
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
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
17. Mai 2013
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
17. Mai 2013
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
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
17. Mai 2013
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
Recommended