a11y feinschliff, hex-dec-table neu, operable-folie verbessert, anatomie klausur
This commit is contained in:
@@ -1039,14 +1039,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
@@ -1161,6 +1154,11 @@ Formattierungssprache
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #fce4ec -->
|
||||
|
||||
# HTML-Anatomie (2/2)
|
||||
|
||||
* Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
|
||||
@@ -1283,7 +1281,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
|
||||
|
||||
|
||||
```html
|
||||
<input type="" />
|
||||
<label>Geburtsdatum</label>
|
||||
<input type="date" />
|
||||
```
|
||||
|
||||
| Teil | Bezeichnung |
|
||||
@@ -1520,7 +1519,7 @@ Accessibility ist eingebaut
|
||||
|---------|---------------|
|
||||
| **Maus** | Klicken, Scrollen |
|
||||
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
|
||||
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
|
||||
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, TalkBack, Orca) |
|
||||
| **Sprachsteuerung** | "Klicke auf Anmelden" |
|
||||
| **Augensteuerung** | Eye-Tracking |
|
||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
||||
@@ -1553,7 +1552,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
|
||||
# Web-Zugänglichkeit – Vertiefung
|
||||
|
||||
**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
|
||||
Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
|
||||
|
||||
**Arten von Einschränkungen:**
|
||||
|
||||
@@ -1565,7 +1564,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
| Kognitiv | Legasthenie | Müdigkeit | Ablenkung |
|
||||
|
||||
**Assistive Technologien:**
|
||||
- **Screenreader:** NVDA (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (kommerziell)
|
||||
- **Screenreader:** NVDA & Narrator (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Orca (Linux) – überwiegend builtin oder Open Source; JAWS (Windows) kommerziell
|
||||
- **Braillezeilen:** Taktile Ausgabe, ~40–80 Zeichen
|
||||
- **Switch-Geräte:** Ein-Knopf-Steuerung für motorische Einschränkungen
|
||||
- **Eye-Tracking:** Blicksteuerung für Bewegungsunfähige
|
||||
@@ -1585,7 +1584,7 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
|
||||
- Digitale Inklusion
|
||||
|
||||
**Praktisch:**
|
||||
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
|
||||
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen, temporäre Einschränkungen)
|
||||
- Größerer Markt (~15% der Bevölkerung)
|
||||
|
||||
<!--
|
||||
@@ -1637,9 +1636,13 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
# WCAG: Der Standard
|
||||
|
||||
**W**eb **C**ontent **A**ccessibility **G**uidelines
|
||||
<small>**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: **W3C** / WAI · **WCAG 2.2** (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)</small>
|
||||
|
||||
**4 Prinzipien (POUR):**
|
||||
|
||||
@@ -1650,6 +1653,8 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
|
||||
| **Understandable** | Verständlich – Inhalte müssen klar sein |
|
||||
| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
|
||||
|
||||
**Konformitätslevel:** A · AA (gesetzlicher Standard) · AAA <small>· [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)</small>
|
||||
|
||||
<!--
|
||||
WCAG vom W3C (World Wide Web Consortium)
|
||||
Aktuelle Version: WCAG 2.2 (2023)
|
||||
@@ -1665,7 +1670,11 @@ Gesetzlich meist Level AA gefordert
|
||||
|
||||
**Textalternativen für Nicht-Text:**
|
||||
```html
|
||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
||||
<img src="tankman.jpg"
|
||||
alt="Ein Mann mit Einkaufstüten steht
|
||||
allein vor einer Reihe Panzer –
|
||||
Tiananmen-Platz, Peking,
|
||||
5. Juni 1989">
|
||||
```
|
||||
|
||||
* **Kontrast:** Mindestens 4,5:1 für Text
|
||||
@@ -1680,22 +1689,25 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
# Operable: Bedienbar
|
||||
|
||||
|
||||
|
||||
**Tastaturzugänglich:**
|
||||
```css
|
||||
/* Fokus-Indikator NIE entfernen! */
|
||||
:focus {
|
||||
outline: 2px solid blue;
|
||||
outline-offset: 2px;
|
||||
/* Fokus-Ring nur bei Tastatur-Navigation */
|
||||
button:focus-visible {
|
||||
outline: 3px solid #d63384;
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Wenn custom styling: */
|
||||
button:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
|
||||
}
|
||||
/* Anti-Pattern: Tastatur-Nutzer sind "blind" */
|
||||
button:focus { outline: none; }
|
||||
```
|
||||
|
||||
**Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen
|
||||
|
||||
Reference in New Issue
Block a user