Die barrierefreie Website: Usability, Design und Marketingaspekte Christiane Müller christiane.mueller@itib.de 27. Juni 2007
1 Motivation Barrierefreiheit im Web Meine Motivation 2 Kriterien Anforderungen Weitere Kriterien 3 Werkzeuge Automatisierung Tests 4 Templates Seitengerüste Einsatzmöglichkeiten 5 Fazit und Ausblick Fazit Web 2.0
1 Motivation Barrierefreiheit im Web Meine Motivation 2 Kriterien Anforderungen Weitere Kriterien 3 Werkzeuge Automatisierung Tests 4 Templates Seitengerüste Einsatzmöglichkeiten 5 Fazit und Ausblick Fazit Web 2.0
1 Motivation Barrierefreiheit im Web Meine Motivation 2 Kriterien Anforderungen Weitere Kriterien 3 Werkzeuge Automatisierung Tests 4 Templates Seitengerüste Einsatzmöglichkeiten 5 Fazit und Ausblick Fazit Web 2.0
1 Motivation Barrierefreiheit im Web Meine Motivation 2 Kriterien Anforderungen Weitere Kriterien 3 Werkzeuge Automatisierung Tests 4 Templates Seitengerüste Einsatzmöglichkeiten 5 Fazit und Ausblick Fazit Web 2.0
1 Motivation Barrierefreiheit im Web Meine Motivation 2 Kriterien Anforderungen Weitere Kriterien 3 Werkzeuge Automatisierung Tests 4 Templates Seitengerüste Einsatzmöglichkeiten 5 Fazit und Ausblick Fazit Web 2.0
Meine Motivation Spezialisierung auf das Thema Barrierefreiheit im Web Potentielle Kunden, die eine Website veröffentlichen wollen oder bereits veröffentlicht haben Vereinfachung des Alltagsgeschäftes durch Vorlagen Masterthesis-Titel Die barrierefreie Website: Usability, Design und Marketingaspekte
Meine Motivation Spezialisierung auf das Thema Barrierefreiheit im Web Potentielle Kunden, die eine Website veröffentlichen wollen oder bereits veröffentlicht haben Vereinfachung des Alltagsgeschäftes durch Vorlagen Masterthesis-Titel Die barrierefreie Website: Usability, Design und Marketingaspekte
Barrierefreiheit im Web Barrierefreiheit findet bisher wenig Beachtung Rechtliche Grundlage: Barrierefreie Informationstechnik-Verordnung (BITV) Basis: Web Content Accessibility Guidelines (WCAG) Schlagworte: Accessibility (dt. Zugänglichkeit) und Usability (dt. Gebrauchstauglichkeit) Barrierefreie Gestaltung der Website seit 2005 Pflicht für alle Bundesbehörden und öffentl. Einrichtungen der BRD
Barrierefreiheit im Web Barrierefreiheit findet bisher wenig Beachtung Rechtliche Grundlage: Barrierefreie Informationstechnik-Verordnung (BITV) Basis: Web Content Accessibility Guidelines (WCAG) Schlagworte: Accessibility (dt. Zugänglichkeit) und Usability (dt. Gebrauchstauglichkeit) Barrierefreie Gestaltung der Website seit 2005 Pflicht für alle Bundesbehörden und öffentl. Einrichtungen der BRD
Anforderungen Ergebnis Barrierearme Website
Anforderungen Ergebnis Barrierearme Website
Weitere Kriterien Webkataloge, (Meta-)Suchmaschinen: Strukturierte XHTML-Dateien mit Schlüsselwörtern Farbgebung: Kontrastreiche Strukturierungs-, Gestaltungsund Navigationselemente Marketing: Pflege der Website, Newsletter, Newsfeed, aktuelle Inhalte Fazit Barrierefreiheit ist vielschichtig und geht über die reine Website hinaus.
Weitere Kriterien Webkataloge, (Meta-)Suchmaschinen: Strukturierte XHTML-Dateien mit Schlüsselwörtern Farbgebung: Kontrastreiche Strukturierungs-, Gestaltungsund Navigationselemente Marketing: Pflege der Website, Newsletter, Newsfeed, aktuelle Inhalte Fazit Barrierefreiheit ist vielschichtig und geht über die reine Website hinaus.
Content Management Systeme unterstützen die Trennung von Inhalt und Layout ermöglichen technisch unerfahrenen Nutzern das Publizieren im Web beinhalten Vorlagen für konsistentes Layout grenzen Verantwortungsbereiche durch Nutzungsberechtigungen ab Vorteil Auch Open Source-Systeme berücksichtigen zunehmend die Einhaltung aktueller Richtlinien.
Content Management Systeme unterstützen die Trennung von Inhalt und Layout ermöglichen technisch unerfahrenen Nutzern das Publizieren im Web beinhalten Vorlagen für konsistentes Layout grenzen Verantwortungsbereiche durch Nutzungsberechtigungen ab Vorteil Auch Open Source-Systeme berücksichtigen zunehmend die Einhaltung aktueller Richtlinien.
Tests zur Unterstützung Usertests (Fokusgruppen-, Usability-Tests) Validierung der Technologien (XHTML-, CSS-Validierung) manuelle Überprüfungen Unterstützung durch: kostenfreie Browser-Plugins und Online-Validatoren
Tests zur Unterstützung Usertests (Fokusgruppen-, Usability-Tests) Validierung der Technologien (XHTML-, CSS-Validierung) manuelle Überprüfungen Unterstützung durch: kostenfreie Browser-Plugins und Online-Validatoren
Web-Templates bilden das Grundgerüst ab erleichtern das Erstellen berücksichtigen BITV-Kriterien beinhalten Hilfen für (Standard-)Bereiche, entsprechende Elemente und Formatierungen Ergebnis Seitengerüste, Formatierungsvorlagen
Einsatzmöglichkeiten
Einsatzmöglichkeiten
Einsatzmöglichkeiten
Einsatzmöglichkeiten (Ausschnitt Quelltext) Vertikale Navigation: <div id= verticalnavigation > <container id= 40 name= Hauptnavigation types= Navigation mode= fixed default= Hauptnavigation >Hauptnavigation</container> </div> Aktuelle Meldung im rechten Seitenbereich: <div id= main_right > <container id= 70 name= Teaser_Rechts types= Content mode= optional >Teaser (Rechts)</container> </div>
Einsatzmöglichkeiten (Ausschnitt Quelltext) Vertikale Navigation: <div id= verticalnavigation > <container id= 40 name= Hauptnavigation types= Navigation mode= fixed default= Hauptnavigation >Hauptnavigation</container> </div> Aktuelle Meldung im rechten Seitenbereich: <div id= main_right > <container id= 70 name= Teaser_Rechts types= Content mode= optional >Teaser (Rechts)</container> </div>
Einsatzmöglichkeiten (Ausschnitt Quelltext) Vertikale Navigation: <div id= verticalnavigation > <container id= 40 name= Hauptnavigation types= Navigation mode= fixed default= Hauptnavigation >Hauptnavigation</container> </div> Aktuelle Meldung im rechten Seitenbereich: <div id= main_right > <container id= 70 name= Teaser_Rechts types= Content mode= optional >Teaser (Rechts)</container> </div>
Einsatzmöglichkeiten (Ausschnitt Quelltext) Vertikale Navigation: <div id= verticalnavigation > <container id= 40 name= Hauptnavigation types= Navigation mode= fixed default= Hauptnavigation >Hauptnavigation</container> </div> Aktuelle Meldung im rechten Seitenbereich: <div id= main_right > <container id= 70 name= Teaser_Rechts types= Content mode= optional >Teaser (Rechts)</container> </div>
Fazit: Was Barrierefreiheit bringt Barrierefreie Webseiten sind bisher keine Selbstverständlichkeit Barrierefreiheit auf Dauer sicherstellen Barrierefreiheit wird erst auf den zweiten Blick deutlich Barrierefreie Webseiten zahlen sich aus Quelle der Abbildung: in Anlehnung an Wolfgang Wiese: Der Vorlagenkatalog der FAU - Universal Design in der Praxis. 1. Webkongress Erlangen: Regionales Rechenzentrum Erlangen (Veranst.), 2006. - http://www.webkongress.uni-erlangen.de/vortraege/vortrag-wiese.pdf, S. 30
Ausblick: Web 2.0 Begriff Web 2.0 2004 von Verleger Tim O Reilly geprägt Partizipation, Social Software (Blogs, Wikis), Folksonomy (Tagging), Ajax, RSS Vom Web 1.0 zum Web 2.0 : Entwicklung der Datenübertragungsraten Entwicklung der Internet-Nutzungskosten Entwicklung der Nutzer Funktionierende Geschäftsmodelle Entwicklung der Browser-Technologie
Ausblick: Web 2.0 Begriff Web 2.0 2004 von Verleger Tim O Reilly geprägt Partizipation, Social Software (Blogs, Wikis), Folksonomy (Tagging), Ajax, RSS Vom Web 1.0 zum Web 2.0 : Entwicklung der Datenübertragungsraten Entwicklung der Internet-Nutzungskosten Entwicklung der Nutzer Funktionierende Geschäftsmodelle Entwicklung der Browser-Technologie
Ausblick: Web 2.0 Quelle der Abbildung: Markus Angermeier: Netz 2.0, http://www.nerdwideweb.com/web20/index.html#web20de Web 2.0 Das Web wird mobiler. Und hoffentlich barrierefrei!
Ausblick: Web 2.0 Quelle der Abbildung: Markus Angermeier: Netz 2.0, http://www.nerdwideweb.com/web20/index.html#web20de Web 2.0 Das Web wird mobiler. Und hoffentlich barrierefrei!
Die barrierefreie Website Design, Usability und Marketingaspekte Vielen Dank für Ihre Aufmerksamkeit. Für Fragen stehe ich Ihnen gern zur Verfügung. Kontaktdaten ITIB - IT in Berlin Christiane Müller E-Mail: christiane.mueller@itib.de Website: http://www.itib.de