Your SlideShare is downloading. ×
0
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Barrierefreie Websites: Die 10 wichtigsten Tipps

270

Published on

Die wichtigsten Tipps zu barrierefreien Websites

Die wichtigsten Tipps zu barrierefreien Websites

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
270
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Die 10 wichtigsten Tipps, Websites für allezugänglich zu machenMarkus Riesch, Andreas Uebelbacher, Gianfranco GiudiceStiftung «Zugang für alle»
  • 2. Gründung im Jahr 2000Zweck: Förderung der Barrierefreiheit8 Mitarbeiter, 3 PraktikantenTätigkeiten:GrundlagenForschungsprojekteDienstleistungenAusbildungONE Experience | 15. + 16. Mai 2013 2Die Stiftung «Zugang für alle»http://www.one-schweiz.ch/experience
  • 3. Behinderungen in der Schweiz• Weltweit über 800 MillionenMenschen mit Behinderungen• 15% der Schweizer Bevölkerung istvon einer Behinderung betroffen:• 14‘000 Blinde• 300‘000 Sehbehinderte• 500‘000 Hörbehinderte3
  • 4. BehinderungsformenSehbehinderungen und BlindheitHörbehinderungen und GehörlosigkeitMotorische BehinderungenKognitive undneurologischeBehinderungenAltersbedingteEinschränkungen
  • 5. Assistierende Technologien5
  • 6. Assistierende Technologien6
  • 7. Sehbehinderte sehen nur einen kleinenAusschnitt7
  • 8. Assistierende Technologien8
  • 9. Assistierende Technologien9
  • 10. Zugänglichkeit bedeutet, dass Website für möglichstviele Menschen – unabhängig ihrer Fähigkeiten undMöglichkeiten – genutzt werden könnenZugänglichkeit bedeutet, dass eine Website fürunterschiedlichste Ein- und Ausgabegeräte optimiertistZugänglichkeit bedeutet, dass Websites fürMaschinen lesbar sind10Was bedeutet „Zugänglichkeit“?http://www.one-schweiz.ch/experience ONE Experience | 15. + 16. Mai 2013
  • 11. 17. Mai 201311
  • 12. 1. Berücksichtigen Sie Accessibility früh im Projekt2. Achten Sie auf ausreichende Farbkontraste3. Bieten Sie Alternativen für graphisch vermittelte Informationen4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site5. Verwenden Sie Tabellen und Listen korrekt6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)7. Gestalten Sie Formulare bedienbar8. Gestalten Sie RIA zugänglich9. Gestalten Sie Ihre Website skalierbar10. Vermeiden Sie PDFsONE Experience | 15. + 16. Mai 2013 1210 wichtigste Tippshttp://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 Elementeflächendeckend problematische Umsetzungen inhunderten von Templates> enormer Anpassungsaufwand auf Entwicklerseite…!ONE Experience | 15. + 16. Mai 2013 131. Berücksichtigen Sie Accessibility früh im Projekthttp://www.one-schweiz.ch/experience
  • 14. Wann sollten Accessibility-Anforderungen insProjekt einfliessen?StyleguidesWireframeserste TemplatesWCAG-Audit (falls Zertifizierung erwünscht)ONE Experience | 15. + 16. Mai 2013 141. Berücksichtigen Sie Accessibility früh im Projekt (2)http://www.one-schweiz.ch/experience
  • 15. ONE Experience | 15. + 16. Mai 2013 152. Achten Sie auf ausreichende Farbkontrastehttp://www.one-schweiz.ch/experience
  • 16. Wen betreffen ungenügende Farbkontraste?Ältere MenschenMenschen mit SehbehinderungJunge, Normalsichtigewährend mobiler NutzungONE Experience | 15. + 16. Mai 2013 162. Achten Sie auf ausreichende Farbkontraste (2)http://www.one-schweiz.ch/experience
  • 17. ONE Experience | 15. + 16. Mai 2013 173. Bieten Sie Alternativen für nicht-textlich vermittelteInformationenhttp://www.one-schweiz.ch/experience
  • 18. ONE Experience | 15. + 16. Mai 2013 183. Bieten Sie Alternativen für nicht-textlich vermittelteInformationen (2)http://www.one-schweiz.ch/experienceAusserdem: «Google ist auch blind…!»Nicht-textliche Informationen sind vor Webcrawlernebenso versteckt wie vor blinden MenschenInformationen in Form von Bild, Ton und Multimediaerfordern immer Text-Alternativen
  • 19. ONE Experience | 15. + 16. Mai 2013 194. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Sitehttp://www.one-schweiz.ch/experience
  • 20. Sichtbarkeit Tastatur-FokusPower-User(z.B. Formulareingabe beim eBanking)Tab-Reihenfolge (auch für Power-User)Flyout-Navigationen sind hip, aber…ONE Experience | 15. + 16. Mai 2013 204. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Sitehttp://www.one-schweiz.ch/experience
  • 21. 17. Mai 2013
  • 22. Die häufigsten Fehler bei TabellenFehlende Zeilen- und/oder SpaltenüberschriftenEinsatz von LayouttabellenTabellen statt DefinitionslistenKeine Caption bei TabellenDie häufigsten Fehler bei ListenAufzählungen nicht als Listen definiertONE Experience | 15. + 16. Mai 2013 225. Verwenden Sie Tabellen und Listen korrekthttp://www.one-schweiz.ch/experience
  • 23. 17. Mai 2013
  • 24. HTML semantisch richtig anwendenEinsatz von HeadingsAlle Bereiche mit einer Heading auszeichnenUnsichtbare HeadingsAchtung: display:none darf nicht verwendet werdenONE Experience | 15. + 16. Mai 2013 246. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)http://www.one-schweiz.ch/experience
  • 25. ONE Experience | 15. + 16. Mai 2013 256. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)http://www.one-schweiz.ch/experience
  • 26. Anforderungen, damit Formulare auch fürMenschen mit Behinderungen bedienbar sind:Labels sind mit den Feldern verknüpftbei Gruppierungen auch mit BeschriftungTab-Reihenfolge ist benutzerfreundlichFehlermeldungen sind im Screenreader erkennbarCAPTCHAs zugänglich gestaltenPflichtfeld-Beschriftung nicht nur mit *ONE Experience | 15. + 16. Mai 2013 267. Gestalten Sie Formulare bedienbarhttp://www.one-schweiz.ch/experience
  • 27. HTML ist nicht geeignet für dynamische AnwendungenInteraktion durch zusätzliche Technologien (JS AJAX,Adobe Air, Silverlight …)WAI-ARIA als RetterTastaturbedienbarkeitAuszeichnung von RollenZustände und EigenschaftenLive-RegionenONE Experience | 15. + 16. Mai 2013 278. Gestalten Sie RIA zugänglichhttp://www.one-schweiz.ch/experience
  • 28. 17. Mai 2013
  • 29. 17. Mai 2013
  • 30. 17. Mai 2013
  • 31. Zoomen vs. Nur-Text-VergrösserungResponsive DesignONE Experience | 15. + 16. Mai 2013 319. Gestalten Sie Ihre Website skalierbarhttp://www.one-schweiz.ch/experience
  • 32. 17. Mai 2013
  • 33. PDFs sind…kein Ersatz für Webseiteni.d.R. nicht barrierefreiauch auf Mobilgeräten nur mühsam zu benutzenONE Experience | 15. + 16. Mai 2013 3310. Vermeiden Sie PDFshttp://www.one-schweiz.ch/experience
  • 34. Eigene Projekte prüfen, ob Accessibility (früh genug)eingeplant istEigene Websites abklopfen auf die aufgezeigtenProblematikenUnd natürlich….:Nehmen Sie mit uns Kontakt auf…! ;o)ONE Experience | 15. + 16. Mai 2013 34Call to action…!http://www.one-schweiz.ch/experience
  • 35. 17. Mai 2013
  • 36. Referent/inMarkus Riesch, Andreas Uebelbacher,Gianfranco GiudiceStiftung «Zugang für alle»info@access-for-all.chONE Schweizschmid + siegenthaler consulting gmbhWillistattstrasse 23CH-6206 Neuenkirchinfo@one-schweiz.ch36Kontakthttp://www.one-schweiz.ch/experience ONE Experience | 15. + 16. Mai 2013Messesponsor ModerationRealisierungspartner

×