Die einfachste funktionierende Lösung muss das Erreichen eines positiven Nutzererlebnisses für jeden Nutzer ermöglichen. Mit der Aufnahme von nur 10 Praxistipps zur Barrierefreiheit und Software-Ergonomie in den Entwicklungsalltag kann jeder Web- und Softwareentwickler zu dieser Vision beitragen. Das Entwickeln von Softwarelösungen - die super funktionieren, die von den Anwendern gern genutzt und von allen Nutzern, auch beeinträchtigten oder älteren, bedient werden können - ist kein Hexenwerk. Diese Session tritt den Beweis an!

1. Digitale Barrierefreiheit
Quicktipps Einfache Lösungen mit großer Wirkung

2. Der Mensch als Nutzer
digitaler Anwendungen
2

3. beim Online-Kauf * Click-Away-Pound-Survey 2016
71% 85% 81%
Seitenabsprünge
Kunden mit besonderen
Anforderungen verlassen
eine Seite mit Barrieren
und kehren sehr selten
wieder zurück.
Kundenbindung
Die meisten
beeinträchtigten Kunden
nutzen für ihre Einkäufe
bekannte barrierefreie
Seiten.
Gute Bewertung
Kunden mit besonderen
Anforderungen bewerten
barrierefreie Seiten höher
als die Kosten von
Produkten.
http://www.clickawaypound.com/cap16finalreport.html
Die Kunden, die wegklicken,
haben eine geschätzte
Kaufkraft von
£ 11,75 Milliarden allein in
Großbritannien.
Das sind fast 10% der
gesamten britischen Online-
Ausgaben im Jahr 2016.
Verhalten beeinträchtigter Nutzer
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 3

4. 4
Vielfältige Krankheitsbilder
▪ Farbfehlsichtigkeit
▪ Verringerte Sehstärke
▪ Grauer & grüner Star
▪ Diabetische
Netzhauterkrankungen
▪ Altersabhängige Makula-
Degeneration
Sehbeeinträchtigungen
Wichtigste Maßnahmen
▪ Hohe Farbkontraste
▪ gut lesbare Schriftgrößen
▪ Individuelle
Schriftvergrößerung
berücksichtigen
▪ Gut sichtbarer Fokus
▪ Informationen nicht nur durch
Farbe vermitteln

5. 5
Blindheit
Wichtigste Maßnahmen
▪ Alternativtexte für grafische
Inhalte
▪ Abbildung von Text- und
Layout-Strukturen auf Code-
Ebene
▪ Tastatursteuerung ermöglichen
▪ Aussagekräftig beschriftete
Links und Überschriften
verwenden
Hilfsmittel
▪ Screenreader
▪ Braillezeile
▪ Kopfhörer

6. 6
Motorische
Beeinträchtigung
Wichtigste Maßnahmen
▪ Tastatursteuerung ermöglichen
▪ Touch- und Klickflächen
großzügig gestalten
▪ Produkte mit großen Tasten
anbieten
Vielfältige Krankheitsbilder
▪ deformierte oder fehlende Gliedmaßen
▪ Geschädigte Knochen (bspw. Glasknochen)
▪ Geschädigte Gelenke (bspw. Arthritis oder Arthrose)
▪ Geschädigte Muskeln (bspw. Dystrophie oder Spasmus)
▪ Geschädigte Hirnfunktion (bspw. Tremor oder Ticks)

7. 7
Hörschädigung &
Gehörlosigkeit
Wichtigste Maßnahmen
▪ Verschiedene
Kommunikationswege
bereitstellen
▪ Videos untertiteln oder mit
Gebärdensprache anbieten
▪ Informationen in Leichter
Sprache anbieten
▪ Text gut strukturieren
Unterscheidung
▪ Schwerhörigkeit
▪ Resthörigkeit
▪ Gehörlos / taub

8. 8
Kognitive Beeinträchtigung
Wichtigste Maßnahmen
▪ Konsistente Gestaltung
▪ Inhalte kurz, klar und einfach
halten
▪ Redewendungen und
Sinnbilder vermeiden
▪ Beim Vermeiden von Fehlern
unterstützen
▪ Systemmeldungen klar und
einfach formulieren.
Verschiedene Auswirkungen
▪ Neurologische
Beeinträchtigungen
▪ Lernbeeinträchtigungen
▪ Entwicklungsstörungen
▪ Psychische Funktionsstörungen

9. Gesetze, Normen,
Richtlinien
9

10. 10"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019
Gesetze, Normen und Richtlinien
Usability & Accessibility als Anforderung
2018: Neues BGG auf
Grundlage der EU-Richtlinie
2016/2102
über den barrierefreien Zugang
zu den Websites und mobilen
Anwendungen öffentlicher
Stellen
2019: EAA (European
Accessibility Act)
über die Barrierefreiheit von
Produkten und Dienst-
leistungen von Wirtschafts-
akteuren der EU
2018: Neue internationale
Web-Richtlinien zur
Barrierefreiheit (WCAG 2.1)
SGB IX §164
Über die Verpflichtung der
Arbeitgeber zur Herstellung
barrierefreier Arbeitsplätze
DIN EN ISO 9241 Normen-
katalog zur Mensch-System-
Interaktion
▪ 9241:11Anforderungen an
die Gebrauchstauglichkeit
▪ 9241:12 Grundsätze der
Informationsdarstellung
▪ 9241:110 Dialogprinzipien
▪ 9241:171 Leitlinien für die
Zugänglichkeit von Software
Arbeitsschutzgesetz
Die Arbeitsstättenverordnung
regelt unter anderem die
Ergonomie am Arbeitsplatz.
DGUV Information 215-450
Über die Nutzungsqualität von
Softwareprodukten und die
Anwendung von Software im
Arbeitsprozess.
Gute Usability steigert die
Conversionsrate, senkt
Entwicklungskosten,
verringert Supportkosten
und erhöht die Effizienz
der Mitarbeiter.
Gute Accessibility steigert
die Zahl der Nutzer,
verbessert die SEO und
verringert Supportkosten
aufgrund normengerechter
Programmierung.

11. 11"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019
Barrierefreiheit wird für Produkte und Dienstleistungen
von Wirtschaftsakteuren der EU verpflichtend.
EAA – European Accessibility Act
2019
2022 2025
Umsetzung
der Richtlinie
in Deutsches Recht
Produkte und
Dienstleistungen müssen
barrierefrei sein
Verabschiedung
des EAA im
Europäischen Parlament
Produkte und
Dienstleistungen, deren
Nutzerschnittstellen,
Verpackungen,
Informationen und
Dokumentationen müssen
auf kohärente und
angemessene Weise
wahrnehmbar, bedienbar,
verständlich und robust
sein – und so für alle
Menschen nutzbar sein.

12. EAA – European Accessibility Act
Wer? Was? Warum?
Wer ist verpflichtet?
▪ alle Wirtschaftsakteure
der EU*
▪ Hersteller
▪ Einführer
▪ Händler
▪ Dienstleister
* ausgenommen sind Kleinstunternehmen
mit weniger als zehn Beschäftigten und
einem Jahresumsatz und/oder einer
Jahresbilanz von unter 2 Mio. EUR
Welche Produkte sind
betroffen?
▪ Hardware und Betriebssysteme
▪ Geräte für elektronische
Kommunikationsdienste
▪ Geräte für den Zugang zu
audiovisuellen Medien
▪ E-Book-Lesegeräte
▪ Selbstbedienungsterminals
▪ Geldautomaten
▪ Zahlungsterminals
▪ Fahrausweisautomaten
▪ Check-in-Automaten
▪ interaktive
Selbstbedienungsterminals
Welchen Risiken
verbergen sich?
▪ Ist ein
Produkt/Dienstleistung oder
die zugehörige Dokumentation
nicht konform und wird nicht
innerhalb einer angemessenen
Frist nachgebessert, wird das
Produkt nur noch
eingeschränkt bereitgestellt
oder vom nationalen und EU-
Markt genommen.
▪ Für Sicherstellung der
Barrierefreiheit von
Dienstleistungen richten die
Mitgliedstaaten eine
Überwachungsbehörde ein
und entwickeln geeignete
Durchsetzungsverfahren.
Welche Dienstleistungen
sind betroffen?
▪ elektronische Kommunikation
▪ Dienstleistungen für
audiovisuellen Medien
▪ E-Books
▪ elektronischer Handel
▪ Bankdienstleistungen
▪ folgende Elemente im Luft-,
Bus-, Schienen- und
Schiffsverkehr:
▪ Websites
▪ Web-Apps & native Apps
▪ elektronische Tickets und
Ticketdienste
▪ Informationen zum
Beförderungsdienst
▪ interaktive
Selbstbedienungsterminals
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 12

13. 2018
13
Barrierefreiheit wird für alle digitalen Anwendungen von
öffentlichen Stellen verpflichtend.
EU-RICHTLINIE 2016/2102
2019 2020
Neue Websites
öffentlicher Stellen
müssen barrierefrei
sein
Alle bestehenden
Websites öffentlicher
Stellen müssen
barrierefrei sein
Richtlinie muss im
deutschen Recht
umgesetzt sein
2020
Juli 2018
Neufassung des BGG
März 2019
Referentenentwurf BITV
Mobile Anwendungen
öffentlicher Stellen
müssen barrierefrei sein
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019

14. PROZESSE

15. 15"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019
Klassischer Entwicklungsprozess
Qualitätssicherung digitale Zugänglichkeit
Test BetriebEntwicklungKonzeptAnalyse
Anforderungsanalyse
für UX und
Barrierefreiheit
Konzept- & Design-
Review mit
Ergebnisprotokoll
Basischeck inklusive
Dokumentation
Iterative
Meilensteintests
mit Testprotokoll
Prozess-Beratung
User Requirements
Engineering
Entwickler-Workshop
Entwicklungs-
begleitende Beratung
Workshop für
Redakteure & Autoren
Expertenevaluation
mit Statusdokument:
• Problem-
beschreibung
• Ursachenanalyse
• Auswirkungen je
Nutzergruppe
• Konkrete
Lösungsempfehlung
Iterativer Nachtest:
• Überprüfung der
durchgeführten
Maßnahmen
• Initiale Prüfung
neuer
Funktionalitäten
Prozessbegleitung
Prozessschulung
Prozesskonzept
Workshop TestBeratung

16. 16"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019
Agiler Entwicklungsprozess
Qualitätssicherung digitale Zugänglichkeit
Anforderungsanalyse für
UX und Barrierefreiheit
Konzept- & Design-Review
mit Ergebnisprotokoll
Basischeck inklusive
Dokumentation
Iterativer Test mit
ticketbasierter
Dokumentation (z.B. Jira)
Beratung zum agilen
Prozess
Priorisierung offener
Tickets aus
vorhergehenden Sprints
Entwickler-Workshop
Beratung im
Entwickler-Tandem
Re-Test bearbeiteter Tickets
zur UX & Barrierefreiheit
Prozessbegleitung
Prozessschulung
Prozesskonzept
Sprint RetrospectiveSprintSprint PlanningProjekt-Initiation
Lessons-Learned-Workshop
Product
Backlog
Workshop TestBeratung
Product
Increment

17. Phasen und Rollen
Software-Life-Cycle
Design &
Konzeption
Projektplanung &
Management
Inhalte &
Redaktion
Entwicklung &
Implementierung

18. ▪ Text durch Klicken hinzufügen
für Entwickler
Herausforderungen
Bedienkonzept &
Styleguide
Technologie &
Framework
Standards&
Normen
Crossmedia
Publishing
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 34

19. ▪ Text durch Klicken hinzufügen
ToDo
▪ Achte darauf, dass alle Inhalte ohne Style wahrnehmbar sind
▪ Achte darauf, dass alle Inhalte ohne Verhaltens-Scripts bedienbar sind
▪ Nutze Styles ausschließlich für Layout und Design
▪ Trenne Inhaltssemantik, Style und Verhaltens-Scripte auf Code-Ebene
Wirkung
✓ Individuelle Benutzereinstellungen werden ermöglicht
✓ Schneller Austausch der Styles oder Inhalte
✓ Darstellbarkeit mit verschiedenen Endgeräten und Benutzeragenten (Browser,
PDF- Viewer, assistive Technologien wie Screenreader, Bildschirmlupen oder
Sprachassistenten)
Trenne Code, Style und Verhalten sauber.
Quicktipp 1: Crossmedia Workflow
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 35

20. ▪ Text durch Klicken hinzufügen
ToDo
▪ Kenne und nutze die Standards Deiner Technologie
▪ Wähle den passenden Textelementtyp zum dargestellten Inhalt
▪ Wähle den passenden Formularfeldtyp zur geforderten Eingabe
▪ Berücksichtige den Zweck interaktiver Elemente
Wirkung
✓ Verbesserte Lesbarkeit für Suchmaschinen, Screenreader, Sprachassistenten
✓ Standards einhalten und damit Schnittstellen für Hilfsmittel, Endgeräte und
Benutzeragenten bieten
✓ Standardelemente verhalten sich konsistent und deren Bedienung ist allgemein
bekannt
Nutze GUI-Elemente entsprechend ihrer Semantik.
Quicktipp 2: Standardelemente
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 36

21. ▪ Text durch Klicken hinzufügen
ToDo
▪ Unterscheide und trenne Layout von Inhalten
▪ Bilde Gruppierungen auch auf Code-Ebene ab (Section, Article, Teaser, …)
▪ Bilde Textstrukturen (wie Überschriften, Listen, Absätze…) auf Code-Ebene ab
▪ Bilde Layoutstrukturen (wie Header, Main, Footer, Aside, …) auf Code-Ebene ab
▪ Achte darauf, dass Strukturen auch ohne Styles erkennbar sind
Wirkung
✓ Verbesserung der Lesbarkeit für Suchmaschinen und Screenreader
✓ Ermöglicht die direkte Ansteuerung durch Sprachassistenten
✓ Struktur-Templates erhöhen die Effizienz bei der Entwicklung
Bilde die Inhaltsstruktur auf Code-Ebene ab.
Quicktipp 3: Struktur
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 37

22. ▪ Text durch Klicken hinzufügen
ToDo
▪ Achte darauf, dass alle interaktiven Elemente den Tastaturfokus erhalten
▪ Setze die Fokusreihenfolge gemäß des Nutzungsablaufs
▪ Biete auch nach Aktualisierungen ein sinnvolles Fokusmanagement
▪ Trenne Fokussierung und Aktivierung sauber
▪ Vermeide Tastaturfallen
Wirkung
✓ Konsistente, durchgängige Bedienung
✓ Effiziente Tastaturbedienung durch Power-User
✓ Sicherstellung der Zugänglichkeit der Anwendung für Tastaturnutzer,
Sprachassistenten und Screenreader
Sorge für eine durchgängige Tastaturbedienbarkeit.
Quicktipp 4: Tastaturbedienbarkeit
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 38

23. ▪ Text durch Klicken hinzufügen
ToDo
▪ Berücksichtige Einstellungen von Bedienhilfen des Betriebssystems wie
Schriftvergrößerung, Hochkontrastschema, Fokushervorhebung,
Mauszeigeranpassungen
▪ Ermögliche die Anzeige mit benutzerdefinierten Styles
▪ Achte auf die korrekte Darstellung in verschiedenen Zoomstufen und
Seitenorientierungen
Wirkung
✓ Individuelle Nutzervorlieben der Darstellung sind voreinstellbar
✓ Nutzer können die Darstellung situations- und umgebungsbedingt anpassen
✓ Erhöhung der Nutzerakzeptanz
Respektiere individuelle Anpassungen.
Quicktipp 5: Benutzereinstellungen
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 39

24. Fail:Respektiere individuelle Anpassungen.
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 40

25. ▪ Text durch Klicken hinzufügen
1. CrossmediaWorkflow Trenne Code, Style und Verhalten sauber.
2. Standardelemente Nutze GUI-Elemente entsprechend ihrer Semantik.
3. Struktur Bilde die Inhaltsstruktur auf Code-Ebene ab.
4. Tastaturbedienbarkeit Sorge für eine durchgängige Tastaturbedienbarkeit.
5. Benutzereinstellungen Respektiere individuelle Anpassungen.
für Entwickler
Übersicht der Quicktipps
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 41

26. Best Practices
HTML & ARIA

27. Barrierefreiheit ≠
Besonderheit
✓ Mit einfachen Tipps eine gute Zugänglichkeit
für alle Nutzer schaffen

28. Anne-Marie Nebe
Accessibility &
Usability Expert
anne-marie.nebe@
t-systems.com
+49 351 2820 2342
Mein Ziel:
Die einfachste funktionierende
Lösung muss das Erreichen
eines positiven Nutzererlebnisses
für jeden Nutzer ermöglichen.
"Digitale Barrierefreiheit - Quicktipps" | Anne-Marie Nebe | DevDay 2019 52