From ec800d28aea2852d22b50ba48a0dad2fc1db111d Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 21 Apr 2026 23:38:06 +0200 Subject: [PATCH] =?UTF-8?q?a11y=20werkzeuge-folie=20=C3=BCberarbeitet:=20s?= =?UTF-8?q?creenreader=20tabelle,=20orca/talkback,=20wcag-formulierungen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../223015c/01-geschichte-grundlagen-html.md | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 88a9858..c90f16a 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -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) + + + # Barrierefreiheit testen 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 -**Automatisierte Tools:** +**Automatisierte Tools** (finden ~30% der Verstöße): | 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 | +| [WAVE](https://wave.webaim.org/) | Browser-Extension | Kontrast, Struktur, Tab-Reihenfolge | +| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + A11y-Audit | | [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:** -- macOS: `Cmd + F5` (VoiceOver) -- Windows: NVDA installieren (kostenlos) -- Augen schließen, nur zuhören: Ist die Seite verständlich? +**Screenreader** (OS-nativ oder OSS): + +| OS | Screenreader | Hinweis | +|----|--------------|---------| +| 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.