barrierefreie website planen, entwickeln, unterhalten, testen. qualitätssicherung fü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



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





7





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 Unterhalten Entwickeln

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

Unterhalten Entwickeln



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

[email protected]

Harald Weber

Institut für Technologie und Arbeit (ITA)

Trippstadter Straße 110, 67663 Kaiserslautern

[email protected]

Jens Elfering

Sinnoptics GbR

Erwinstraße 6, 79102 Freiburg

[email protected]

Kontakt

barrierefreie website planen, entwickeln, unterhalten, testen. qualitätssicherung für...

Technology

ansicht ohne styles

struktur der seite

ist barrierefeiheit

germanupa

ita

planen

entwickeln

content