diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 7a7094d..735eca1 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -1195,30 +1195,22 @@ Formattierungssprache --- - - - - - # HTML Metadaten +![bg right:40% fit](./assets/hdm-link-preview.png) + ```html Im Browsertab als Überschrift sichtbar - - - ... - ``` -* *Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.* -* *Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte* +*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.* + + + +![bg fit](./assets/web-disability-simulator.png) + +--- + -# Web Disability Simulator +# Wie nutzen Menschen das Web? + +--- + + + + + +![bg](./assets/mouse.png) + +--- + + + + + +![bg](./assets/keyboard.png) + +--- + + + + + +![bg](./assets/switch-microsoft.jpg) + +--- + + + + + +![bg](./assets/ps-controller.jpg) + +--- + + + + + +![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 --- + + + + +# 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) + +--- + + + + + +# 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. + +--- + + + + + +![bg](./assets/hdm-homepage-16x9.png) + + + +--- + + + + + +![bg](./assets/wave-tab-order-16x9.png) + + + +--- + @@ -1756,51 +1861,6 @@ Echte NutzerInnen einbeziehen = Gold-Standard --- - - - - -# 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. - ---- - - - - - -![bg fit](./assets/wave-tab-order-qr.png) - - - ---- - diff --git a/slides/223015c/assets/demos/contrast-levels.html b/slides/223015c/assets/demos/contrast-levels.html index e191299..9e1a824 100644 --- a/slides/223015c/assets/demos/contrast-levels.html +++ b/slides/223015c/assets/demos/contrast-levels.html @@ -4,11 +4,11 @@ Kontrast-Stufen + + +
+
+ +
+
`
+
1
2
3
4
+
5
6
7
8
+
9
0
+
-
=
+
+
+ +
+
⇥ Tab
+
Q
W
E
R
+
T
Y
U
I
+
O
P
+
[
]
\
+
+ +
+
Caps
+
A
S
D
F
+
G
H
J
K
+
L
+
;
'
+
↵ Enter
+
+ +
+
⇧ Shift
+
Z
X
C
V
+
B
N
M
+
,
.
/
+
⇧ Shift
+
+ +
+
Ctrl
+
+
Alt
+
␣ Leertaste
+
Alt
+
+
Ctrl
+
+
+ + + +
+ +
+
+
Navigation
+
+ + Tab – zum nächsten fokussierbaren Element +
+
+ ⇧⇥ + Shift + Tab – ein Element zurück +
+
+ ↑↓←→ + Pfeiltasten – scrollen, innerhalb Listen/Menüs navigieren +
+
+
+
Aktion
+
+ + Enter – Link/Button aktivieren +
+
+ + Leertaste – Checkbox toggle, Dropdown öffnen, scrollen +
+
+
+ + diff --git a/slides/223015c/assets/demos/keyboard-a11y.png b/slides/223015c/assets/demos/keyboard-a11y.png new file mode 100644 index 0000000..15d3fa0 Binary files /dev/null and b/slides/223015c/assets/demos/keyboard-a11y.png differ diff --git a/slides/223015c/assets/eye-tracking.png b/slides/223015c/assets/eye-tracking.png new file mode 100644 index 0000000..8460c67 Binary files /dev/null and b/slides/223015c/assets/eye-tracking.png differ diff --git a/slides/223015c/assets/hdm-homepage-16x9.png b/slides/223015c/assets/hdm-homepage-16x9.png new file mode 100644 index 0000000..994cdc6 Binary files /dev/null and b/slides/223015c/assets/hdm-homepage-16x9.png differ diff --git a/slides/223015c/assets/hdm-homepage-qr.png b/slides/223015c/assets/hdm-homepage-qr.png new file mode 100644 index 0000000..d7077ce Binary files /dev/null and b/slides/223015c/assets/hdm-homepage-qr.png differ diff --git a/slides/223015c/assets/hdm-homepage.png b/slides/223015c/assets/hdm-homepage.png new file mode 100644 index 0000000..39af093 Binary files /dev/null and b/slides/223015c/assets/hdm-homepage.png differ diff --git a/slides/223015c/assets/hdm-link-preview.png b/slides/223015c/assets/hdm-link-preview.png new file mode 100644 index 0000000..ff91976 Binary files /dev/null and b/slides/223015c/assets/hdm-link-preview.png differ diff --git a/slides/223015c/assets/keyboard.png b/slides/223015c/assets/keyboard.png new file mode 100644 index 0000000..21f1b09 Binary files /dev/null and b/slides/223015c/assets/keyboard.png differ diff --git a/slides/223015c/assets/mouse.png b/slides/223015c/assets/mouse.png new file mode 100644 index 0000000..9b05848 Binary files /dev/null and b/slides/223015c/assets/mouse.png differ diff --git a/slides/223015c/assets/ps-controller.jpg b/slides/223015c/assets/ps-controller.jpg new file mode 100644 index 0000000..ef8dc74 Binary files /dev/null and b/slides/223015c/assets/ps-controller.jpg differ diff --git a/slides/223015c/assets/switch-microsoft.jpg b/slides/223015c/assets/switch-microsoft.jpg new file mode 100644 index 0000000..684ba55 Binary files /dev/null and b/slides/223015c/assets/switch-microsoft.jpg differ diff --git a/slides/223015c/assets/wave-tab-order-16x9.png b/slides/223015c/assets/wave-tab-order-16x9.png new file mode 100644 index 0000000..6136cf5 Binary files /dev/null and b/slides/223015c/assets/wave-tab-order-16x9.png differ diff --git a/slides/223015c/assets/wave-tab-order-qr-only.png b/slides/223015c/assets/wave-tab-order-qr-only.png new file mode 100644 index 0000000..00b02c6 Binary files /dev/null and b/slides/223015c/assets/wave-tab-order-qr-only.png differ diff --git a/slides/223015c/assets/wave-tab-order-qr.png b/slides/223015c/assets/wave-tab-order-qr.png deleted file mode 100644 index 846c44b..0000000 Binary files a/slides/223015c/assets/wave-tab-order-qr.png and /dev/null differ diff --git a/slides/223015c/assets/web-disability-simulator.png b/slides/223015c/assets/web-disability-simulator.png new file mode 100644 index 0000000..388a303 Binary files /dev/null and b/slides/223015c/assets/web-disability-simulator.png differ