Screendesign und Web-Accessibility

Katze und HundSind Gegenstze, wie kaprizise Katze und braver Hund

putzhuber.net

Web-DesignerInnen finden Design wichtiger als Web-NutzerInnen

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

Ist gutes Design wichtig?Fhigkeit, sich auf Webseiten zu orientieren

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

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 schn

= nicht businesstauglich

= ein Spaverderber

= eine Nische fr AmateurInnen

In der Businesswelt, bei DesignerInnen und auch bei ProgrammiererInnen.

Es schrnkt die Mglichkeiten ein, alles was toll ist, ist verboten.Damit setzen sich die auseinander, die den Zug der Zeit verpasst haben und nichts Besseres knnen.

Wir predigen seit Jahren dagegen an...

aber es ist schwerer, ein ldiertes Image zu reparieren, als ein neues aufzubauen.

eraseo.comBarrierefreie Websites sind schn und hochprofessionell mittlerweile, suchmaschinen freundlich, mobiltauglich, ein Qualittsprodukt....

3 Grnde fr 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

Googeln nach Barrierefreiheit...

bizeps.or.atGoogelt man in sterreich nach Barrierefreiheit im Internet oder Web Accessibility, stt man auf der ersten Suchergebnisseite immer noch auf die Pioniere. Das ist gut so, aber designtechnisch scheinen sie etwas aus der Zeit gefallen zu sein.

Bizeps: konservativ, grafisch unausgearbeitet

wai-austria.atWAI-Austria: ltere Seite von Frau Papst, kein zeitgemes Design

Institut Integriert Studieren LinzIntegreirt Studieren aus Linz, sehr schlicht, statisch

accessiblemedia.atAccessible media, zwar mit Designanspruch, aber der orangerote Hintergrund ist dominanter als der Inhalt

mainweb.at/blogMAIN-Blog: wirkt durch die starken Rundungen naiver, als dem Thema guttut.

FrankfurterLow Budget

einfach

informativ

Fokus auf Inhalt

...Verstrken diese Seiten das Image mangelnder Businesstauglichkeit ??

Gut: Typografie

atag.accessiblemedia.at

2. Barrierefreiheit wird mit Behrdenseiten und Pflicht assoziiert

oft konservatives Design

miger Gestaltungsfreiraum

1. Viele barrierefreie Websites kommen aus dem Behrdenumfeld,oder sind ffentlich gefrdert.

3. Behrdenseiten haben auch bevor sie barrierefrei sein mussten, nicht wahnsinnig progressiv ausgesehen.

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

Schwarzer Peter

wien.atBei 1280px Bildschirmauflsung am Laptop

wien.at, etwas zu eng, zu gedrngt, linksbndig 800x600 vergibt sehr viel Platz bei den grer werdenden Bildschirmen.

help.gv.athelp.gv.at sehr voll, sehr viele Links

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

Heatmap help.gv.at

Wiener SchnitzelSeris

textlastig

vollgefllt

Inhalt hngt ber den Teller

in der Panier (nicht schlecht, nicht auergewhnlich)

eher statisches, klassisches Design

Die Design Herausforderung ist der Umgang mit sehr viel Information

Kleine Seiten grozgig zu gestalten ist einfach.

Nicht so gut: herkmmlicher Umgang mit Informationsflut

Finanzministerium - bmf.gv.atMehrstufiges Dropdownmen, schlechte Kontraste

Besser: mehr bersicht
Leitung des Blicks, weniger imposant

Bundeskanzleramt - bka.gv.at

Interessant: Web 2.0 Ansatz

gruene.atKein barrierefreies Musterbeispiel, aber interessante Anstze, groe Buttons, genug Platz zwischen Links, Informationsmenge selbst konfigurierbar

3. Behinderung ist nicht sthetisch und cool

GrafikerInnen haben sthetischen Zugang zur Welt und
Angst vor Einschrnkung der Gestaltungsfreiheit.

ProgrammiererInnen wollen komplexe Funktionalitten.

Sie wollen
Gourmet Teller bauen

Gourmet EssenSie wollen sich nicht intensiv mit Behinderung auseinandersetzen.

Das Verstndnis bleibt an der Oberflche

Richtlinien sind schwere, kreativittshemmende Kost.

DesignerInnen orientieren sich eher an Vorbildern.

Eine Grafikerin, mit der ich zusammengearbeitet habe, hat z.B. dieses Screendesign gemacht: aber mit der Vorgabe, dass die Seite barrierefrei sein muss auch dieses deutlich konservativere Design. Sie hat offensichtlich gedacht barrierefrei muss so aussehen.

Veterinermedizinische Universitt Wien - vu-wien.ac.atDesignerInnen glauben vielleicht, barrierefreie Seiten mssen
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

Wahrnehmbarkeit

1. Struktur / Prsentation Bezug (A)

2. Farbunabhngigkeit von Info (A)

3. gute Kontraste (AA, AAA)

4. Textvergrerung (AA)

5. Text als Text (AA)

6. Vorgaben fr Textblcke (AAA)

Bedienbarkeit

Bewegter Inhalt (A)

Verstndliche Links (A)

Mehrfache Navigations Mglichkeit (AA), Konsistente Navigation (AA)

berschriften und Labels (AA)

Standort - Orientierung (AA)

Tastaturbedienbarkeit (A, AA)

1. Semantische Struktur entspricht Prsentation

berschrift

Absatz

Navigation

...

optische Struktur = eine Frage von Usability und gutem Design

bundesrat.deGut: Hierarchien Bildung, Leitung des Blicks, Weiraum

Wo schaut man zuerst hin? Was ist am wichtigsten?

Gut: klares Raster, Konventionen

bundesrat.de

tibus.frGut: unkonventioneller, klare Gruppierung, nicht berladen

tibus.fr, AccessiWeb Label Argent 2008

Gut: Reduzierte Information, groe 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 AtagLabeltext rechtsbndig gleich neben Input Feld

2. Farbunterschiede sind nicht allein bedeutungstragend

Links, Formularfehler nicht nur farblich markieren.

Ist bei Farbfehlsichtigkeit, in Graustufen noch alles klar lesbar und verstndlich?

Gut: mit Screen Reader lesbare Diagramme

Barrierefreie Diagrammefilamentgroup.com

Lesbar mit Blendfilter
bei Farbenblindheit
Schwarz-Wei Ausdruck?

Barrierefreie Diagramme

Rot-Grn Blindheit

Flash: Wahlergebnisse sterreich 2008 - Farbenblindheitssimulation

Gut: Klare, mehrfach markierte Fehlermeldungen

duesselenergie.de

3. Kontrast Verhltnis von 5:1

Unter 150% (120% bold) font-size

Sehr anspruchsvolle Forderung

Messtools: Verhltnis Farbsttigung zu Kontrast

Kontrast gut trotz zarter Farben, bis auf Men oben - wei auf blau

Zrcher Kantonalbank - zbk.ch

Kontrast nicht immer ausreichend
gerade bei krftigen Farben

BM fr Gesundheit - bmg.bund.de

Firefox - Color Contrast Analyzer

Farbkontrastmessung

4. Text ist auf 200% vergrerbar

2 Grensprnge im IE 6, Zoomen

Skalierbares Layout (zumindestens vertikal)

Spielraum fr Zoomfunktion von modernen Browsern

Fixes Layout

jak-stat.atHorizontales Men mit aufklappendem Submen das bndig mit Hintergrundbild abschliet. Ebenso wie das linke Men bottom gesetzt ist.

Spielraum fr Textvergrerung

jak-stat.at - Grere SchriftLinkes Men wchst nach oben, Hauptmenpunkte brechen um, Submen wchst nach unten, Hintergrundbild bleibt stehen.

Elastisches Layout
( Zoom Layout - Breiten in em)

BundeskanzleramtBei Bildschirmauflsung 1680px

Nimmt Zoomfunktion moderner Browser vorweg, nur Textvergrerung ist gar nicht mehr mglich.

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

Bundeskanzleramt

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

linz.atLayout zoomt bei Nur Schriftvergrerung nicht unendlich in die Breite, bei Zoom verhlt es sich wie Zoomlayout.

5. Text ist Text, wenn mglich, nicht Grafik

Webtaugliche Schriften

webtaugliche Schriftgren

Wichtige Info nicht als Hintergrundbild per CSS

Bislang Einschrnkung auf wenige SchriftenWenn unbedingt Schriftgrafiken, dann gro genug, keine winzigen Buttons.

Mens als Hintergrundbilder Screen Reader tauglich eingebunden

West-Vlaamse Intercommunale - wvi.bewvi.be, AnySurfer Label

Fr Menschen mit Sehbehinderung, die sich das Betriebssystem umstellen schlecht. Sie mssten Zoomsoftware verwenden fr solche Designs.

wvi.be ohne Farben, ohne MenBeim Wegschalten der Farben verschwinden Hintergrundbilder

Grafisches Men mit Alternativtext

forschungmachtschule.atBidler im HTML mit alt Attribut

6. Visuelle Prsentation von Textblcken (AAA)

- nicht breiter als 80 Buchstaben
- kein text-align:justified
- Zeilenabstand von 1,5 in Abstzen
- Absatzabstand 1,5x Zeilenhhe

- Textvergrerung ohne assistive Technologien ist bis auf 200% mglich, ohne Querscrollen bei hufigsten Bildschirmgren.

7. Animationen mit Stopp Button

hauptbahnhof-wien.at

7. Videos mit Captions

hauptbahnhof-wien.at

8. Links im unmittelbaren Kontext verstndlich (gleicher Absatz, Tabelle..) oder title Attribut

asap.atGleiche CSS Angaben bei a:hover, a:active, a:focusVerstndlichkeit im Kontext sehr genau ausformuliert in WCAG

theologisches-seminar-elstal.de9: Klare Navigation,
berschaubare Infoblcke

OK: Lesbare, bedienbare Dropdownmens + Submens

hei.at

Gut: Versteckte Hilfe
progressive Disclosure

clean-it.atUnobtrusive JavaScript tastaturbedienbar, screen reader tauglich. Ohne JavaScript muss versteckte Info sichtbar sein.

12. Groe Klickflchen, sichtbarer Tastatur Fokus, sichtbarer Skiplink

atag.accessiblemedia.atNavigationsleisten zur Gnze klickbar, nicht nur der Text, genug Weiraum und padding zwischen Links, groe Buttons

Fazit

Gutes, barrierefreies Design ist nutzerInnenzentriertes Design.

100% barrierefrei gibt es nicht!

Klicken Sie, um das Format des Titeltextes zu bearbeiten

Klicken Sie, um die Formate des jjfkdj jdkfjdfk dkfj

Zweite Gliederungsebene

???Seite ??? (???)07.10.2008, 21:22:58Seite /