A11y: EAA, BFSG, WCAG, WAI, ARIA, WTF? – it’s for the people stupid!

Dieser Talk ist von der W-JAX Konferenz am 07.11.2023 in München.

Barrierefreiheit ist ein verstaubtes und unwichtiges Thema für Behördensoftware? Ganz im Gegenteil: Accessibility betrifft uns täglich und immer, wenn wir Software verwenden. Es ist an uns, diese umzusetzen. Danny und Maximilian zeigen euch, wie ihr eure Webanwendungen von Beginn an mit einfachen Mitteln zu einem hohen Grad barrierefrei gestaltet und entwickelt. Wir stellen euch effektive Methoden und Tools vor, die euch bei der Umsetzung und Prüfung in hohem Maße unterstützen. Wir gehen darauf ein, welchen Einfluss Barrierefreiheit auf eure Frontend-Architekturen hat und welche Aspekte hier zu beachten sind. Und keine Angst: Wir beten hier nicht die einzelnen WCAG-Kriterien herunter – vielmehr geben wir euch eine praktische Einführung in das Thema Barrierefreiheit im Web und welche Kniffe und Fallstricke zu beachten sind.

Transcript

1. A11y: EAA, BFSG, WCAG, WAI, ARIA, WTF? It‘s for the people, stupid! DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023
2. 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
3. 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
4. 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
5. Warum Barrierefreiheit uns alle betrifft. Bewusstsein DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 27.10.2023 5
6. 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.
7. 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
8. § 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/
9. 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
10. WCAG Prinzipien 10 1. Wahrnehmbar 2. Bedienbar 3. Verständlich 4. Robust DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 10.05.2023
11. 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.
12. 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.
13. 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 <div> oder <span> Ja! ARIA!
14. Landmarks DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 14 <header> … </header> <nav> … </nav> <aside> … </aside> <footer> … </footer> <main> </main> <section>…</section> <form>…</form>
15. Headlines DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 15 <h1> … </h1> <h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> … </h6>
16. Listen DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 16 <menu> <li> … <li> </menu> <ol> <li> … <li> </ol> <ul> <li> … </li> <li> <ol> <li> … <li> </ol> <li> </ul> <menu> <div> … <div> </menu> <ol> <ol> … <ol> </ol> <ul> <ol> … <ol> </ul>
17. Tool: Can I Include? DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 17 https://caninclude.glitch.me/
18. Buttons & Links DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 18 <button type="button" onclick="…"> Action </button> <a href="/b">Page B</a> <div role="button" tabindex="0" onclick="doSth()" keydown="doSth()"> Action </div> <div class="button">Action</div> <button type="button" onclick="window.location.href='/b'"> Page B </button>
19. 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; }
20. Icon-Buttons DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 20 <button type="button" data-icon="add"> Add to list </button> <button title="Add to list" aria-label="Add to list" type="button" data-icon="add"> </button> <button class="sr-only" type="button" data-icon="add"> Add to list </button>
21. Inhalte richtig verstecken DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 21 Für Screenreader <section aria-hidden="true"> Für alle <section hidden="true"> <section style="display: none;"> 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
22. Image alt Attribut DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 22
23. 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
24. Audio / Video DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 24 WAI Guide: https://www.w3.org/WAI/media/av/ <video controls poster="poster.jpg"> <source src="my-video.webm" type="video/webm" /> <track default src="my-video.vtt" kind="captions" srclang="en-us" label="English Captions"/> </video> <audio title="My Movie" > <source src="en.mp3" type="audio/mp3" /> <source src="de.mp3" type="audio/mp3" /> <track src="en.vtt" srclang="en" label="English Captions" default/> <track src="de.vtt" srclang="de" label="German Captions"/> </audio>
25. Tabellen DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 25 <table> <caption> A11y scores of some random sites. <span class="sr-only"> 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. </span> </caption> <!-- ... --> </table>
26. 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
27. Modaldialoge mit <dialog> DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 27 Modaldialoge Das HTML Element <dialog> stellt uns alles zur barrierefreien Umsetzung von Modal-Dialogen bereit. Weiter
28. Aufklapper mit <details><summary> DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 28
29. Formulare DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 29 <input type="text" placeholder="Projektname" name="input-01" id="input-01" aria-describedby="hint"> <label for="input-01">Textlabel</label> <p id="hint">Optionale Beschreibung</p>
30. Weitere Auszeichnungen für Formularfelder (Auszug) DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 30 <input type="text" placeholder="SMS Token" name="input-01" id="input-01" aria-describedby="hint" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"/>
31. Auto-Vervollständigen mit <datalist> DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 31 <label for="search">Options</label> <input type="text" name="country" id="search" list="options"/> <datalist id="options"> <option>Option 1</option> <option>Option 2</option> <optgroup value="option value 3"> <option>Option label 3</option> </optgroup> <optgroup value="option value 4"> <option>Option label 4</option> </optgroup> </datalist>
32. 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" <section aria-live="assertive" role="alert">User already exists.</section> <section aria-live="polite" role="status">Account successfully created</section>
33. 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"
34. Weitere häufig verwendete Rollen DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 34 switch tooltip tablist / tab
35. 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] ⟶ <button> Sinnvolle ARIA Attribute (Auszug): - aria-current - aria-invalid - aria-live - aria-sort="ascending" - aria-describedby="el_id"
36. Architektur DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 36 Welchen Einfluss hat die Barrierefreiheit auf meine Anwendungsarchitektur.
37. 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
38. Einfluss auf die Architektur der Anwendung DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 38 <main> <h1>My Blog</h1> </main> Card Component <img .../> <h2>...</h2> Card Component <img .../> <h2>...</h2> <main> <h1>Home</h1> <p>...</p> <h2>My latest blog post</h2> </main> Card Component <img .../> <h2>...</h2> Die Komponentenarchitektur
39. Einfluss auf die Architektur der Anwendung DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 39 Layoutkomponenten, Slots & Properties als Hilfsmittel <header> <slot name="header"/> </header> <aside> <nav> <slot name="nav"/> </nav> </aside> <main> <h1>{{ title }}</h1> <slot /> </main> <header> <slot name="header"/> </header> <nav> <slot name="nav"/> </nav> <main> <h1>{{ title }}</h1> <slot /> </main> Card Component <img .../> <slot name="title" />
40. Einfluss auf die Architektur der Anwendung DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 40 Micro Frontends <h2>App 1</h2> <h2>App 2</h2> <h1>Dashboard</h1> <h2>App 1</h2> http://my-app.de/ http://my-app.de/app1
41. Internationalisierung (i18n) DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 41 • Robustheit (Textfluss, Textlängen, Sonderzeichen, Zeichensätze) Save Speichern <html lang="en"> <head></head> <body> … <a href="/de" lang="de"> Gehe zur deutschsprachigen Seite </a> … </body> </html>
42. QA & Testing Wie die Barrierefreiheit in Anwendungen mit einfachen Mitteln testen können. DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 42
43. 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.
44. Chrome Developer Tools DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 44 https://developer.chrome.com/docs/devtools/accessibility/reference/
45. 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
46. Web Service: Siteimprove Accessibility Checker DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 46 https://www.siteimprove.com/toolkit/accessibility-checker/
47. Testautomatisierung: pa11y, e2e-Testing Plugins DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 47
48. It‘s about the Human, stupid DB Systel GmbH | Danny Koppenhagen & Maximilian Franzke | 07.11.2023 48
49. Kontakt Danny Koppenhagen Platforms for New Mobility (PlaNeMo) GitHub: d-koppenhagen X (Twitter): @d_koppenhagen LinkedIn: d-koppenhagen Danny.Koppenhagen@deutschebahn.com DB Systel GmbH Kynaststr. 1 | 10317 Berlin Maximilian Franzke Digital.Design Experience & Digital Accessibility GitHub: mfranzke X (Twitter): @maedmaex LinkedIn: maximilianfranzke Maximilian.Franzke@deutschebahn.com DB Systel GmbH Hammerbrookstr. 44 | 20097 Hamburg Vielen Dank www.dbsystel.de
50. 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