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

a11y werkzeuge-folie überarbeitet: screenreader tabelle, orca/talkback, wcag-formulierungen

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-21 23:38:06 +02:00
parent 80786cb040
commit ec800d28ae
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1698,9 +1698,9 @@ button:focus-visible {
} }
``` ```
**Genug Zeit:** Keine automatischen Timeouts ohne Warnung **Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen
**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde **Kein Flackern:** max. 3×/Sekunde (schützt vor epileptischen Anfällen)
<!-- <!--
Tab-Reihenfolge = DOM-Reihenfolge Tab-Reihenfolge = DOM-Reihenfolge
@@ -1768,6 +1768,10 @@ div-Button braucht JavaScript für Enter/Space
--- ---
<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Barrierefreiheit testen # Barrierefreiheit testen
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen. Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
@@ -1784,19 +1788,25 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
# Barrierefreiheit testen – Werkzeuge # Barrierefreiheit testen – Werkzeuge
**Automatisierte Tools:** **Automatisierte Tools** (finden ~30% der Verstöße):
| Tool | Typ | Findet | | Tool | Typ | Findet |
|------|-----|--------| |------|-----|--------|
| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge | | [WAVE](https://wave.webaim.org/) | Browser-Extension | Kontrast, Struktur, Tab-Reihenfolge |
| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility | | [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + A11y-Audit |
| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration | | [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 | | [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension (Pro · Profi-Tool) | Detailanalyse, Regel-Engine |
**Screenreader-Kurztest:** **Screenreader** (OS-nativ oder OSS):
- macOS: `Cmd + F5` (VoiceOver)
- Windows: NVDA installieren (kostenlos) | OS | Screenreader | Hinweis |
- Augen schließen, nur zuhören: Ist die Seite verständlich? |----|--------------|---------|
| macOS / iOS | VoiceOver (`Cmd + F5`) | builtin |
| Windows | [NVDA](https://www.nvaccess.org/) · Narrator | NVDA OSS, Narrator builtin |
| Linux | [Orca](https://orca.gnome.org/) + espeak-ng | GNOME builtin |
| Android | TalkBack | builtin |
**Manueller Test:** SR aktivieren, Formular ausfüllen. Einarbeitung nötig – "Augen schließen" bildet echte SR-Nutzung nicht ab.
**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen. **Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.