public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y vertiefung: keyboard-demo, input-devices, mdn-links vereinheitlicht

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-21 20:58:52 +02:00
parent cedda338df
commit 67857b9bfd
18 changed files with 306 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
slides/223015c/01-geschichte-grundlagen-html.md
View File

@@ -1195,30 +1195,22 @@ Formattierungssprache
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->
# HTML Metadaten
![bg right:40% fit](./assets/hdm-link-preview.png)
```html
<html>
<head>
<title>Im Browsertab als Überschrift sichtbar</title>
<meta name="description" content="" />
<meta name="og:image" content="https://...." />
</head>
...
</html>
```
* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
<small>*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.*</small>
<!--
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
@@ -1388,7 +1380,7 @@ Accessibility ist eingebaut
</details>
```
<small>→ [MDN: `<details>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>
---
@@ -1403,7 +1395,7 @@ Accessibility ist eingebaut
</details>
```
<small>→ [MDN: `<details open>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box)</small>
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box)</small>
---
@@ -1416,7 +1408,7 @@ Accessibility ist eingebaut
<button>Add to favorites</button>
```
<small>→ [MDN: `<button>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>
---
@@ -1431,7 +1423,7 @@ Accessibility ist eingebaut
size="10" />
```
<small>→ [MDN: `<input>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>
---
@@ -1448,7 +1440,7 @@ Accessibility ist eingebaut
</dialog>
```
<small>→ [MDN: `<dialog>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>
---
@@ -1460,9 +1452,57 @@ Accessibility ist eingebaut
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg fit](./assets/web-disability-simulator.png)
---
<!-- _class: lead -->
# Web Disability Simulator
# Wie nutzen Menschen das Web?
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/mouse.png)
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/keyboard.png)
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/switch-microsoft.jpg)
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/ps-controller.jpg)
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/eye-tracking.png)
---
@@ -1592,10 +1632,10 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
| AA | Gesetzlicher Standard | Kontrast 4,5:1, Tastaturnavigation |
| AAA | Optimal | Gebärdensprache für Videos |
**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen
> ***Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.*
---
# WCAG: Der Standard
@@ -1729,6 +1769,71 @@ div-Button braucht JavaScript für Enter/Space
---
<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Barrierefreiheit testen – Vertiefung
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
**Tastatur-Test** – Maus weglegen, nur diese Tasten nutzen:
![w:1050 center](./assets/demos/keyboard-a11y.png)
---
<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Barrierefreiheit testen – Werkzeuge
**Automatisierte Tools:**
| Tool | Typ | Findet |
|------|-----|--------|
| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge |
| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility |
| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension (Pro-Version · Profi-Tool) | ~30% der WCAG-Verstöße |
**Screenreader-Kurztest:**
- macOS: `Cmd + F5` (VoiceOver)
- Windows: NVDA installieren (kostenlos)
- Augen schließen, nur zuhören: Ist die Seite verständlich?
**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/hdm-homepage-16x9.png)
<!--
Aufgabe: hdm-stuttgart.de öffnen, Maus/Touchpad weglegen.
Nur mit Tab/Shift+Tab/Enter/Pfeiltasten navigieren.
Fokus-Indikator immer sichtbar? Logische Reihenfolge? Alle Elemente erreichbar?
-->
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg](./assets/wave-tab-order-16x9.png)
<!--
WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad.
Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzer.
-->
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
@@ -1756,51 +1861,6 @@ Echte NutzerInnen einbeziehen = Gold-Standard
---
<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Barrierefreiheit testen – Vertiefung
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
**Tastatur-Test (5 Minuten):**
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
3. Logische Reihenfolge? (nicht kreuz und quer)
4. Alle interaktiven Elemente erreichbar?
**Automatisierte Tools:**
| Tool | Typ | Findet |
|------|-----|--------|
| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge |
| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility |
| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension (💰 Pro-Version · Profi-Tool) | ~30% der WCAG-Verstöße |
**Screenreader-Kurztest:**
- macOS: `Cmd + F5` (VoiceOver)
- Windows: NVDA installieren (kostenlos)
- Augen schließen, nur zuhören: Ist die Seite verständlich?
**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
![bg fit](./assets/wave-tab-order-qr.png)
<!--
WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad.
Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzer.
-->
---
<!-- _class: lead -->