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 /
Top Related