Slide 1
Slide 1 text
A11y: EAA, BFSG, WCAG, WAI, ARIA, WTF?
It‘s for the people, stupid!
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023
Slide 2
Slide 2 text
Danny Koppenhagen
GitHub: d-koppenhagen
(Twitter): @d_koppenhagen
LinkedIn: d-koppenhagen
Maximilian Franzke
GitHub: mfranzke
(Twitter): @maedmaex
LinkedIn: maximilianfranzke
Über uns
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 2
Slide 3
Slide 3 text
Congratulations on the launch of the Web Accessibility Initiative – an effort to ensure
that people with disabilities have access to the Internet's World Wide Web.
New information and communications technologies can improve the quality of life for people with
disabilities, but only if such technologies are so that everyone can use them. Given the explosive
growth in the use of the World Wide designed from the beginning Web for publishing, electronic
commerce, lifelong learning and the delivery of government services, it is vital that the Web be
accessible to everyone. The Web Accessibility Initiative will develop the tools, technology, and
guidelines to make it possible to display information in ways that are available to all users. […]
Bill Clinton
THE WHITE HOUSE
WASHINGTON
April 4, 1997
https://www.w3.org/Press/Clinton.html
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 3
Slide 4
Slide 4 text
Inhalt
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 4
1. Bewusstsein
Barrierefreiheit betrifft uns alle
2. Umsetzung
Einen hohen Grad an Barrierefreiheit erreichen
3. Architektur
Einfluss auf die Anwendungsarchitektur
4. QA & Testing
Barrierefreiheit mit einfachen Mitteln testen
Slide 5
Slide 5 text
Warum Barrierefreiheit uns alle betrifft.
Bewusstsein
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 27.10.2023 5
Slide 6
Slide 6 text
Accessibility – a11y
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 6
Ziele
- Inklusion aller Menschen
- Barrieren auf ein Minimum reduzieren
- Keine neuen Barrieren schaffen
Das Web ist generell bereits
barrierefrei, i.d.R. bauen wir in
der Entwicklung Barrieren ein.
Slide 7
Slide 7 text
Arten von Einschränkungen (Auswahl / Beispiele)
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 7
Art Permanent Temporär Situativ
Steuern Nur ein Arm Gebrochener Arm Eltern mit Kind im Arm
Sehen Blindheit Augenoperation Abgelenkte Fahrende
Hören Gehörlosigkeit Ohreninfektion Arbeit an lauten Maschinen
Sprechen Stummheit Kehlkopfentzündung Starker Akzent
„Denken“ Kognitive Einschränkungen Kopfschmerzen Ablenkung, Müdigkeit
Slide 8
Slide 8 text
§ Rechtliche Grundlagen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 8
Europäischer Rechtsakt zur Barrierefreiheit
(European Accessibility Act – EAA)
- EU-Richtlinie 2019/882
- Anforderungen an die Barrierefreiheit für
Produkte und Dienstleistungen
- Fokus auf die digitale Barrierefreiheit
Barrierefreiheitsstärkungsgesetz (BFSG)
- Umsetzung des EAA in nationales Recht
- Verpflichtend für alle betreffenden Produkte
und Dienstleistungen seit 22.07.2021
- Übergangsphase bis zum 28. Juni 2025
Allgemeines Gleichstellungsgesetz (AGG)
Andere Länder und Regionen:
• https://www.w3.org/WAI/policies/
• https://www.siteimprove.com/glossary/acces
sibility-laws/
Slide 9
Slide 9 text
W3C, WAI, WCAG
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 9
World Wide Web
Consortium
WAI
Web
Accessibility
Initiative
veröffentlicht
WCAG
Web Content
Accessibility
Guidelines
Slide 10
Slide 10 text
WCAG Prinzipien
10
1. Wahrnehmbar 2. Bedienbar
3. Verständlich 4. Robust
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 10.05.2023
Slide 11
Slide 11 text
Konformitätsstufen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 11
A Das Angebot ist von jeder Zielgruppe (ohne Komfortanspruch) nutzbar.
AA Das Angebot ist gut von jeder Zielgruppe nutzbar.
AAA Das Angebot bietet eine sehr komfortable Nutzung.
Slide 12
Slide 12 text
Umsetzung
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 12
Wie wir mit einfachen Mitteln einen hohen Grad an
Barrierefreiheit erreichen können.
Slide 13
Slide 13 text
Semantisches HTML
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 13
Gibt es ein passendes
semantisches Element?
Nutze es!
Ganz sicher?
Ja
Nein!
Nein
Na gut, dann nimm ein
oder
Ja!
ARIA!
Slide 14
Slide 14 text
Landmarks
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 14
…
…
…
…
…
…
Slide 15
Slide 15 text
Headlines
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 15
…
…
…
…
…
…
Slide 16
Slide 16 text
Listen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 16
…
- …
- …
-
- …
…
- …
- …
Slide 17
Slide 17 text
Tool: Can I Include?
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 17
https://caninclude.glitch.me/
Slide 18
Slide 18 text
Buttons & Links
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 18
Action
Page B
Action
Action
Page B
Slide 19
Slide 19 text
Outlines
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 19
:is(a,button,input,textarea,summary):focus-visible {
outline: max(2px,0.08em) solid #2c95c4;
outline-offset: 1px;
}
:is(a,button,input,textarea,summary):focus {
outline: none;
}
Slide 20
Slide 20 text
Icon-Buttons
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 20
Add to list
Add to list
Slide 21
Slide 21 text
Inhalte richtig verstecken
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 21
Für Screenreader
Für alle
Inclusively Hidden | CSS-Tricks - CSS-Tricks
Nur visuell
.visually-hidden:not(:focus):not(:active),
.sr-only:not(:focus):not(:active) {
height: 1px;
overflow: hidden;
width: 1px;
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
Auf 1px schrumpfen
Visualität entfernen (z. B. Hintergrund)
Umbrüche im Text verhindern
Slide 22
Slide 22 text
Image alt Attribut
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 22
Slide 23
Slide 23 text
Tool: Visual Studio Code Plugin „axe Accessibility Linter“
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 23
https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter
https://plugins.jetbrains.com/plugin/19498-accessibility-linter
Slide 24
Slide 24 text
Audio / Video
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 24
WAI Guide: https://www.w3.org/WAI/media/av/
Slide 25
Slide 25 text
Tabellen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 25
A11y scores of some random sites.
Columns are sortable by using the
button in the column header.
You can filter the results by
entering a minimum score in the input
field labelled with minimum.
Press the keyboard key "ctrl" plus
"s" to shuffle and show new random
results.
Slide 26
Slide 26 text
Diagramme
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 26
• Beschreibung der Darstellung
• Beschriftung von Achsen und Werten
• Bereitstellung einer alternativen Darstellungsform mit allen Informationen in strukturierter
Form (z. B. als Tabelle)
12591
10372
13378
9045
11366
10577
0
2000
4000
6000
8000
10000
12000
14000
16000
Januar Februar März
Besucherzahl Besucherzahl im Vorjahr
Monat Besucherzahl
Besucherzahl
im Vorjahr
Januar 12591 9045
Februar 10372 11366
März 13378 10577
Slide 27
Slide 27 text
Modaldialoge mit
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 27
Modaldialoge
Das HTML Element stellt uns alles zur barrierefreien
Umsetzung von Modal-Dialogen bereit.
Weiter
Slide 28
Slide 28 text
Aufklapper mit
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 28
Slide 29
Slide 29 text
Formulare
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 29
Textlabel
Optionale Beschreibung
Slide 30
Slide 30 text
Weitere Auszeichnungen für Formularfelder (Auszug)
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 30
Slide 31
Slide 31 text
Auto-Vervollständigen mit
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 31
Options
Option 1
Option 2
Option label 3
Option label 4
Slide 32
Slide 32 text
Benachrichtigungen & Live-Daten
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 32
Die Live-Region darf
nicht erst mit Anzeige
der ersten Meldung
erzeugt werden
aria-live="polite"
role="status"
aria-live="assertive"
role="alert"
User already exists.
Account successfully created
Slide 33
Slide 33 text
Weitere Roles & Aria-Live Kombinationen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 33
aria-live="assertive"
role="timer"
aria-live="polite"
role="marquee"
aria-live="polite"
role="progress"
aria-live="off"
role="log"
Slide 34
Slide 34 text
Weitere häufig verwendete Rollen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 34
switch
tooltip
tablist / tab
Slide 35
Slide 35 text
ARIA – Nicht DIE Lösung
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 35
Semantic HTML ist immer zu bevorzugen!
- aria-required ⟶ required
- aria-hidden ⟶ hidden
- aria-label ⟶ sichtbarer Text
- aria-readonly ⟶ readonly
- div[role=button] ⟶
Sinnvolle ARIA Attribute (Auszug):
- aria-current
- aria-invalid
- aria-live
- aria-sort="ascending"
- aria-describedby="el_id"
Slide 36
Slide 36 text
Architektur
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 36
Welchen Einfluss hat die Barrierefreiheit auf meine
Anwendungsarchitektur.
Slide 37
Slide 37 text
Auswahl von Bibliotheken
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 37
Projekt A
Projekt B
Projekt C
Projekt N
Nicht
barrierefreie
Software
Slide 38
Slide 38 text
Einfluss auf die Architektur der Anwendung
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 38
![]()
![]()
![]()
My Blog
Card Component...
Card Component...
Home
...
My latest blog post
Card Component...
Die KomponentenarchitekturSlide 39
Slide 39 text
Einfluss auf die Architektur der Anwendung
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 39
Layoutkomponenten, Slots & Properties als Hilfsmittel
![]()
{{ title }}
{{ title }}
Card ComponentSlide 40
Slide 40 text
Einfluss auf die Architektur der Anwendung
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 40
Micro Frontends
App 1
App 2
Dashboard
App 1
http://my-app.de/ http://my-app.de/app1Slide 41
Slide 41 text
Internationalisierung (i18n)
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 41
• Robustheit (Textfluss, Textlängen, Sonderzeichen,
Zeichensätze)
Save Speichern
…
Gehe zur deutschsprachigen Seite
…
Slide 42
Slide 42 text
QA &
Testing
Wie die Barrierefreiheit in Anwendungen mit einfachen
Mitteln testen können.
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 42
Slide 43
Slide 43 text
Tastatur
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 43
Wenn Deine Anwendung nicht per Tastatur bedienbar ist, wird
sie es auch nicht per Screenreader sein.
Slide 44
Slide 44 text
Chrome Developer Tools
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 44
https://developer.chrome.com/docs/devtools/accessibility/reference/
Slide 45
Slide 45 text
Chrome Addon: axe DevTools
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 45
https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
Slide 46
Slide 46 text
Web Service: Siteimprove Accessibility Checker
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 46
https://www.siteimprove.com/toolkit/accessibility-checker/
Slide 47
Slide 47 text
Testautomatisierung: pa11y, e2e-Testing Plugins
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 47
Slide 48
Slide 48 text
It‘s about the Human, stupid
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 48
Slide 49
Slide 49 text
Kontakt
Danny Koppenhagen
Platforms for New Mobility
(PlaNeMo)
GitHub: d-koppenhagen
X (Twitter): @d_koppenhagen
LinkedIn: d-koppenhagen
[email protected]
DB Systel GmbH
Kynaststr. 1 | 10317 Berlin
Maximilian Franzke
Digital.Design Experience &
Digital Accessibility
GitHub: mfranzke
X (Twitter): @maedmaex
LinkedIn: maximilianfranzke
[email protected]
DB Systel GmbH
Hammerbrookstr. 44 | 20097 Hamburg
Vielen Dank
www.dbsystel.de
Slide 50
Slide 50 text
Externe Bildquellen
DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 50
• Bill Clinton: https://freesvg.org/download/178261
• W3C Logo: https://commons.wikimedia.org/wiki/File:W3C_icon.svg
• Grafik „human“: https://commons.wikimedia.org/wiki/File:Accessibility.svg