accessibility-workshop/automate-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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Automatisch testen</title>
        <link
            rel="stylesheet"
            href="assets/css/style.css"
        />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.2/axe.min.js"></script>
    </head>

    <body>
        <header>
            <h1>Automatisiert testen</h1>

            <p>
                Viele Kriterien der WCAG lassen sich automatisiert testen. In
                diesem Modul lernen Sie, wie Sie automatisierte Tests in Ihre
                Entwicklungs- und Testprozesse integrieren können.
            </p>
        </header>
        <main>
            <article>
                <h2>Axe Core Testing</h2>
                <p>
                    Axe Core ist eine leistungsstarke Open-Source-Bibliothek zur
                    automatisierten Überprüfung von Barrierefreiheitsproblemen
                    auf Webseiten.
                </p>
                <div class="testing-container">
                    <h3>Target Size</h3>

                    <div class="test-selector">
                        <label for="testSelect">Test auswählen:</label>
                        <select id="testSelect">
                            <option value="target-size">
                                Target Size (Minimum)
                            </option>
                        </select>
                        <button
                            class="btn"
                            id="loadExample"
                        >
                            Beispiel laden
                        </button>
                    </div>

                    <div class="editor-container">
                        <div class="editor-panel">
                            <div class="editor-header">HTML Editor</div>
                            <textarea
                                class="editor"
                                id="htmlEditor"
                                placeholder="HTML Code hier eingeben..."
                            ></textarea>
                        </div>

                        <div class="editor-panel">
                            <div class="editor-header">CSS Editor</div>
                            <textarea
                                class="editor"
                                id="cssEditor"
                                placeholder="CSS Code hier eingeben..."
                            ></textarea>
                        </div>
                    </div>

                    <div class="controls">
                        <button
                            class="btn success"
                            id="updatePreview"
                        >
                            Vorschau aktualisieren
                        </button>
                        <button
                            class="btn"
                            id="runTest"
                        >
                            Test ausführen
                        </button>
                    </div>

                    <div
                        class="preview-container"
                        id="previewContainer"
                    >
                        <div class="preview-header">
                            <span>Vorschau</span>
                            <span id="previewInfo"
                                >Aktualisieren Sie die Vorschau</span
                            >
                        </div>
                        <div
                            class="preview-frame"
                            id="previewFrame"
                        >
                            <!-- Hier wird die Vorschau angezeigt -->
                        </div>
                    </div>

                    <div
                        class="results-container"
                        id="resultsContainer"
                        style="display: none"
                    >
                        <div
                            class="results-header"
                            id="resultsHeader"
                        >
                            Testergebnisse
                        </div>
                        <div
                            class="results-content"
                            id="resultsContent"
                        >
                            <!-- Hier werden die Testergebnisse angezeigt -->
                        </div>
                    </div>
                </div>
            </article>
        </main>

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

        <script src="assets/js/automate-testing.js"></script>
    </body>
</html>