Usability Professionals
Konferenz 2013 Bremen
Barrierefreie Websites planen,
entwickeln, unterhalten, testen
Qualitätssich...
Usability Professionals
Konferenz 2013 Bremen
Vorstellung
 AK Barrierefreiheit der German UPA
2
Usability Professionals
Konferenz 2013 Bremen
Zielgruppe
 Projektleiter und Entscheider
3
Usability Professionals
Konferenz 2013 Bremen
Agenda
1. Was ist Barrierefreiheit?
2. Planen, entwickeln, unterhalten, test...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
5
„Behinderung ist die
Unfähigkeit, sich an
schl...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Beispiele guter / schlechter Barrierefreiheit
 ...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Sinnvolle / unsinnige Alternativtexte
7
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Sinnvolle / unsinnige Alternativtexte
8
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
9
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Alternativtexte für SEO ??
10
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Ausreichender Helligkeitskontrast
11
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
12
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
13
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
14
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Struktur der Seite (Ansicht ohne Styles)
15
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Struktur der Seite (Ansicht ohne Styles)
16
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Semantische Strukturierung der Seite
17
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Grundlagen
18
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
WCAG 2.0 - Universelle Gestaltungsprinzipien
19
...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
WCAG 2.0 – 12 Anforderungen
20
 Wahrnehmbar
 A...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Rechtlicher Rahmen
 Gesetze für barrierefreies ...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Standards
 Web Content Accessibility Guidelines...
Usability Professionals
Konferenz 2013 Bremen
1. Was ist Barrierefeiheit?
Mandate 376: Europäische
Beschaffungsrichtlinie ...
Usability Professionals
Konferenz 2013 Bremen
2. Planen, entwickeln, unterhalten, testen
24
Usability Professionals
Konferenz 2013 Bremen
2. Planen, entwickeln, unterhalten, testen
Zeitlicher Ablauf
 Traditionelle...
Usability Professionals
Konferenz 2013 Bremen
2. Planen, entwickeln, unterhalten, testen
Zeitlicher Ablauf
 Vier Projektp...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
27
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Vorausschauende Sicherstellung
der Barrier...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Ressourcen überprüfen
 genügend Know-How ...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Technische Basis festlegen
 Entwicklungst...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Geheimtipp: MODX
31
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Konzeption / Screendesign ist zuständig fü...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Frontend-Entwicklung ist zuständig für
 S...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
CMS-Entwicklung ist zuständig
für das Ende...
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
Test-Tools
 BITV-Test
www.bitvtest.de
 ...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
36
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
4. Contentpflege
37
Planen UnterhaltenEntwickeln
Testen
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Entwicklung Unternehmens-Styleguide
 Vermittlung eines Ges...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Verankerung nachhaltiger Barrierefeiheit
 Frühzeitige Info...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Treppauf und treppab, M.C. Escher, 1960
KVP-Team Barrierefr...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Plan
 Planungsgrundlagen:
Beschwerden & Hinweise
Benchma...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Do
 Probeweise Umsetzung
Organisatorisch oder technisch n...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Check
 Prüfung der Testumsetzung bzgl.
Gebrauchstauglichk...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Act
 Roll-out
 Update des Styleguides
 Kommunikation an
...
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
Fehlerkultur
 Fehlermanagement allein nicht ausreichend
 ...
Usability Professionals
Konferenz 2013 Bremen
5. Abschluss
 Testen, testen, testen von Tag 1 an
 Testkompetenz im Untern...
Usability Professionals
Konferenz 2013 Bremen
Brigitte Bornemann
BIT Design für Barrierefreie Informationstechnik GmbH
Röd...
Nächste SlideShare
Wird geladen in …5
×

Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts

1.597 Aufrufe

Veröffentlicht am

Präsentation zum Tutorial (UP TU 05), das von Brigitte Bornemann und Harald Weber auf der Konferenz "Interaktive Vielfalt 2013" (Mensch & Computer 2013 / Usability Professionals 2013) in Bremen gehalten wurde.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.597
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
13
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts

  1. 1. Usability Professionals Konferenz 2013 Bremen Barrierefreie Websites planen, entwickeln, unterhalten, testen Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts Brigitte Bornemann BIT Design für Barrierefreie Informationstechnik GmbH, Hamburg Harald Weber Institut für Technologie und Arbeit (ITA), Kaiserslautern Jens Elfering Sinnoptics GbR, Freiburg
  2. 2. Usability Professionals Konferenz 2013 Bremen Vorstellung  AK Barrierefreiheit der German UPA 2
  3. 3. Usability Professionals Konferenz 2013 Bremen Zielgruppe  Projektleiter und Entscheider 3
  4. 4. Usability Professionals Konferenz 2013 Bremen Agenda 1. Was ist Barrierefreiheit? 2. Planen, entwickeln, unterhalten, testen 3. Umsetzung der Barrierefreiheit 4. Contentpflege 5. Abschluss 4
  5. 5. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 5 „Behinderung ist die Unfähigkeit, sich an schlechtes Design anzupassen.“ Vanderheiden 1997  Design kann Barrieren errichten  Barrierefreiheit ist daher Gestaltungsaufgabe
  6. 6. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Beispiele guter / schlechter Barrierefreiheit  Sinnvolle / unsinnige Alternativtexte - Sponsorenlogos bei germanupa.de  Nicht ausreichender Farbkontrast - germanupa.de  Struktur der Seite – Ansicht ohne Styles - positiv: bit.informationsdesign - negativ: germanupa.de 6
  7. 7. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Sinnvolle / unsinnige Alternativtexte 7
  8. 8. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Sinnvolle / unsinnige Alternativtexte 8
  9. 9. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 9
  10. 10. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Alternativtexte für SEO ?? 10
  11. 11. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Ausreichender Helligkeitskontrast 11
  12. 12. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 12
  13. 13. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 13
  14. 14. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 14
  15. 15. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Struktur der Seite (Ansicht ohne Styles) 15
  16. 16. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Struktur der Seite (Ansicht ohne Styles) 16
  17. 17. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Semantische Strukturierung der Seite 17
  18. 18. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Grundlagen 18
  19. 19. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? WCAG 2.0 - Universelle Gestaltungsprinzipien 19  4 generelle Prinzipien ergonomisch  wahrnehmbar  bedienbar  verständlich technisch  robust  universell anwendbar alle Behinderungen alle technischen Formate wahrnehm- bar bedien- bar verständlich robust
  20. 20. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? WCAG 2.0 – 12 Anforderungen 20  Wahrnehmbar  Alternativtexte  Synchrone Untertitel  Anpassungsfähig an verschiedene Darstellungsmodi  Kontrastreich  Verständlich  Leseverständnis fördern (Einfache Sprache)  Konsistente Darstellung  Eingabehilfen  Bedienbar  Tastaturbedienbar  Genügend Zeit  Kein Flimmern (Epilepsiegefahr)  Übersichtliche Navigation  Robust  Kompatibel mit allen Browsern und mit Hilfstechniken
  21. 21. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Rechtlicher Rahmen  Gesetze für barrierefreies Internet in Deutschland BGG Behindertengleichstellungsgesetz BITV Barrierefreie Informationstechnik- Verordnung  Version 2 vom 21.09.2011  Übergangsfristen bis 03.2012 / 09.2012 / 03.2014 Landesgesetze 21
  22. 22. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Standards  Web Content Accessibility Guidelines (WCAG) 2.0 Richtlinie für barrierefreie Web-Inhalte W3C Recommendation 11. Dez. 2008 Vorgänger: WCAG 1.0, 1999  Weitere Standards für Barrierefreiheit von Websites ATAG Authoring Tools Accessibility Guidelines WAI-ARIA Accessible Rich Internet Applications ISO 9141-171 Barrierefreie Software 22
  23. 23. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Mandate 376: Europäische Beschaffungsrichtlinie in Vorbereitung  Standardisierung der Anforderungen an die Barrierefreiheit von IT-Produkten und -Diensten in öffentlichen Ausschreibungen Harmonisierung nationaler Richtlinien Parallelen zu USA, Section 508 Einheitliche Testverfahren  IT im öffentlichen Dienst muss barrierefrei sein Öffentliche Kommunikation (~ BITV) Arbeitsplatzausstattung 23
  24. 24. Usability Professionals Konferenz 2013 Bremen 2. Planen, entwickeln, unterhalten, testen 24
  25. 25. Usability Professionals Konferenz 2013 Bremen 2. Planen, entwickeln, unterhalten, testen Zeitlicher Ablauf  Traditionelle Sicht  Aber: Kontinuierliche Abnahme der Barrierefreiheit nach dem ‚Abliefern‘ 25 Planen UnterhaltenEntwickeln Testen Abschluss des Auftrags & Rückzug aus dem Unternehmen
  26. 26. Usability Professionals Konferenz 2013 Bremen 2. Planen, entwickeln, unterhalten, testen Zeitlicher Ablauf  Vier Projektphasen mit jeweils unterschiedlichen Aktivitäten  Die erforderlichen Aktivitäten zur „Umsetzung von Barrierefreiheit“ (technische Barrierefreiheit) und „Contentpflege“ (inhaltliche Barrierefreiheit) werden diesen Phasen zugeordnet 26 Planen UnterhaltenEntwickeln Testen
  27. 27. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit 27
  28. 28. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Vorausschauende Sicherstellung der Barrierefreiheit  Ziel-Level festlegen – wieviel Barrierefreiheit muss sein?  Ressourcen überprüfen  Technische Basis festlegen 28 Planen UnterhaltenEntwickeln Testen
  29. 29. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Ressourcen überprüfen  genügend Know-How im Haus und bei der Agentur  Langfristiges Engagement vorbereiten  Erblasten Legacy Tools  Editor nicht geeignet für semantische Strukturierung  …. Legacy-Content ohne semantische Strukturierung  Überschriften, Absätze 29
  30. 30. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Technische Basis festlegen  Entwicklungstools,  Typo3 als CMS mit hoher Anforderung an Spezialwissen  Contao  JSP  Produktionstools  Online- HTML-Editor geeignet für strukturierten Content? 30
  31. 31. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Geheimtipp: MODX 31
  32. 32. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Konzeption / Screendesign ist zuständig für  Anwendungskonzept, Content-Strukturen Wie umfangreich, Navigationsstrukturen, Sitemap, Suchfunktion  Wie soll es aussehen? Bei Bedienung? Farbkontraste, Schriftgrößen Aktueller Standort, aktueller Menüpunkt sichtbarer Fokus  Beispiel: Tastaturfokus in g-upa-Website  Konzept für Content in Leichter Sprache / Gebärdensprache Was muss übersetzt werden? Wie sind die Zusatzangebote eingebunden?  Beispiel: Einfach teilhaben http://www.einfach-teilhaben.de/DE/StdS/Home/stds_node.html 32
  33. 33. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Frontend-Entwicklung ist zuständig für  Standardkonforme Umsetzung des Designs  Bereitstellung der Darstellungsmuster in HTML / CSS / JS  Schnittstelle zu den Content-Strukturen  Bisher der Schwerpunkt in der Qualifizierung für barrierefreies Webdesign  In der Masse nur sporadisches Wissen vorhanden Unterstützung durch barrierefreien HTML-Master 33 Planen UnterhaltenEntwickeln Testen
  34. 34. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit CMS-Entwicklung ist zuständig für das Endergebnis  Struktur der Website  Struktur der Seiten  Eingabemuster / Masken für den Redakteur  Häufig der Flaschenhals in der Entwicklung barrierefreier Websites. Unterstützung durch Entwicklungsbegleitenden BITV-Test und Workshops 34
  35. 35. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Test-Tools  BITV-Test www.bitvtest.de  Web-Checkliste der German UPA für Usability-Professionals  Easy Checks für Entscheider http://www.w3.org/WAI/eval/preliminary  Beispiel: Labels für Formularfelder 35 Planen UnterhaltenEntwickeln Testen
  36. 36. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege 36
  37. 37. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege 4. Contentpflege 37 Planen UnterhaltenEntwickeln Testen
  38. 38. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Entwicklung Unternehmens-Styleguide  Vermittlung eines Gestaltungsstandards  Nicht beschränkt auf visuelle Aspekte  Redakteurshandbuch als praktische Arbeitshilfe  Überprüfbar und auditierbar  Aber: Existenz eines Styleguides nicht ausreichend 38 Planen UnterhaltenEntwickeln Testen
  39. 39. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Verankerung nachhaltiger Barrierefeiheit  Frühzeitige Information der Projektleitung (Kundenseite) Barrierefreiheit braucht Pflege Bedeutung des Content Prüfung ob bereits KVP-Strukturen vorhanden OK der Unternehmensleitung für Einrichtung KVP-Team einholen 39 Planen UnterhaltenEntwickeln Testen
  40. 40. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Treppauf und treppab, M.C. Escher, 1960 KVP-Team Barrierefreiheit initiieren Konformitätsprüfung  Kontinuierliche Verbesserungen aufgrund von internen und externen Rückmeldungen  Teilnehmer: Öffentlichkeitsarbeit, Corporate Identity / Corporate Design, Content-Redakteure, Autoren, Qualitätsmanagementbeauftragte 40 Planen Testen UnterhaltenEntwickeln
  41. 41. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Plan  Planungsgrundlagen: Beschwerden & Hinweise Benchmarks mit anderen Websites Regelmäßige interne Audits / Testungen  Weiterentwicklungsvorschläge /-alternativen Technische Veränderungen Organisatorische Veränderungen  Abstimmung mit Designern, PR, CI/CD, Leitung 41
  42. 42. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Do  Probeweise Umsetzung Organisatorisch oder technisch nachentwickeln Interne oder externe Ressourcen  Umformulierungsvorschläge erstellen  Gute / schlechte Beispiele zusammenstellen  Prüfinstrument / -kriterien formulieren / aktualisieren 42
  43. 43. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Check  Prüfung der Testumsetzung bzgl. Gebrauchstauglichkeit Validität  D.h.: verständlich, eindeutig und wirksam? 43 Do
  44. 44. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Act  Roll-out  Update des Styleguides  Kommunikation an Redakteure Autoren Schulungsverantwortliche Entwickler  Ggf. Nachschulungen  Ggf. Anpassung älteren Contents an den neuen Standard angehen 44
  45. 45. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege Fehlerkultur  Fehlermanagement allein nicht ausreichend  Fehler als Ausgangspunkt für individuelles und organisationales Lernen nutzen  Ansatzpunkte: Mensch Organisationsabläufe Technik 45
  46. 46. Usability Professionals Konferenz 2013 Bremen 5. Abschluss  Testen, testen, testen von Tag 1 an  Testkompetenz im Unternehmen selber entwickeln  Nachhaltige Barrierefreiheit braucht auch organisatorische Maßnahmen „Barriefreibeauftragter“ im Qualitätsmanagement 46
  47. 47. Usability Professionals Konferenz 2013 Bremen Brigitte Bornemann BIT Design für Barrierefreie Informationstechnik GmbH Rödingsmarkt 43, 20459 Hamburg bb@bit-informationsdesign.de Harald Weber Institut für Technologie und Arbeit (ITA) Trippstadter Straße 110, 67663 Kaiserslautern harald.weber@ita-kl.de Jens Elfering Sinnoptics GbR Erwinstraße 6, 79102 Freiburg elfering@sinnoptics.de Kontakt

×