Your SlideShare is downloading. ×
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

559
views

Published on

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 …

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.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
559
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Usability Professionals Konferenz 2013 Bremen Vorstellung  AK Barrierefreiheit der German UPA 2
  • 3. Usability Professionals Konferenz 2013 Bremen Zielgruppe  Projektleiter und Entscheider 3
  • 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. 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. 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. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Sinnvolle / unsinnige Alternativtexte 7
  • 8. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Sinnvolle / unsinnige Alternativtexte 8
  • 9. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 9
  • 10. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Alternativtexte für SEO ?? 10
  • 11. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Ausreichender Helligkeitskontrast 11
  • 12. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 12
  • 13. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 13
  • 14. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? 14
  • 15. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Struktur der Seite (Ansicht ohne Styles) 15
  • 16. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Struktur der Seite (Ansicht ohne Styles) 16
  • 17. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Semantische Strukturierung der Seite 17
  • 18. Usability Professionals Konferenz 2013 Bremen 1. Was ist Barrierefeiheit? Grundlagen 18
  • 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. 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. 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. 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. 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. Usability Professionals Konferenz 2013 Bremen 2. Planen, entwickeln, unterhalten, testen 24
  • 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. 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. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit 27
  • 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. 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. 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. Usability Professionals Konferenz 2013 Bremen 3. Umsetzung der Barrierefreiheit Geheimtipp: MODX 31
  • 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. 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. 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. 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. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege 36
  • 37. Usability Professionals Konferenz 2013 Bremen 4. Contentpflege 4. Contentpflege 37 Planen UnterhaltenEntwickeln Testen
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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