Die barrierefreie Website: Usability, Design und Marketingaspekte

Transkript

1 Die barrierefreie Website: Usability, Design und Marketingaspekte Christiane Müller 27. Juni 2007

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 Anforderungen Ergebnis Barrierearme Website

12 Anforderungen Ergebnis Barrierearme Website

13 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.

14 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.

15 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.

16 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.

17 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

18 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

19 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

20 Einsatzmöglichkeiten

21 Einsatzmöglichkeiten

22 Einsatzmöglichkeiten

23 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>

24 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>

25 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>

26 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>

27 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.), S. 30

28 Ausblick: Web 2.0 Begriff Web 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

29 Ausblick: Web 2.0 Begriff Web 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

30 Ausblick: Web 2.0 Quelle der Abbildung: Markus Angermeier: Netz 2.0, Web 2.0 Das Web wird mobiler. Und hoffentlich barrierefrei!

31 Ausblick: Web 2.0 Quelle der Abbildung: Markus Angermeier: Netz 2.0, Web 2.0 Das Web wird mobiler. Und hoffentlich barrierefrei!

32 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 Website: