SlideShare ist ein Scribd-Unternehmen logo
1 von 70
Screendesign und Web-Accessibility Katze und Hund
putzhuber.net
Web-DesignerInnen finden Design wichtiger als Web-NutzerInnen ,[object Object],Ist gutes Design wichtig? Fähigkeit, sich auf Webseiten zu orientieren
30 %  der  Befragten  finden   Web Accessibility  sehr wichtig ,[object Object],[object Object],[object Object]
Nur mit Profi Design und Profi Informations Architektur kann Barrierefreiheit Mainstream werden Katze im Boot
Barrierefreies Web hat ein Imageproblem ,[object Object],[object Object],[object Object],[object Object],[object Object]
Wir predigen seit Jahren dagegen an... ,[object Object],eraseo.com
3 Gründe für den schlechten Ruf Katze ohne Fell
1. Die Bewegung ist von AmateurInnen ausgegangen ,[object Object],[object Object],[object Object]
Googeln nach  Barrierefreiheit... bizeps.or.at
wai-austria.at
Institut Integriert Studieren Linz
accessiblemedia.at
mainweb.at/blog
Frankfurter ,[object Object],[object Object],[object Object],[object Object],[object Object]
Gut: Typografie atag.accessiblemedia.at
2. Barrierefreiheit wird mit Behördenseiten und Pflicht assoziiert ,[object Object],[object Object]
[object Object],Schwarzer Peter
wien.at Bei 1280px Bildschirmauflösung am Laptop
help.gv.at
[object Object],Heatmap help.gv.at
Wiener Schnitzel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object]
Sie wollen Gourmet Teller bauen Gourmet Essen ,[object Object]
Das Verständnis bleibt an der Oberfläche ,[object Object],[object Object]
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  ,[object Object],[object Object],[object Object],[object Object],Eingemachtes
Wahrnehmbarkeit ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bedienbarkeit ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1. Semantische Struktur entspricht Präsentation   ,[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object]
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 ,[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object]
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) ,[object Object],[object Object]
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 ,[object Object],[object Object]

Weitere ähnliche Inhalte

Andere mochten auch

Fct de consommation et l'épargne
Fct de consommation et l'épargneFct de consommation et l'épargne
Fct de consommation et l'épargne
Mejdoubi Amal
 
The ADHD Epidemic in America
The ADHD Epidemic in AmericaThe ADHD Epidemic in America
The ADHD Epidemic in America
worldwideww
 
Seguridad y Privacidad de Documentos Electronicos
Seguridad y Privacidad de Documentos ElectronicosSeguridad y Privacidad de Documentos Electronicos
Seguridad y Privacidad de Documentos Electronicos
Digetech.net
 

Andere mochten auch (17)

Marketing and consumer trends
Marketing and consumer trendsMarketing and consumer trends
Marketing and consumer trends
 
PARTES INTERNAS Y EXTERNAS DEL COMPUTADOR
PARTES INTERNAS Y EXTERNAS DEL COMPUTADORPARTES INTERNAS Y EXTERNAS DEL COMPUTADOR
PARTES INTERNAS Y EXTERNAS DEL COMPUTADOR
 
De triana al orbe
De triana al orbeDe triana al orbe
De triana al orbe
 
Catalog spanish
Catalog spanishCatalog spanish
Catalog spanish
 
Impact of Media on Indian Soceity
Impact of Media on Indian SoceityImpact of Media on Indian Soceity
Impact of Media on Indian Soceity
 
Brick Essay & Notes
Brick Essay & NotesBrick Essay & Notes
Brick Essay & Notes
 
Asturias
AsturiasAsturias
Asturias
 
Jabon con inclusiones
Jabon con inclusionesJabon con inclusiones
Jabon con inclusiones
 
Eventually Elasticsearch: Eventual Consistency in the Real World
Eventually Elasticsearch: Eventual Consistency in the Real WorldEventually Elasticsearch: Eventual Consistency in the Real World
Eventually Elasticsearch: Eventual Consistency in the Real World
 
Fct de consommation et l'épargne
Fct de consommation et l'épargneFct de consommation et l'épargne
Fct de consommation et l'épargne
 
Ljus & oljus (ljuskvalitet & hälsa)
Ljus & oljus (ljuskvalitet & hälsa)Ljus & oljus (ljuskvalitet & hälsa)
Ljus & oljus (ljuskvalitet & hälsa)
 
Chp13 E Blueprint
Chp13 E BlueprintChp13 E Blueprint
Chp13 E Blueprint
 
The ADHD Epidemic in America
The ADHD Epidemic in AmericaThe ADHD Epidemic in America
The ADHD Epidemic in America
 
Ficha de historia del arte retrato y escultura funeraria
Ficha de historia del arte retrato y escultura funerariaFicha de historia del arte retrato y escultura funeraria
Ficha de historia del arte retrato y escultura funeraria
 
Seguridad y Privacidad de Documentos Electronicos
Seguridad y Privacidad de Documentos ElectronicosSeguridad y Privacidad de Documentos Electronicos
Seguridad y Privacidad de Documentos Electronicos
 
Interaction Flow Modeling Language: updates on the Beta2 version - by the OMG...
Interaction Flow Modeling Language: updates on the Beta2 version - by the OMG...Interaction Flow Modeling Language: updates on the Beta2 version - by the OMG...
Interaction Flow Modeling Language: updates on the Beta2 version - by the OMG...
 
Marketing deportivo
Marketing deportivoMarketing deportivo
Marketing deportivo
 

Ähnlich wie Screendesign und Web-Accessibility

Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
Worst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der BarrierefreiheitWorst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der Barrierefreiheit
Kerstin Probiesch
 
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
cosmoblonde GmbH
 

Ähnlich wie Screendesign und Web-Accessibility (12)

Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
Barrierefreie Internet Seiten
Barrierefreie Internet SeitenBarrierefreie Internet Seiten
Barrierefreie Internet Seiten
 
Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29
 
Worst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der BarrierefreiheitWorst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der Barrierefreiheit
 
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
 
cosmocheck - Usabilty von Städteportalen
cosmocheck - Usabilty von Städteportalencosmocheck - Usabilty von Städteportalen
cosmocheck - Usabilty von Städteportalen
 
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
Deutschland im Blindflug? Der cosmocheck zum Thema Barriere-Armut.
 
Software-Ergonomie Tag4
Software-Ergonomie Tag4Software-Ergonomie Tag4
Software-Ergonomie Tag4
 
Mediengerechtes Webdesign
Mediengerechtes WebdesignMediengerechtes Webdesign
Mediengerechtes Webdesign
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 

Screendesign und Web-Accessibility

Hinweis der Redaktion

  1. Sind Gegensätze, wie kapriziöse Katze und braver Hund