add contrast-levels demo, wave-tab-order image, link a11y tools, mark axe as paid/pro

slides/223015c/01-geschichte-grundlagen-html.md

@@ -70,13 +70,13 @@ section.aufgabe footer {
 }
 section.erklaerung {
   font-size: 1.1rem;
-  background: repeating-linear-gradient(
+  /**background: repeating-linear-gradient(
     135deg,
     #fce4ec,
     #fce4ec 40px,
     #fff 40px,
     #fff 80px
-  ) !important;
+  ) !important;**/
 }
 @media print {
   section.erklaerung {
@@ -1482,7 +1482,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 | **Augensteuerung** | Eye-Tracking |
 | **Switch-Geräte** | Ein-/Aus-Schalter |
 
-→ **Nicht alle Menschen nutzen Maus oder Touchscreens.**
+→ **Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.**
 
 <!--
 ACCESSIBILITY (a11y): a + 11 Buchstaben + y
@@ -1622,6 +1622,8 @@ Gesetzlich meist Level AA gefordert
 
 # Perceivable: Wahrnehmbar
 
+![bg right:38%](./assets/demos/contrast-levels.png)
+
 **Textalternativen für Nicht-Text:**
 ```html
 <img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
@@ -1735,17 +1737,16 @@ div-Button braucht JavaScript für Enter/Space
 # Barrieren im Netz vermeiden (a11y)
 
 **Tastatur-Test:**
-- Alle Funktionen nur mit Tab + Enter nutzbar?
-- Fokus immer sichtbar?
-- Logische Tab-Reihenfolge?
+- Alle Funktionen sind nur mit Tab + Enter nutzbar
+- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
+- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
 
 **Screenreader-Test:**
 - VoiceOver (Mac): `Cmd + F5`
 - NVDA (Windows): Gratis-Download
 
-**Tools:**
-- axe DevTools, WAVE (Browser-Extensions)
-- Lighthouse (in Chrome DevTools)
+**Tools/Browser-Extensions:**
+- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
 
 <!--
 Automatische Tests finden ~30% der Probleme
@@ -1761,6 +1762,8 @@ Echte NutzerInnen einbeziehen = Gold-Standard
 
 # Barrierefreiheit testen – Vertiefung
 
+![bg right:30% fit](./assets/wave-tab-order.png)
+
 Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
 
 **Tastatur-Test (5 Minuten):**
@@ -1773,10 +1776,10 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
 
 | Tool | Typ | Findet |
 |------|-----|--------|
-| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
-| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
-| Lighthouse | Chrome DevTools | Performance + Accessibility |
-| Pa11y | CLI | CI/CD-Integration |
+| [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)