SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
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
17. Mai 2013
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

Weitere ähnliche Inhalte

Ähnlich wie Barrierefreie Websites: Die 10 wichtigsten Tipps

DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...Oliver Busse
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Jürg Stuker
 
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigernKaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigernJohannes Müller
 
Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008Nils Pooker
 
User Interfaces - Full Service, Full Lifecycle
User Interfaces - Full Service, Full LifecycleUser Interfaces - Full Service, Full Lifecycle
User Interfaces - Full Service, Full LifecycleTobias Limbach
 
Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...
Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...
Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...Sandra Schön (aka Schoen)
 
Faure vanderdonckt co-summit2013-final
Faure vanderdonckt co-summit2013-finalFaure vanderdonckt co-summit2013-final
Faure vanderdonckt co-summit2013-finalJean Vanderdonckt
 
WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0
WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0
WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0Sven Jenzer
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...Peter Rozek
 
Auf der Suche nach "simplicity" in der Versicherungswelt
Auf der Suche nach "simplicity" in der VersicherungsweltAuf der Suche nach "simplicity" in der Versicherungswelt
Auf der Suche nach "simplicity" in der VersicherungsweltUnic
 
Barrierefreie Homepage
Barrierefreie HomepageBarrierefreie Homepage
Barrierefreie HomepageGlebD
 
Drupal vs. Joomla vs. Wordpress
Drupal vs. Joomla vs. WordpressDrupal vs. Joomla vs. Wordpress
Drupal vs. Joomla vs. WordpressNETNODE AG
 
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0Tomas Caspers
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign GmbH
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...Mandy Goram
 
Interaktive Übungen erstellen
Interaktive Übungen erstellen Interaktive Übungen erstellen
Interaktive Übungen erstellen deutschonline
 
eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016eResult_GmbH
 
Accessibility Update 2012
Accessibility Update 2012Accessibility Update 2012
Accessibility Update 2012Markus Riesch
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftDigicomp Academy AG
 

Ähnlich wie Barrierefreie Websites: Die 10 wichtigsten Tipps (20)

DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
 
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigernKaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
Kaufabbruch in letzter Sekunde? Mit UX Testing die Conversion Rate steigern
 
Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008
 
User Interfaces - Full Service, Full Lifecycle
User Interfaces - Full Service, Full LifecycleUser Interfaces - Full Service, Full Lifecycle
User Interfaces - Full Service, Full Lifecycle
 
Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...
Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...
Erwachsenenbildung aus Perspektive der traditionellen Erwachsenenbildungseinr...
 
Faure vanderdonckt co-summit2013-final
Faure vanderdonckt co-summit2013-finalFaure vanderdonckt co-summit2013-final
Faure vanderdonckt co-summit2013-final
 
WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0
WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0
WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
 
Der Weg zum nutzerzentrierten Unternehmen
Der Weg zum nutzerzentrierten UnternehmenDer Weg zum nutzerzentrierten Unternehmen
Der Weg zum nutzerzentrierten Unternehmen
 
Auf der Suche nach "simplicity" in der Versicherungswelt
Auf der Suche nach "simplicity" in der VersicherungsweltAuf der Suche nach "simplicity" in der Versicherungswelt
Auf der Suche nach "simplicity" in der Versicherungswelt
 
Barrierefreie Homepage
Barrierefreie HomepageBarrierefreie Homepage
Barrierefreie Homepage
 
Drupal vs. Joomla vs. Wordpress
Drupal vs. Joomla vs. WordpressDrupal vs. Joomla vs. Wordpress
Drupal vs. Joomla vs. Wordpress
 
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
 
Interaktive Übungen erstellen
Interaktive Übungen erstellen Interaktive Übungen erstellen
Interaktive Übungen erstellen
 
eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016
 
Accessibility Update 2012
Accessibility Update 2012Accessibility Update 2012
Accessibility Update 2012
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 

Mehr von ONE Schweiz

Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508ONE Schweiz
 
Sven Ruoss_watson
Sven Ruoss_watsonSven Ruoss_watson
Sven Ruoss_watsonONE Schweiz
 
Magazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AGMagazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AGONE Schweiz
 
20140507 one keynote mc_donald's strachwitz
20140507 one  keynote mc_donald's strachwitz20140507 one  keynote mc_donald's strachwitz
20140507 one keynote mc_donald's strachwitzONE Schweiz
 
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungAlexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungONE Schweiz
 
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machenGregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machenONE Schweiz
 
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex LibrisJürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex LibrisONE Schweiz
 
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als ThemaHeinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als ThemaONE Schweiz
 
Ivan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop LösungenIvan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop LösungenONE Schweiz
 
John Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.chJohn Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.chONE Schweiz
 
Vera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist ChefsacheVera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist ChefsacheONE Schweiz
 
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als InnovationstreiberThorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als InnovationstreiberONE Schweiz
 
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-SellersONE Schweiz
 
ONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, BoxalinoONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, BoxalinoONE Schweiz
 
ONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITBONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITBONE Schweiz
 
10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungenONE Schweiz
 
SimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud DatenbankSimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud DatenbankONE Schweiz
 
Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10ONE Schweiz
 
Vom Intranet zum Digital Workplace
Vom Intranet zum Digital WorkplaceVom Intranet zum Digital Workplace
Vom Intranet zum Digital WorkplaceONE Schweiz
 
Sicherheitsprobleme mit privaten Geräten im Firmenumfeld
Sicherheitsprobleme mit privaten Geräten im FirmenumfeldSicherheitsprobleme mit privaten Geräten im Firmenumfeld
Sicherheitsprobleme mit privaten Geräten im FirmenumfeldONE Schweiz
 

Mehr von ONE Schweiz (20)

Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508
 
Sven Ruoss_watson
Sven Ruoss_watsonSven Ruoss_watson
Sven Ruoss_watson
 
Magazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AGMagazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AG
 
20140507 one keynote mc_donald's strachwitz
20140507 one  keynote mc_donald's strachwitz20140507 one  keynote mc_donald's strachwitz
20140507 one keynote mc_donald's strachwitz
 
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungAlexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
 
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machenGregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
 
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex LibrisJürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
 
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als ThemaHeinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
 
Ivan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop LösungenIvan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop Lösungen
 
John Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.chJohn Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.ch
 
Vera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist ChefsacheVera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist Chefsache
 
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als InnovationstreiberThorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
 
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
 
ONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, BoxalinoONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, Boxalino
 
ONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITBONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITB
 
10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen
 
SimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud DatenbankSimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud Datenbank
 
Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10
 
Vom Intranet zum Digital Workplace
Vom Intranet zum Digital WorkplaceVom Intranet zum Digital Workplace
Vom Intranet zum Digital Workplace
 
Sicherheitsprobleme mit privaten Geräten im Firmenumfeld
Sicherheitsprobleme mit privaten Geräten im FirmenumfeldSicherheitsprobleme mit privaten Geräten im Firmenumfeld
Sicherheitsprobleme mit privaten Geräten im Firmenumfeld
 

Barrierefreie Websites: Die 10 wichtigsten Tipps

  • 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
  • 7. Sehbehinderte sehen nur einen kleinen Ausschnitt 7
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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