Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für...
-
Upload
markus-erle -
Category
Technology
-
view
741 -
download
0
description
Transcript of Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für...
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
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, testen
3. Umsetzung der Barrierefreiheit
4. Contentpflege
5. Abschluss
4
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
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
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
4 generelle Prinzipien
ergonomisch
wahrnehmbar
bedienbar
verständlich
technisch
robust
universell anwendbar
alle Behinderungen
alle technischen Formate
wahrnehm-
bar
bedien-
bar
verständlich
robust
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
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
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
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
Usability Professionals
Konferenz 2013 Bremen
2. Planen, entwickeln, unterhalten, testen
24
Usability Professionals
Konferenz 2013 Bremen
2. Planen, entwickeln, unterhalten, testen
Zeitlicher Ablauf
Traditionelle Sicht
Aber: Kontinuierliche Abnahme der Barrierefreiheit nach dem
‚Abliefern‘
25
Planen Unterhalten Entwickeln
Testen
Abschluss des Auftrags &
Rückzug aus dem Unternehmen
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 Unterhalten Entwickeln
Testen
Usability Professionals
Konferenz 2013 Bremen
3. Umsetzung der Barrierefreiheit
27
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 Unterhalten Entwickeln
Testen
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
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
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ü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
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 Unterhalten Entwickeln
Testen
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
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 Unterhalten Entwickeln
Testen
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
36
Usability Professionals
Konferenz 2013 Bremen
4. Contentpflege
4. Contentpflege
37
Planen Unterhalten Entwickeln
Testen
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 Unterhalten Entwickeln
Testen
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 Unterhalten Entwickeln
Testen
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
Unterhalten Entwickeln
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
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
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
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
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
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
Usability Professionals
Konferenz 2013 Bremen
Brigitte Bornemann
BIT Design für Barrierefreie Informationstechnik GmbH
Rödingsmarkt 43, 20459 Hamburg
Harald Weber
Institut für Technologie und Arbeit (ITA)
Trippstadter Straße 110, 67663 Kaiserslautern
Jens Elfering
Sinnoptics GbR
Erwinstraße 6, 79102 Freiburg
Kontakt