Screendesign und Web-Accessibility Katze und Hund

putzhuber.net

Web-DesignerInnen finden Design wichtiger als Web-NutzerInnen Quelle: IDEA, Finding Information, 2008, idea.org Ist gutes Design wichtig? Fähigkeit, sich auf Webseiten zu orientieren

Quelle: IDEA, Finding Information, 2008, idea.org

30 % der Befragten finden Web Accessibility sehr wichtig idea.org 2008 Nur ca. 4% öffentlicher Webauftritte in Europa sind „barrierefrei“ (automatisiert getestet WCAG 1.0 AA konform). eiao.net 2008

idea.org 2008

Nur ca. 4% öffentlicher Webauftritte in Europa sind „barrierefrei“ (automatisiert getestet WCAG 1.0 AA konform).

eiao.net 2008

Nur mit Profi Design und Profi Informations Architektur kann Barrierefreiheit Mainstream werden Katze im Boot

Barrierefreies Web hat ein Imageproblem = nicht cool, nicht hype = nicht schön = nicht businesstauglich = ein Spaßverderber = eine Nische für AmateurInnen

= nicht cool, nicht hype

= nicht schön

= nicht businesstauglich

= ein Spaßverderber

= eine Nische für AmateurInnen

Wir predigen seit Jahren dagegen an... aber es ist schwerer, ein lädiertes Image zu reparieren, als ein neues aufzubauen. eraseo.com

aber es ist schwerer, ein lädiertes Image zu reparieren, als ein neues aufzubauen.

3 Gründe für den schlechten Ruf Katze ohne Fell

1. Die Bewegung ist von AmateurInnen ausgegangen Von Menschen mit Behinderung selbst Von Gutmenschen Von technisch Interessierten, gestalterisch weniger Begabten

Von Menschen mit Behinderung selbst

Von Gutmenschen

Von technisch Interessierten, gestalterisch weniger Begabten

Googeln nach Barrierefreiheit... bizeps.or.at

wai-austria.at

Institut Integriert Studieren Linz

accessiblemedia.at

mainweb.at/blog

Frankfurter Low Budget einfach informativ Fokus auf Inhalt ...Verstärken diese Seiten das Image mangelnder Businesstauglichkeit ??

Low Budget

einfach

informativ

Fokus auf Inhalt

...Verstärken diese Seiten das Image mangelnder Businesstauglichkeit ??

Gut: Typografie atag.accessiblemedia.at

2. Barrierefreiheit wird mit Behördenseiten und Pflicht assoziiert oft konservatives Design mäßiger Gestaltungsfreiraum

oft konservatives Design

mäßiger Gestaltungsfreiraum

Aber auch hier: die Accessibility Vorreiter sind nicht die Design Vorreiter Schwarzer Peter

Aber auch hier: die Accessibility Vorreiter sind nicht die Design Vorreiter

wien.at Bei 1280px Bildschirmauflösung am Laptop

help.gv.at

Eyetracking Simulation / Heatmap, feng-gui.com Visuelle Wahrnehmung in den ersten 5 sec. Heatmap help.gv.at

Eyetracking Simulation / Heatmap, feng-gui.com Visuelle Wahrnehmung in den ersten 5 sec.

Wiener Schnitzel Seriös textlastig vollgefüllt Inhalt hängt über den Teller „in der Panier“ (nicht schlecht, nicht außergewöhnlich) eher statisches, klassisches Design

Seriös

textlastig

vollgefüllt

Inhalt hängt über den Teller

„in der Panier“ (nicht schlecht, nicht außergewöhnlich)

eher statisches, klassisches Design

Die Design Herausforderung ist der Umgang mit sehr viel Information

Nicht so gut: herkömmlicher Umgang mit Informationsflut Finanzministerium - bmf.gv.at

Besser: mehr Übersicht Leitung des Blicks, weniger imposant Bundeskanzleramt - bka.gv.at

Interessant: Web 2.0 Ansatz gruene.at

3. Behinderung ist nicht ästhetisch und cool GrafikerInnen haben ästhetischen Zugang zur Welt und Angst vor Einschränkung der Gestaltungsfreiheit. ProgrammiererInnen wollen komplexe Funktionalitäten.

GrafikerInnen haben ästhetischen Zugang zur Welt und Angst vor Einschränkung der Gestaltungsfreiheit.

ProgrammiererInnen wollen komplexe Funktionalitäten.

Sie wollen Gourmet Teller bauen Gourmet Essen Sie wollen sich nicht intensiv mit Behinderung auseinandersetzen.

Sie wollen sich nicht intensiv mit Behinderung auseinandersetzen.

Das Verständnis bleibt an der Oberfläche Richtlinien sind schwere, kreativitätshemmende Kost. DesignerInnen orientieren sich eher an Vorbildern.

Richtlinien sind schwere, kreativitätshemmende Kost.

DesignerInnen orientieren sich eher an Vorbildern.

Veterinäermedizinische Universität Wien - vu-wien.ac.at DesignerInnen glauben vielleicht, barrierefreie Seiten müssen etwas streng aussehen

Top DesignerInnen kommen oft aus dem Print Bereich

Standardkonform, etwas skalierbar, trotzdem eher ein Printdesign wombats.at

Zur Sache Was geben die WCAG 2.0 in punkto Design vor? Eingemachtes

Was geben die

WCAG 2.0 in

punkto Design

vor?

Wahrnehmbarkeit 1. Struktur / Präsentation Bezug (A) 2. Farbunabhängigkeit von Info (A) 3. gute Kontraste (AA, AAA) 4. Textvergrößerung (AA) 5. Text als Text (AA) 6. Vorgaben für Textblöcke (AAA)

1. Struktur / Präsentation Bezug (A)

2. Farbunabhängigkeit von Info (A)

3. gute Kontraste (AA, AAA)

4. Textvergrößerung (AA)

5. Text als Text (AA)

6. Vorgaben für Textblöcke (AAA)

Bedienbarkeit B ewegter Inhalt (A) Verständliche Links (A) Mehrfache Navigations Möglichkeit (AA), Konsistente Navigation (AA) Überschriften und Labels (AA) Standort - Orientierung (AA) Tastaturbedienbarkeit (A, AA)

B ewegter Inhalt (A)

Verständliche Links (A)

Mehrfache Navigations Möglichkeit (AA), Konsistente Navigation (AA)

Überschriften und Labels (AA)

Standort - Orientierung (AA)

Tastaturbedienbarkeit (A, AA)

1. Semantische Struktur entspricht Präsentation Überschrift <h 1-6> Absatz <p> Navigation <ul> ... optische Struktur = eine Frage von Usability und gutem Design

Überschrift <h 1-6>

Absatz <p>

Navigation <ul>

...

optische Struktur = eine Frage von Usability und gutem Design

bundesrat.de Gut: Hierarchien Bildung, Leitung des Blicks, Weißraum

Gut: klares Raster, Konventionen bundesrat.de

tibus.fr Gut: unkonventioneller, klare Gruppierung, nicht überladen tibus.fr, AccessiWeb Label Argent 2008

Gut: Reduzierte Information, große Icons, Web 2.0 Vereinfachung femonco.net

Kreuztabelle Bundesligasaison 1977/78 Gut: klar strukturierte Datentabelle einfach-fuer-alle.de

Gut: Formulare, die auch gezoomt gut bedienbar sind Anmeldeformular Atag

2. Farbunterschiede sind nicht allein bedeutungstragend Links, Formularfehler nicht nur farblich markieren. Ist bei Farbfehlsichtigkeit, in Graustufen noch alles klar lesbar und verständlich?

Links, Formularfehler nicht nur farblich markieren.

Ist bei Farbfehlsichtigkeit, in Graustufen noch alles klar lesbar und verständlich?

Gut: mit Screen Reader lesbare Diagramme Barrierefreie Diagramme filamentgroup.com

Lesbar mit Blendfilter bei Farbenblindheit Schwarz-Weiß Ausdruck? Barrierefreie Diagramme

Rot-Grün Blindheit Flash: Wahlergebnisse Österreich 2008 - Farbenblindheitssimulation

Gut: Klare, mehrfach markierte Fehlermeldungen duesselenergie.de

3. Kontrast Verhältnis von 5:1 Unter 150% (120% bold) font-size Sehr anspruchsvolle Forderung Messtools: Verhältnis Farbsättigung zu Kontrast

Unter 150% (120% bold) font-size

Sehr anspruchsvolle Forderung

Messtools: Verhältnis Farbsättigung zu Kontrast

Kontrast gut trotz zarter Farben, bis auf Menü oben - weiß auf blau Zürcher Kantonalbank - zbk.ch

Kontrast nicht immer ausreichend gerade bei kräftigen Farben BM für Gesundheit - bmg.bund.de

Firefox - Color Contrast Analyzer Farbkontrastmessung

4. Text ist auf 200% vergrößerbar 2 Größensprünge im IE 6, Zoomen Skalierbares Layout (zumindestens vertikal) Spielraum für Zoomfunktion von modernen Browsern

2 Größensprünge im IE 6, Zoomen

Skalierbares Layout (zumindestens vertikal)

Spielraum für Zoomfunktion von modernen Browsern

Fixes Layout jak-stat.at

Spielraum für Textvergrößerung jak-stat.at - Größere Schrift

Elastisches Layout ( Zoom Layout - Breiten in em) Bundeskanzleramt Bei Bildschirmauflösung 1680px

Erst bei 1680px hat 200% gezoomtes 800px Layout ohne Scrollen Platz Bundeskanzleramt

Liquides - fluides (flexibles) Layout (in %, mit Maximalbreite) linz.at

5. Text ist Text, wenn möglich, nicht Grafik Webtaugliche Schriften webtaugliche Schriftgrößen Wichtige Info nicht als Hintergrundbild per CSS

Webtaugliche Schriften

webtaugliche Schriftgrößen

Wichtige Info nicht als Hintergrundbild per CSS

Menüs als Hintergrundbilder Screen Reader tauglich eingebunden West-Vlaamse Intercommunale - wvi.be wvi.be, AnySurfer Label

wvi.be ohne Farben, ohne Menü Beim Wegschalten der Farben verschwinden Hintergrundbilder

Grafisches Menü mit Alternativtext forschungmachtschule.at

6. Visuelle Präsentation von Textblöcken (AAA) - nicht breiter als 80 Buchstaben - kein text-align:justified - Zeilenabstand von 1,5 in Absätzen - Absatzabstand 1,5x Zeilenhöhe - Textvergrößerung ohne assistive Technologien ist bis auf 200% möglich, ohne Querscrollen bei häufigsten Bildschirmgrößen.

- nicht breiter als 80 Buchstaben - kein text-align:justified - Zeilenabstand von 1,5 in Absätzen - Absatzabstand 1,5x Zeilenhöhe

- Textvergrößerung ohne assistive Technologien ist bis auf 200% möglich, ohne Querscrollen bei häufigsten Bildschirmgrößen.

7. Animationen mit Stopp Button hauptbahnhof-wien.at

7. Videos mit Captions hauptbahnhof-wien.at

8. Links im unmittelbaren Kontext verständlich (gleicher Absatz, Tabelle..) oder title Attribut asap.at

theologisches-seminar-elstal.de 9: Klare Navigation, Überschaubare Infoblöcke

OK: Lesbare, bedienbare Dropdownmenüs + Submenüs hei.at

Gut: Versteckte Hilfe progressive Disclosure clean-it.at

12. Große Klickflächen, sichtbarer Tastatur Fokus, sichtbarer Skiplink atag.accessiblemedia.at

Fazit Gutes, „barrierefreies“ Design ist nutzerInnenzentriertes Design. 100% barrierefrei gibt es nicht!

Gutes, „barrierefreies“ Design ist nutzerInnenzentriertes Design.

100% barrierefrei gibt es nicht!