accessibility-workshop/testing.html at main · zenbox/accessibility-workshop · GitHub

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Barrierefreiheit testen</title>
        <link
            rel="stylesheet"
            href="assets/css/style.css"
        />
    </head>
    <body>
        <header>
            <h1>Testen von Barrierefreiheits-Anforderungen</h1>
            <p>
                Anforderungen, der Design-Prozess und die Umsetzung unternehmen
                viele Anstrengungen, um eine barrierefreie Website zu erstellen.
                Am Ende des Prozesses steht die Überprüfung, ob die
                Anforderungen auch erfüllt wurden. Dies kann durch
                automatisierte Tests, manuelle Prüfungen und Nutzertests
                erfolgen.
            </p>
            <p>
                Es gibt zum Teil gesetzliche Rahmen für Barrierefreiheit. In der
                EU ist die Web Accessibility Directive (WAD, EN 301 549)
                maßgeblich, in den USA der Americans with Disabilities Act (ADA)
                und Section 508. In Deutschland sind es das
                Behindertengleichstellungsgesetz (BGG) und die
                Barrierefreie-Informationstechnik-Verordnung (BITV 2.0). Diese
                Gesetze legen fest, dass öffentliche Stellen und bestimmte
                private Unternehmen ihre digitalen Angebote barrierefrei
                gestalten müssen.
            </p>
            <p>
                In diesem Workshop lernen Sie verschiedene Methoden und
                Werkzeuge kennen, um die Barrierefreiheit von Websites zu
                testen. Dazu gehören automatisierte Tools, manuelle Prüfungen
                und Nutzertests mit Menschen mit Behinderungen.
            </p>
        </header>
        <main>
            <article>
                <h2>Inhalte</h2>
                <h3>Grundlagen der Barrierefreiheit und gesetzlicher Rahmen</h3>
                <p>Was ist digitale Barrierefreiheit?</p>
                <p>
                    WCAG 2.2, BITV 2.0, EN 301 549: Anforderungen und Prüfziele
                </p>
                <p>Rechtliche Rahmenbedingungen (EU, DE, AGG, BFSG)</p>

                <p>
                    Einführung in AT-Tools (Screenreader, Tastaturnavigation,
                    Farbkontraste)
                </p>
                <p>Fehlerbilder und Praxisbeispiele</p>
                <h3>Manuelle Testmethoden und Prüfwerkzeuge</h3>

                <p>Prüfschritte nach WCAG und BITV</p>
                <p>Tastaturbedienung und Fokusmanagement testen</p>
                <p>Einsatz von NVDA, VoiceOver, TalkBack</p>
                <p>Farbkontrast, semantisches HTML, ARIA-Rollen prüfen</p>
                <p>Einsatz von Accessibility Tree und Browser DevTools</p>
                <h3>Automatisiertes Testen mit Playwright, Jest und Axe</h3>

                <p>Einführung in Axe-Core, jest-axe, axe-playwright</p>
                <p>Erstellung eigener Testfälle mit Playwright/Jest</p>
                <p>Automatische Prüfung auf Kontraste, ARIA, Landmarks</p>
                <p>Grenzen automatisierter Tests und manuelle Ergänzungen</p>
                <p>Integration in CI/CD (GitHub Actions, Jenkins, GitLab CI)</p>
                <h3>QA-Prozesse und Integration in den Alltag</h3>

                <p>
                    Barrierefreiheit als Teil von Definition of Done /
                    Teststrategie
                </p>
                <p>Priorisierung und Dokumentation von Accessibility-Fehlern</p>
                <p>Zusammenarbeit mit UX, Dev und Product Owner</p>
                <p>Fallstudien und Übungen mit Testdaten</p>
                <p>
                    Projekt-Review: Teilnehmer testen eigene oder
                    Beispielprojekte
                </p>
            </article>
        </main>

        <script src="assets/js/scaffold.js"></script>
    </body>
</html>