add contrast-levels demo, wave-tab-order image, link a11y tools, mark axe as paid/pro
This commit is contained in:
@@ -70,13 +70,13 @@ section.aufgabe footer {
|
|||||||
}
|
}
|
||||||
section.erklaerung {
|
section.erklaerung {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
background: repeating-linear-gradient(
|
/**background: repeating-linear-gradient(
|
||||||
135deg,
|
135deg,
|
||||||
#fce4ec,
|
#fce4ec,
|
||||||
#fce4ec 40px,
|
#fce4ec 40px,
|
||||||
#fff 40px,
|
#fff 40px,
|
||||||
#fff 80px
|
#fff 80px
|
||||||
) !important;
|
) !important;**/
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
section.erklaerung {
|
section.erklaerung {
|
||||||
@@ -1482,7 +1482,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
|||||||
| **Augensteuerung** | Eye-Tracking |
|
| **Augensteuerung** | Eye-Tracking |
|
||||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
| **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
|
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||||||
@@ -1622,6 +1622,8 @@ Gesetzlich meist Level AA gefordert
|
|||||||
|
|
||||||
# Perceivable: Wahrnehmbar
|
# Perceivable: Wahrnehmbar
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Textalternativen für Nicht-Text:**
|
**Textalternativen für Nicht-Text:**
|
||||||
```html
|
```html
|
||||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
<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)
|
# Barrieren im Netz vermeiden (a11y)
|
||||||
|
|
||||||
**Tastatur-Test:**
|
**Tastatur-Test:**
|
||||||
- Alle Funktionen nur mit Tab + Enter nutzbar?
|
- Alle Funktionen sind nur mit Tab + Enter nutzbar
|
||||||
- Fokus immer sichtbar?
|
- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
|
||||||
- Logische Tab-Reihenfolge?
|
- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
|
||||||
|
|
||||||
**Screenreader-Test:**
|
**Screenreader-Test:**
|
||||||
- VoiceOver (Mac): `Cmd + F5`
|
- VoiceOver (Mac): `Cmd + F5`
|
||||||
- NVDA (Windows): Gratis-Download
|
- NVDA (Windows): Gratis-Download
|
||||||
|
|
||||||
**Tools:**
|
**Tools/Browser-Extensions:**
|
||||||
- axe DevTools, WAVE (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)
|
||||||
- Lighthouse (in Chrome DevTools)
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Automatische Tests finden ~30% der Probleme
|
Automatische Tests finden ~30% der Probleme
|
||||||
@@ -1761,6 +1762,8 @@ Echte NutzerInnen einbeziehen = Gold-Standard
|
|||||||
|
|
||||||
# Barrierefreiheit testen – Vertiefung
|
# Barrierefreiheit testen – Vertiefung
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
|
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
|
||||||
|
|
||||||
**Tastatur-Test (5 Minuten):**
|
**Tastatur-Test (5 Minuten):**
|
||||||
@@ -1773,10 +1776,10 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
|
|||||||
|
|
||||||
| Tool | Typ | Findet |
|
| Tool | Typ | Findet |
|
||||||
|------|-----|--------|
|
|------|-----|--------|
|
||||||
| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
|
| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge |
|
||||||
| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
|
| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility |
|
||||||
| Lighthouse | Chrome DevTools | Performance + Accessibility |
|
| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
|
||||||
| Pa11y | 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:**
|
**Screenreader-Kurztest:**
|
||||||
- macOS: `Cmd + F5` (VoiceOver)
|
- macOS: `Cmd + F5` (VoiceOver)
|
||||||
|
|||||||
BIN
slides/223015c/assets/a11y-bahnsee.png
Normal file
BIN
slides/223015c/assets/a11y-bahnsee.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
34
slides/223015c/assets/demos/contrast-levels-frame.html
Normal file
34
slides/223015c/assets/demos/contrast-levels-frame.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Preview: Kontrast</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #0f0f23;
|
||||||
|
--chrome: #1a1a2e;
|
||||||
|
--muted: #4a4a6a;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||||
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||||
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||||
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||||
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||||
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="browser">
|
||||||
|
<div class="window">
|
||||||
|
<div class="chrome">
|
||||||
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||||
|
<span class="url">file:///beispiel/contrast.html</span>
|
||||||
|
</div>
|
||||||
|
<iframe src="./contrast-levels.html"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
97
slides/223015c/assets/demos/contrast-levels.html
Normal file
97
slides/223015c/assets/demos/contrast-levels.html
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Kontrast-Stufen</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; }
|
||||||
|
.row {
|
||||||
|
background: #fff;
|
||||||
|
padding: 14px 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.sample {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.meta {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ratio {
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #1a1a2e;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.fail { background: #fee2e2; color: #991b1b; }
|
||||||
|
.aa-large { background: #fed7aa; color: #7c2d12; }
|
||||||
|
.aa { background: #dcfce7; color: #166534; }
|
||||||
|
.aaa { background: #bbf7d0; color: #14532d; }
|
||||||
|
.hint {
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #6b7280;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.hint a { color: #d63384; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="row" style="background: #fff;">
|
||||||
|
<div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
|
||||||
|
<div class="meta">
|
||||||
|
<div class="ratio">2.3:1</div>
|
||||||
|
<span class="badge fail">✗ Fail</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="background: #fff;">
|
||||||
|
<div class="sample" style="color: #949494;">Barrierefrei lesen</div>
|
||||||
|
<div class="meta">
|
||||||
|
<div class="ratio">3:1</div>
|
||||||
|
<span class="badge aa-large">AA Large</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="background: #fff;">
|
||||||
|
<div class="sample" style="color: #767676;">Barrierefrei lesen</div>
|
||||||
|
<div class="meta">
|
||||||
|
<div class="ratio">4.5:1</div>
|
||||||
|
<span class="badge aa">✓ AA</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="background: #fff;">
|
||||||
|
<div class="sample" style="color: #595959;">Barrierefrei lesen</div>
|
||||||
|
<div class="meta">
|
||||||
|
<div class="ratio">7:1</div>
|
||||||
|
<span class="badge aaa">✓ AAA</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="background: #fff;">
|
||||||
|
<div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
|
||||||
|
<div class="meta">
|
||||||
|
<div class="ratio">16:1</div>
|
||||||
|
<span class="badge aaa">✓ AAA+</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hint">Check: webaim.org/resources/contrastchecker</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015c/assets/demos/contrast-levels.png
Normal file
BIN
slides/223015c/assets/demos/contrast-levels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
slides/223015c/assets/wave-tab-order.png
Normal file
BIN
slides/223015c/assets/wave-tab-order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Reference in New Issue
Block a user