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

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

Sehbehinderte sehen nur einen kleinen
Ausschnitt
7

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

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

Sichtbarkeit Tastatur-Fokus
Power-User
(z.B. Formulareingabe beim eBanking)
Tab-Reihenfolge (auch für Power-User)
Flyout-Navigationen sind hip, aber…

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

HTML semantisch richtig anwenden
Einsatz von Headings
Alle Bereiche mit einer Heading auszeichnen
Unsichtbare Headings
Achtung: display:none darf nicht verwendet werden

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

Zoomen vs. Nur-Text-Vergrösserung
Responsive Design
9. Gestalten Sie Ihre Website skalierbar

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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Die 10 wichtigsten Tipps, Websites für alle zugänglich zu machen| Markus Riesch, Andreas Uebelbacher und Gianfranco Giudice - Stiftung «Zugang für alle»

Ähnlich wie Die 10 wichtigsten Tipps, Websites für alle zugänglich zu machen| Markus Riesch, Andreas Uebelbacher und Gianfranco Giudice - Stiftung «Zugang für alle» (20)

Mehr von topsoft - inspiring digital business

Mehr von topsoft - inspiring digital business (20)