Barrierefreiheit
bei digitalen Produkten
Organisatorisches
- Folien online unter https://jk.is/mpz
- Barrierefreiheit im Vortrag: Bitte Hinweis bei Unverständlichkeit / Unklarheit
- Fokus auf Websites, vieles aber auch anwendbar auf andere digitale Produkte
- Wortmeldungen jederzeit gerne!
Wer ist der Kerl?
- › erste Codezeilen als 10-Jähriger, Websites seit 1995
- › Ausbildung im Architektur- und Designumfeld
- › Web- & Werbeagentur tollwerk in Nürnberg seit 2000
- › qualifizierter BITV- / WCAG-Prüfer im BITV-Test-Prüfverbund
- › Initiator des (Accessibility Clubs, CoderDojo Nürnberg …)
Was redet der eigentlich?
- 1. Barrierefreiheit im Web
-
- Was, für wen und warum?
- Rechtslage & Regelwerke
- 2. Barrierefreiheit umsetzen
-
- Anforderungen gem. BITV 2.0
- Organisation, Design, Technik & Inhalt (ein kleiner Auszug)
Barrierefreiheit im Web
Was, für wen und warum?
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Barrierefreies Internet sind Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können.
Nutzende
Um wen geht es eigentlich?
Behinderungen (Art)
- Sinnesbehinderungen
- z.B. Blindheit, Sehschwächen, Fehlsichtigkeit, Gehörlosigkeit, Taubblindheit
- Körperliche Behinderungen
- z.B. motorische Einschränkungen
- Sprachbehinderungen
- in Laut und / oder Schrift
- Kognitive Behinderungen
- z.B. Lernbehinderung, mangelndes Abstraktionsvermögen, Legasthenie, Rechenschwäche
Behinderungen (Dauer)
- Permanente Behinderungen
- definierende körperliche Eigenschaft einer Person
- Temporäre Behinderung
- Verletzung, Krankheit oder kurzzeitige Behinderung
- Situative Behinderung
- Umgebungen oder Situationen, die einschränken
Spezielle Nutzende
- mobile Nutzende (eingeschränkte Internetverbindung, schwache technische Ausstattung, eingeschränkter Funktionsumfang)
- unerfahrene Nutzende
- Senioren & Kinder
- Nicht-Muttersprachliche
- Suchmaschinen / Robots
- …
Alle sind betroffen!
- mindestens in bestimmten (Lebens)Situationen!
Barrieren
Was sind Hindernisse und wer ist zuständig?
Design-Barrieren
beruhen auf unflexibler oder mangelhafter Gestaltung
- liegen im Verantwortungsbereich von Webdesigner*innen
- Richtlinien zur Beseitigung sind die WCAG
Design-Barrieren: Beispiele
- unübersichtliches Layout
- mangelhafte Textgestaltung (Schrift, Gliederung)
- schwierige Farb- oder Kontrastverhältnisse
- schlechte Nutzerführung, zu komplexe Abläufe (UX)
- CAPTCHA
Technisch-funktionale Barrieren
beruhen auf verwendeten Techniken oder Programmierungen, Hard- und Softwareeinschränkungen (auch durch assistive Technologien) oder Problemen bei der Datenübertragung
- liegen im Verantwortungsbereich von Webentwickler*innen und -dienstleistenden
- Richtlinien zur Beseitigung sind die BITV, WCAG, UUAG, ATAG
Technisch-funktionale Barrieren: Beispiele
- fehlende oder fehlerhafte Struktur & Semantik (HTML)
- mangelhafte Tastaturbedienbarkeit
- schlechte technische oder perzeptive Performance
- mangelnde Fehlertoleranz und fehlende Rückfallmechanismen
- unnötig große Datenmengen (ggf. auch finanzielle Barriere)
- Hard- und Softwareanforderungen, die Clientsysteme u. U. nicht abbilden können (Leistung, Bildschirmgröße, Sensoren, Ein- & Ausgabegeräte)
Redaktionelle & inhaltliche Barrieren
beruhen auf unzureichender redaktioneller oder struktureller Aufbereitung des Inhalts und seiner Umsetzung für das Internet
- liegen im Verantwortungsbereich von Webredaktionen
- Hilfen zur Beseitigung sind z.B. europäische Richtlinien für leichte Lesbarkeit, WCAG
Redaktionelle & inhaltliche Barrieren: Beispiele
- sprachliche Komplexität (verschachtelte Sätze, umständliche Formulierung, Fachbegriffe)
- Bilder und Grafiken ohne alternative Beschreibungen, Text in Bildern
- Video und Audio ohne alternative Aufbereitungen
Organisatorische Barrieren
sind bedingt durch organisatorische Umstände und das Umfeld, in dem Entscheidungen getroffen werden
- liegen im Verantwortungsbereich von Auftraggebenden und Projektleitenden
- benötigen Bewusstmachung, Aufklärung und Priorisierung
Organisatorische Barrieren: Beispiele
- mangelndes Bewusstsein und fehlender Handlungswille in Sachen Barrierefreiheit
- mangelnde technische Fertigkeiten
- Angst vor hässlichen, eingeschränkten Ergebnissen
- fehlendes Budget (z.B. für Gebärdensprach-Videos, alternative Aufbereitungen, einfache Sprache)
Assistive Technologien
Gängige Hilfsmittel zur Unterstützung
Assistive Technologien
- Sinnesbehinderungen
-
- Screenreader (akkustische Ausgabe + Braille-Anzeige)
- Bildschirmlupe
- Körperliche Behinderungen
-
- Spezielle Eingabegeräte (Einhandtastatur, vergrößerte Tastatur, Mouth Stick, Switch Control, Sip-and-puff Control, Sprachsteuerung)
- Kognitive Behinderungen
-
- Leichte / Einfache Sprache
- Illustrationen & Schaubilder
Gründe für Barrierefreiheit
Warum müssen wir uns kümmern?
Weil …
- wir mit unseren digitalen Produkten möglichst viele Menschen erreichen möchten
- wir alle irgendwann selbst betroffen sind
- wir damit einen wichtigen Beitrag zur einer inklusiven Gesellschaft leisten
- sich die Gesetzeslage ändert
Gesetzeslage
Es ist Bewegung in der Sache!
International
- Vorreiter USA, Großbritannien
- USA: aktuell etwa eine ADA-Klage pro (Arbeits)Stunde (Quelle)
Europa
- EU-Richtlinie 2016/2102 über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen (seit Dezember 2016)
- Gemäß des EAA (EU-Richtlinie 2019/882) gibt es ab 28. Juni 2025 eine einklagbare Verpflichtung für erste privatwirtschaftliche Unternehmen (verabschiedet im Frühjahr 2019)
- Vorreiter Österreich: Barrierefreiheit ist Pflicht für Online-Shops (seit 2016)
Deutschland
- Barrierefreiheit ist seit 2002 Pflicht für öffentlich zugängliche Internetangebote der Bundesverwaltung gem. BITV (seit 2002)
- Seit September 2018 Pflicht für alle öffentlichen Stellen (z.B. Landesministerien, Jugendämter, Polizeibehörden, Schulen, städtische Krankenhäuser, Sparkassen, Industrie- und Handelskammern, etc.) gemäß EU-Richtlinie 2016/2102; unterschiedliche Umsetzungsfristen
- Seit 25. Mai 2019 bezieht sich die BITV im Wesentlichen auf die WCAG 2.1
WCAG-Adoption
Barrierefreiheit umsetzen
Anforderungen, Herangehensweise & grundlegende Techniken
Anforderungen BITV 2.0
- technisch und gestalterisch barrierefreie Website mit WCAG AA Konformität
- Erläuterungen in Leichter Sprache und Gebärdensprache (auf der Startseite)
- Erklärung zur Barrierefreiheit inkl. Feedback-Mechanismus
- auch Nicht-HTML-Dokumente müssen barrierefrei sein (z.B. Office-Dokumente, PDF)
- Veröffentlichungen in Sozialen Medien sind barrierefrei zu gestalten
Warnung
Organisatorische Maßnahmen
Ein kleiner Auszug …
Sensibilisierung
- Bewusstmachung auf der Entscheider*innenebene
- Aufklärung: Barrierefreie digitale Angebote sind NICHT:
- häßlich (im Design eingeschränkt)
- primitiv (in der Funktion eingeschränkt)
- unbezahlbar
- barrierefreie digitale Angebote nutzen nicht nur Behinderten, sondern allen Menschen (und sogar manchen Maschinen)
Priorisierung
- Barrierefreiheit ist kein „Add-On“
- viele Disziplinen sind beteiligt (Konzept, Design, Umsetzung, Redaktion)
→ Umsetzung & Redaktion können Konzept- & Designprobleme nicht beheben! - Aufwandsexplosion bei nachträglichem Ansatz (bishin zur kompletten Untauglichkeit)
Was kostet ein Fehler?
Beauftragung
- Auswahl von kundigen Dienstleister*innen
- Barrierefreiheit thematisieren und zum Auswahlkriterium machen
- Kompetenz nachweisen lassen: Referenzen, Zertifizierung (z.B. IAAP)
- Zielsetzung im Auftrag konkret artikulieren, z.B.
- BITV 2.0 / WCAG AA Konformität
- Ggf. auf Zertifikat hinarbeiten, z.B. BIK BITV-Test
- Selbsttest ist möglich!
Budgetierung
- 90% aller Maßnahmen sind einfach nur „gutes Handwerk“ und kein tatsächlicher Mehraufwand während der Umsetzung
- Ausnahmen, z.B. Aufbereitung von Medienalternativen
- Captions & Audiodeskriptionen für Videos
- Transskripte für Video & Audio
- Gebärdensprachvideos
- Texte in einfacher / leichter Sprache
- WICHTIG: Es werden Experten mit langjähriger Erfahrung benötigt
→ Ausbildung & Expertise müssen honoriert werden (wie überall)!
Kontinuität & Schulung
- fortlaufende Sensibilisierung & Ertüchtigung aller Beteiligten
- dauerhafte Qualitätssicherung in der Redaktion (Texte, Bilder, etc.)
- regelmäßige Prüfung, technische Aktualisierung und ggf. Rezertifizierung
- jährliche Prüfung und Anpassung der Barrierefreiheitserklärung
Konzept & Design
Ein kleiner Auszug …
Inclusive Design Principles
- gleichwertiges Erlebnis bieten
- Nutzungssituation berücksichtigen
- Konsistenz wahren
- Kontrolle geben
- Auswahl bieten
- Inhalte priorisieren
- Wert ergänzen
Responsive Design
- ein flexibles Design für alle Ausgabegrößen (Smartphones, Tablets, Desktop)
- wichtig für unterschiedliche Nutzungsszenarien, aber auch bei Bildschirmvergrößerung
- Pluspunkt: Rankingfaktor für Suchmaschinen
Etablierte UX-Patterns
- bewährte Design-Muster nutzen (kognitive Last reduzieren)
- exotische Experimente vermeiden und nicht „in Schönheit sterben“
- klares, gut strukturiertes Gesamtlayout; logische Reihenfolge
- Orientierung geben: Wo befinde ich mich, was ist aktiv?
Schriftart & Textgestaltung
- ausreichend große Schriften
- Schriftgröße, Laufweite und Zeilenabstand müssen harmonieren
- lesbare Schriftarten (Dyslexie, kognitive Behinderungen)
Farben & Kontraste
- zweckmäßige, reduzierte Farbpalette
- wichtige Information oder Statusänderungen niemals nur über Farben kommunizieren (z.B. „grüne Schaltfläche“, Farbwechsel bei Hover), immer zusätzliche Merkmale (Text, Form, Größe, grafische Elemente)
- Farbfehlsichtigkeiten berücksichtigen: 8-9% der deutschen Männer sind betroffen
- Mindestkontraste: zwischen Texten / Objekten, ihren Umgebungen und Zuständen
- High-Contrast-Modus: Funktion des Betriebssystems
Medien & Animation
- zweckmäßiger Medieneinsatz:
Ablenkung (ADHS) ↔ als anschauliche Alternative (kognitive Behinderungen) - Verzicht auf „Autoplay“, Möglichkeit zur gezielten Steuerung
- sparsamer, bewusster Einsatz von Animationen; bestenfalls abschaltbar
Technik & Funktion
Ein kleiner Auszug …
Validität & Semantik
- HTML ist die technische Grundlage jeder Website
- HTML verleiht Inhalten Bedeutung (Semantik)
→ macht einfachen Text zur Überschrift, zum Absatz, zur Liste … - assistive Technologien sind auf Bedeutung angewiesen
- fachkundige, valide HTML-Nutzung ist die Basis für Barrierefreiheit im Web
→ Umsetzer*innen müssen ihr Handwerk beherrschen!
Links & Buttons
- Links führen zu einer Ressource
- Buttons lösen eine Aktion aus (innerhalb der aktuellen Ressource)
- Signifikanter Unterschied in Funktion & Bedienung, dennoch häufig falscher Einsatz
Formulare
- Feedback-Kanal Nr. 1 zwischen Internetnutzer*innen und -anbieter*innen
- ca. 40% aller automatisiert ermittelbaren Barrierefreiheitsprobleme haben ihre Ursache bei Formularen
- Formularfelder benötigen stets eine aussagekräftige Beschriftung
- logische Reihenfolge und zweckmäßige Darstellung von Formularfeldern
- aussagekräftige und hilfreiche Fehlermeldungen
- …
Tastaturbedienbarkeit
- alternative Eingabemethoden berücksichtigen
- durchgängige Tastaturbedienbarkeit sicherstellen
- viele assistive Technologien nutzen oder simulieren Tastatursteuerung
- z.B. nicht auf Hover-Verfügbarkeit verlassen (nicht verfügbar auf Touchscreens)
- Tastaturfokus muss immer deutlich sichtbar sein
→ WICHTIG: Nicht alle Screenreader- oder Tastaturnutzer*innen sind blind! - einfach mal Maus abstöpseln und selbst testen ;)
Screenreader-Demo
Präferenzen respektieren
- keine Annahmen treffen, Nutzer*innen selbst bestimmen lassen
- Seitenzoom nicht verhindern, Bildschirmorientierung nicht erzwingen
- präferierte Schriftarten & -größe (Textzoom)
- reduzierte Animationen
- „Dark Mode“ (individuelles Farbschema)
- …
Inhalt & Redaktion
Ein kleiner Auszug …
Verständlichkeit
- zielgruppengerechtes Sprachniveau
- so einfach wie möglich und nur so komplex wie nötig formulieren
- gute Textstruktur mit sinnvollen Absatzlängen und Zwischenüberschriften
Einfache / Leichte Sprache
- Sprach- und Rechtschreibregeln sowie Empfehlungen zu Typografie und Mediengebrauch
- zielt auf leichte Verständlichkeit
- nicht 100% streng standardisiert
- Verein Netzwerk Leichte Sprache
- Ratgeber des Bundes-Ministeriums für Arbeit und Soziales
Alternativtexte
- Bilder und Grafiken benötigen einen redaktionell gepflegten Alternativtext, der als Ersatz dienen kann
- Faustregel: Kurz, kompakt, mit essenziellen Infos
- Floskeln vermeiden (z.B. „Foto von …“)
- Hilfestellung beim Schreiben: An alt Decision Tree
- Pluspunkt: SEO
Alternative Medien
- Untertitel („Captions“) für vertonte Videos
- Audiodeskriptionen für Videos
- Transkripte für Video & Audio
- Gebärdensprachvideos für Audio & vertonte Videos
Aussagekräftige Beschriftungen
- Link- und Überschriftenlisten sind wichtiges Navigationshilfsmittel für assistive Technologien
- Links und Überschriften so formulieren, dass sie auch außerhalb ihres Kontexts funktionieren
- Negativbeispiele „mehr“, „weiterlesen“
Sprache
- allgemeine Sprachangabe für jedes Dokument
- individuelle Angabe für einzelne Fremdwörter
- hilft assistiven Technologien z.B. bei der Aussprache
- Rechtschreibkorrektur in Formularen
- automatische Übersetzung
Zusammenfassung
Thesen zum Abschluss
Alle sind gefragt!
… dann klappt's auch!
(Symbolbild, mit Vorsicht zu genießen)
Barrierefreiheit …
- ist weder schwer, noch hässlich oder beschränkt
- beginnt mit einem „Mind Shift“
- ist bereits mit einfachen Mitteln grundlegend herzustellen
- ist kein gut gemeintes „On Top“-Feature, sondern unbedingtes Qualitätskriterium
The biggest misconception about accessibility is that by adding it you're doing somebody a favor. You're not, you're doing your job. #a11y
— james williamson (@jameswillweb) 20. Oktober 2016
Digitale
Kultur-
vermittlung
Bayerische Staatsministerium für Wissenschaft und Kunst
