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

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

Vorstellung
 AK Barrierefreiheit der German UPA
2

Zielgruppe
 Projektleiter und Entscheider
3

Agenda
1. Was ist Barrierefreiheit?
2. Planen, entwickeln, unterhalten, testen
3. Umsetzung der Barrierefreiheit
4. Contentpflege
5. Abschluss
4

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

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

Sinnvolle / unsinnige Alternativtexte
7

Sinnvolle / unsinnige Alternativtexte
8

9

Alternativtexte für SEO ??
10

Ausreichender Helligkeitskontrast
11

12

13

14

Struktur der Seite (Ansicht ohne Styles)
15

Struktur der Seite (Ansicht ohne Styles)
16

Semantische Strukturierung der Seite
17

Grundlagen
18

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

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

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

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

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

Zeitlicher Ablauf
 Traditionelle Sicht
 Aber: Kontinuierliche Abnahme der Barrierefreiheit nach dem
‚Abliefern‘
25
Planen UnterhaltenEntwickeln
Testen
Abschluss des Auftrags &
Rückzug aus dem Unternehmen

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
Testen

27

Vorausschauende Sicherstellung
der Barrierefreiheit
 Ziel-Level festlegen – wieviel Barrierefreiheit muss sein?
 Ressourcen überprüfen
 Technische Basis festlegen
28
Testen

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

Technische Basis festlegen
 Entwicklungstools,
 Typo3 als CMS mit hoher Anforderung an Spezialwissen
 Contao
 JSP
 Produktionstools
 Online- HTML-Editor geeignet für strukturierten Content?
30

Geheimtipp: MODX
31

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

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
Testen

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

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
Testen

4. Contentpflege
36

4. Contentpflege
4. Contentpflege
37
Testen

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
Testen

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
Testen

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

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

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

4. Contentpflege
Check
 Prüfung der Testumsetzung bzgl.
Gebrauchstauglichkeit
Validität
 D.h.: verständlich, eindeutig und wirksam?
43
Do

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

4. Contentpflege
Fehlerkultur
 Fehlermanagement allein nicht ausreichend
 Fehler als Ausgangspunkt für individuelles und
organisationales Lernen nutzen
 Ansatzpunkte:
Mensch
Organisationsabläufe
Technik
45

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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts

Ähnlich wie Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts (20)

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