-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
65 lines (49 loc) · 3.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html lang="de-DE">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="preload" href="/src/assets/fonts/CamingoWeb.woff2" as="font" />
<link rel="preload" href="/src/assets/fonts/Oswald-Regular.woff2" as="font" />
<title>Neofonie A11y Checkliste</title>
</head>
<body>
<h1>Accessibility „A11y“ (11 stehen für 11 Buchstaben ergo eine abkürzung)</h1>
<p>
Diese Checkliste wird von unseren Entwicklern genutzt um eine gewisse Barriere-Freiheit für unsere Endkunden zu gewährleisten. Jede Komponente/Seite sollte gegen diese Checkliste geprüft
werden.
</p>
<h2>Allgemein</h2>
<label><input type="checkbox" />Alle automatischen Accessibility-Tests laufen durch</label> <br />
<label><input type="checkbox" />Axe Chrome extension</label> <br />
<label><input type="checkbox" />Wave Chrome Erweiterung</label> <br />
<label><input type="checkbox" />Lighthouse (Accessibility)</label> <br />
<h2>Markup</h2>
<label><input type="checkbox" />`<html />` hat korrektes lang-attribut</label> <br />
<label><input type="checkbox" />Es gibt bei tabindex nur 0 oder -1</label> <br />
<label><input type="checkbox" />`<a />-Tag` wird für alle Links verwendet -> Seitenwechseln</label> <br />
<label><input type="checkbox" />`<button />-Tag` wird für alle Buttons/Klick/Actionflächen genutzt (kein div mit onclick etc.)</label> <br />
<h2>Content</h2>
<label><input type="checkbox" />`<button />`, `<a />` und `<label />` sind eindeutig und selbsterklärend</label> <br />
<label><input type="checkbox" />Es gibt nur eine `<h1 />` pro Seite</label> <br />
<h2>Bilder</h2>
<label><input type="checkbox" />Alle `<img />-Elemente` haben ein Alt-Attribut</label> <br />
<label><input type="checkbox" />rein dekorative SVGs haben `aria-hidden="true"`</label> <br />
<label><input type="checkbox" />`<img />-Elemente` mit source SVG haben das role Attribut `role="img"`</label> <br />
<h2>Formulare</h2>
<label><input type="checkbox" />Alle Inputs sind mit entsprechenden Label verbunden</label> <br />
<label><input type="checkbox" />Form Input unterstützen grundsätzlich autocomplete</label> <br />
<label><input type="checkbox" />Input Errors werden direkt mit den entsprechenden Feldern assoziiert</label> <br />
<h2>Mobile</h2>
<label><input type="checkbox" />Die Seite kann nicht horizontal gescrollt werden</label> <br />
<label><input type="checkbox" />Viewport Zoom ist deaktiviert</label> <br />
<label><input type="checkbox" />Alle Klickflächen mind. `44x44px`, außer bei Inline-Elementen wie Links</label> <br />
<h2>Tastatur</h2>
<label><input type="checkbox" />Tastatursteuerung muss komplett möglich sein</label> <br />
<label><input type="checkbox" />Alle interaktiven Elemente müssen einen sichtbaren focustyle haben</label> <br />
<label><input type="checkbox" />Keyboard-Focus Reihenfolge gleicht der des visuellen Layouts</label> <br />
<label><input type="checkbox" />Es gibt keine unsichtbaren fokusierbaren Elemente</label> <br />
<label><input type="checkbox" />Buttons können über Leertaste und Eingabetaste betätigt werden</label> <br />
<label><input type="checkbox" />Menüs und Overlays können via ESC-Taste wieder geschlossen werden</label> <br />
<p><strong>Stand 02.2024</strong></p>
</body>
</html>