restructure 223015c slides: move a11y to termin-1, reorganize termin-2
termin-1: - add accessibility (a11y) section with wcag principles termin-2: - move dns section earlier (before osi/tcp-ip theory) - reorganize network fundamentals flow - remove a11y section (moved to termin-1) - update osi merksatz to "dualen"
This commit is contained in:
@@ -1276,8 +1276,238 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# "Barrierefreiheit"
|
||||
## a11y – Accessibility
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# 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!**
|
||||
|
||||
<!--
|
||||
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||||
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
|
||||
ARTEN VON EINSCHRÄNKUNGEN:
|
||||
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
|
||||
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
|
||||
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
|
||||
ASSISTIVE TECHNOLOGIEN:
|
||||
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
|
||||
- Braillezeilen: Taktile Ausgabe für Blinde
|
||||
- Switch-Geräte: Für motorische Einschränkungen
|
||||
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
|
||||
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
|
||||
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
|
||||
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# 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)
|
||||
|
||||
<!--
|
||||
RECHTLICHER RAHMEN:
|
||||
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
|
||||
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
|
||||
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
|
||||
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
|
||||
- Strafen: Bis zu 100.000€ Bußgeld möglich
|
||||
CURB-CUT-EFFEKT:
|
||||
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
|
||||
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
|
||||
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
|
||||
BUSINESS CASE:
|
||||
- 15% Zielgruppe (Menschen mit Behinderung)
|
||||
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
|
||||
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
|
||||
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# 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
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Barrieren im Netz vermeiden (a11y)
|
||||
|
||||
**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
|
||||
|
||||
**Tools:**
|
||||
- axe DevTools, WAVE (Browser-Extensions)
|
||||
- Lighthouse (in Chrome DevTools)
|
||||
|
||||
<!--
|
||||
Automatische Tests finden ~30% der Probleme
|
||||
Manuelles Testen unverzichtbar
|
||||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
-->
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Fragen & Diskussion
|
||||
|
||||
Reference in New Issue
Block a user