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
47
Embed
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssicherung für Barrierefreiheit im Lebenszyklus eines Webprojekts
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.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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