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

Zielgruppe

Projektleiter und Entscheider

Agenda

1. Was ist Barrierefreiheit?

2. Planen, entwickeln, unterhalten, testen

3. Umsetzung der Barrierefreiheit

4. Contentpflege

5. Abschluss

1. Was ist Barrierefeiheit?

„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

Alternativtexte für SEO ??

Ausreichender Helligkeitskontrast

Struktur der Seite (Ansicht ohne Styles)

Semantische Strukturierung der Seite

Grundlagen

WCAG 2.0 - Universelle Gestaltungsprinzipien

4 generelle Prinzipien

ergonomisch

wahrnehmbar

bedienbar

verständlich

technisch

robust

universell anwendbar

alle Behinderungen

alle technischen Formate

wahrnehm-

bedien-

verständlich

robust

WCAG 2.0 – 12 Anforderungen

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

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

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

Zeitlicher Ablauf

Traditionelle Sicht

Aber: Kontinuierliche Abnahme der Barrierefreiheit nach dem

‚Abliefern‘

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

Testen

Vorausschauende Sicherstellung

der Barrierefreiheit

Ziel-Level festlegen – wieviel Barrierefreiheit muss sein?

Ressourcen überprüfen

Technische Basis festlegen

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

Technische Basis festlegen

Entwicklungstools,

Typo3 als CMS mit hoher Anforderung an Spezialwissen

Contao

Produktionstools

Online- HTML-Editor geeignet für strukturierten Content?

Geheimtipp: MODX

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

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

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

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

Testen

4. Contentpflege

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

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

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

Planen

Testen

Unterhalten Entwickeln

4. Contentpflege

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

4. Contentpflege

Probeweise Umsetzung

Organisatorisch oder technisch nachentwickeln

Interne oder externe Ressourcen

Umformulierungsvorschläge erstellen

Gute / schlechte Beispiele zusammenstellen

Prüfinstrument / -kriterien formulieren / aktualisieren

4. Contentpflege

Prüfung der Testumsetzung bzgl.

Gebrauchstauglichkeit

Validität

D.h.: verständlich, eindeutig und wirksam?

4. Contentpflege

Roll-out

Update des Styleguides

Kommunikation an

Redakteure

Autoren

Schulungsverantwortliche

Entwickler

Ggf. Nachschulungen

Ggf. Anpassung älteren Contents an den neuen Standard

angehen

4. Contentpflege

Fehlerkultur

Fehlermanagement allein nicht ausreichend

Fehler als Ausgangspunkt für individuelles und

organisationales Lernen nutzen

Ansatzpunkte:

Mensch

Organisationsabläufe

Technik

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

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...

ansicht ohne styles

struktur der seite

ist barrierefeiheit

germanupa

ita

planen

entwickeln

content

Technology

lebenszyklus alle gebäude unterliegen einem zyklus

ganzheitliches testmanagement im software-lebenszyklus

zwei freunde unterhalten sich über ihren alltag

lebenszyklus der schweizer banknoten.en

fmk 2013, barrierefreie software, patrick risch

factbook barrierefreie bÄder - villeroy & boch · 2019. 5....

bauen im lebenszyklus

lingulab - verständliche und barrierefreie texte

barrierefreie homepage

lebenszyklus-strategien bei säugetieren

mini wissen lebenszyklus pinguine€¦ · lesen -...

ablauf der tagung barrierefreie kommunikation · 2018. 10....

barrierefreie websites: die 10 wichtigsten tipps

lebenszyklus-orientierte gebäudeplanung durch integrale...

barrierefreie ausflugsziele, freizeitmöglichkeiten in der...

formvollendet - fortgeschrittene techniken für...

komfortable barrierefreie wohnung im mehrgenerationenhaus...

themenschwerpunkt: barrierefreie...

4.5. barrierefreie gui-gestaltung - schmiedecke...tfh berlin...

barrierefrei informieren und kommunizieren barrierefreie...