barrierefreie websites: die 10 wichtigsten tipps

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


6

Sehbehinderte sehen nur einen kleinen Ausschnitt

7


8


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


10 wichtigste Tipps


«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…!


1. Berücksichtigen Sie Accessibility früh im Projekt


Wann sollten Accessibility-Anforderungen ins Projekt einfliessen?

Styleguides

Wireframes

erste Templates

WCAG-Audit (falls Zertifizierung erwünscht)


1. Berücksichtigen Sie Accessibility früh im Projekt (2)



2. Achten Sie auf ausreichende Farbkontraste


Wen betreffen ungenügende Farbkontraste?

Ältere Menschen

Menschen mit Sehbehinderung

Junge, Normalsichtige während mobiler Nutzung


2. Achten Sie auf ausreichende Farbkontraste (2)



3. Bieten Sie Alternativen für nicht-textlich vermittelte Informationen



3. Bieten Sie Alternativen für nicht-textlich vermittelte Informationen (2)


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


4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site


Sichtbarkeit Tastatur-Fokus

Power-User

(z.B. Formulareingabe beim eBanking)

Tab-Reihenfolge (auch für Power-User)

Flyout-Navigationen sind hip, aber…


4. Ermöglichen Sie Tastaturbedienbarkeit Ihrer Site


17. Mai 2013

http://www.stadt-zuerich.ch/content/portal/de/index/portraet_der_stadt_zuerich/zahlen_u_fakten.html

http://www.biel-bienne.ch/de/pub/biel_aktuell.cfm

http://www.parlament.ch/D/ORGANE-MITGLIEDER/NATIONALRAT/MITGLIEDER-NR-A-Z/Seiten/default.aspx

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


5. Verwenden Sie Tabellen und Listen korrekt


17. Mai 2013

http://www.bern.ch/leben_in_bern/wohnen/erb/kggebuehren

http://www.valiant.ch/de/online-dienste/zinsen-hypotheken/

HTML semantisch richtig anwenden

Einsatz von Headings

Alle Bereiche mit einer Heading auszeichnen

Unsichtbare Headings

Achtung: display:none darf nicht verwendet werden


6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)



6. Strukturieren Sie Ihre Inhalte logisch (oder überhaupt)


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 *


7. Gestalten Sie Formulare bedienbar


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


8. Gestalten Sie RIA zugänglich


17. Mai 2013

http://www.accessiblemootoolsdemo.iao.fraunhofer.de/Mootools_Widgets/index.html

17. Mai 2013

17. Mai 2013

https://www.postfinance.ch/de/cust.html

Zoomen vs. Nur-Text-Vergrösserung

Responsive Design


9. Gestalten Sie Ihre Website skalierbar


17. Mai 2013

http://www.stadt-zuerich.ch/content/portal/de/index/portraet_der_stadt_zuerich/mobilitaet_verkehr.html

http://www.20min.ch/

http://www.halter-unternehmungen.ch/

PDFs sind…

kein Ersatz für Webseiten

i.d.R. nicht barrierefrei

auch auf Mobilgeräten nur mühsam zu benutzen


10. Vermeiden Sie PDFs


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)


Call to action…!


17. Mai 2013

Referent/in Markus Riesch, Andreas Uebelbacher, Gianfranco Giudice Stiftung «Zugang für alle» [email protected]

ONE Schweiz schmid + siegenthaler consulting gmbh Willistattstrasse 23 CH-6206 Neuenkirch [email protected]

36

Kontakt

http://www.one-schweiz.ch/experience ONE Experience | 15. + 16. Mai 2013

Messesponsor Moderation

Realisierungspartner

barrierefreie websites: die 10 wichtigsten tipps

Documents