add accessibility section with wcag, a11y, and input methods
This commit is contained in:
@@ -94,8 +94,9 @@ Fragen klären
|
||||
|
||||
**Nachmittag:**
|
||||
- CSS-Grundlagen
|
||||
- Barrierefreiheit (a11y, WCAG)
|
||||
- Selektoren & Spezifität
|
||||
- Hands-On: Wir bauen uns einen eigenen Caption Generator
|
||||
- Hands-On: Styling
|
||||
|
||||
---
|
||||
|
||||
@@ -995,6 +996,205 @@ vw/vh = Viewport (sichtbarer Bereich)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Barrierefreiheit
|
||||
## a11y – Accessibility
|
||||
|
||||
---
|
||||
|
||||
# Wie nutzen Menschen das Web?
|
||||
|
||||
| Eingabe | Nutzungsweise |
|
||||
|---------|---------------|
|
||||
| **Maus** | Klicken, Scrollen |
|
||||
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
|
||||
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
|
||||
| **Sprachsteuerung** | "Klicke auf Anmelden" |
|
||||
| **Augensteuerung** | Eye-Tracking |
|
||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
||||
|
||||
→ **Nicht alle nutzen Maus + Bildschirm!**
|
||||
|
||||
<!--
|
||||
a11y = Accessibility (a + 11 Buchstaben + y)
|
||||
15% der Weltbevölkerung haben eine Behinderung
|
||||
Temporäre Einschränkungen: gebrochener Arm, helle Sonne
|
||||
Situative Einschränkungen: laute Umgebung, Baby auf dem Arm
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Warum Barrierefreiheit?
|
||||
|
||||
**Rechtlich:**
|
||||
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
|
||||
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
|
||||
|
||||
**Ethisch:**
|
||||
- Teilhabe für alle Menschen
|
||||
- Digitale Inklusion
|
||||
|
||||
**Praktisch:**
|
||||
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
|
||||
- Größerer Markt (~15% der Bevölkerung)
|
||||
|
||||
<!--
|
||||
European Accessibility Act: gilt jetzt für private Unternehmen
|
||||
Barrierefreiheit = gutes Design für alle
|
||||
Curb-Cut-Effekt: Rampen helfen auch Kinderwagen, Koffern...
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# WCAG: Der Standard
|
||||
|
||||
**W**eb **C**ontent **A**ccessibility **G**uidelines
|
||||
|
||||
**4 Prinzipien (POUR):**
|
||||
|
||||
| Prinzip | Bedeutung |
|
||||
|---------|-----------|
|
||||
| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
|
||||
| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
|
||||
| **Understandable** | Verständlich – Inhalte müssen klar sein |
|
||||
| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
|
||||
|
||||
<!--
|
||||
WCAG vom W3C (World Wide Web Consortium)
|
||||
Aktuelle Version: WCAG 2.2 (2023)
|
||||
Level: A (minimal), AA (Standard), AAA (optimal)
|
||||
Gesetzlich meist Level AA gefordert
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Perceivable: Wahrnehmbar
|
||||
|
||||
**Textalternativen für Nicht-Text:**
|
||||
```html
|
||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
||||
```
|
||||
|
||||
**Kontrast:** Mindestens 4.5:1 für Text
|
||||
|
||||
**Untertitel:** Videos brauchen Captions
|
||||
|
||||
**Responsive:** Inhalte bei 200% Zoom nutzbar
|
||||
|
||||
<!--
|
||||
Leeres alt="" für dekorative Bilder
|
||||
Contrast-Checker: WebAIM Contrast Checker
|
||||
Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Operable: Bedienbar
|
||||
|
||||
**Tastaturzugänglich:**
|
||||
```css
|
||||
/* Fokus-Indikator NIE entfernen! */
|
||||
:focus {
|
||||
outline: 2px solid blue;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Wenn custom styling: */
|
||||
button:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
|
||||
|
||||
**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
|
||||
|
||||
<!--
|
||||
Tab-Reihenfolge = DOM-Reihenfolge
|
||||
Skip-Links: "Zum Hauptinhalt springen"
|
||||
:focus-visible = nur bei Tastatur-Navigation
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Understandable: Verständlich
|
||||
|
||||
**Sprache angeben:**
|
||||
```html
|
||||
<html lang="de">
|
||||
```
|
||||
|
||||
**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
|
||||
|
||||
**Fehler erklären:**
|
||||
```html
|
||||
<input type="email" aria-describedby="email-error">
|
||||
<p id="email-error" role="alert">
|
||||
Bitte geben Sie eine gültige E-Mail-Adresse ein.
|
||||
</p>
|
||||
```
|
||||
|
||||
<!--
|
||||
Screenreader nutzen lang für korrekte Aussprache
|
||||
Konsistenz reduziert kognitive Last
|
||||
Fehlermeldungen: konkret, hilfreich, am Feld
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Robust: Technisch solide
|
||||
|
||||
**Semantisches HTML:**
|
||||
```html
|
||||
<!-- Schlecht -->
|
||||
<div class="button" onclick="...">Klick mich</div>
|
||||
|
||||
<!-- Gut -->
|
||||
<button type="button">Klick mich</button>
|
||||
```
|
||||
|
||||
**ARIA nur wenn nötig:**
|
||||
```html
|
||||
<!-- Nötig: Custom-Komponente -->
|
||||
<div role="tablist" aria-label="Produktkategorien">
|
||||
<button role="tab" aria-selected="true">Schuhe</button>
|
||||
<button role="tab" aria-selected="false">Jacken</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!--
|
||||
ARIA = Accessible Rich Internet Applications
|
||||
Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
|
||||
button hat eingebaute Tastatur-Unterstützung
|
||||
div-Button braucht JavaScript für Enter/Space
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Schnellcheck: Ist meine Seite barrierefrei?
|
||||
|
||||
**Tastatur-Test:**
|
||||
- Alle Funktionen nur mit Tab + Enter nutzbar?
|
||||
- Fokus immer sichtbar?
|
||||
- Logische Tab-Reihenfolge?
|
||||
|
||||
**Screenreader-Test:**
|
||||
- VoiceOver (Mac): `Cmd + F5`
|
||||
- NVDA (Windows): Gratis-Download
|
||||
|
||||
**Automatische Tools:**
|
||||
- Browser-Extension: axe DevTools, WAVE
|
||||
- Lighthouse (Chrome DevTools)
|
||||
|
||||
<!--
|
||||
Automatische Tests finden ~30% der Probleme
|
||||
Manuelles Testen unverzichtbar
|
||||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Hands-On: Erste Styles (30 Min)
|
||||
|
||||
**Erstellt `style.css` für eure HTML-Seite:**
|
||||
@@ -1508,12 +1708,15 @@ Variablen machen's einfach
|
||||
- DNS: Namen → IP-Adressen
|
||||
- HTTP: Request/Response, Status-Codes
|
||||
|
||||
**Barrierefreiheit:**
|
||||
- WCAG: Perceivable, Operable, Understandable, Robust
|
||||
- Tastatur-Navigation, Screenreader, Kontrast
|
||||
|
||||
**CSS:**
|
||||
- Selektoren (Element, Klasse, ID)
|
||||
- Box-Modell (Content, Padding, Border, Margin)
|
||||
- Flexbox für Layouts
|
||||
- Responsive Design mit Media Queries
|
||||
- Transitions für Animationen
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user