-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
247 lines (238 loc) · 17.5 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
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Digitale Barrierefreiheit von Anfang an</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/gtx_hdm12ax.css" title="Default style" id="rel-css-default" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/black-on-white.css" title="Black on white (high contrast)" id="rel-css-black-on-white" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/white-on-black.css" title="White on black (high contrast)" id="rel-css-white-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/yellow-on-black.css" title="Yellow on black (high contrast)" id="rel-css-yellow-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/lime-on-black.css" title="Lime on black (high contrast)" id="rel-css-lime-on-black" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/brown-on-buff.css" title="Brown on buff (low contrast)" id="rel-css-brown-on-buff" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/systemcolours.css" title="System colours" id="rel-css-system-colours" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="./css/nocolours.css" title="‘No colours’" id="rel-css-no-colours" />
<meta name="author" content="Christophe Strobbe" />
<style type="text/css">
/*li.wcag-level-AA { background-color: yellow; }
li.wcag-level-AAA { background-color: orange; }
*/
th#th-beschreibung, td[headers="th-beschreibung"] { max-width: 30rem; }
</style>
</head>
<body id="home">
<header>
<h1><span class="h1txt">Digitale Barrierefreiheit von Anfang an</span></h1>
<!--<p class="skiplink"><a class="skiplink" href="#main">Skip to main content</a></p>-->
</header>
<main id="main">
<p>Die Website »Digitale Barrierefreiheit von Anfang an« zeigt anhand von Videos,
was man beachten sollte, wenn man Webseiten gestaltet. Zur Zeit sind folgende Videos verfügbar:
</p>
<table>
<caption>Videos in der Reihe »Digitale Barrierefreiheit von Anfang an«</caption>
<thead>
<tr>
<th scope="col" id="th-video">Video</th>
<th scope="col" id="th-beschreibung">Beschreibung</th>
<th scope="col" id="th-tags" abbr="HTML und CSS">Behandelte <abbr>HTML</abbr>-Tags <abbr title="beziehungsweise">bzw.</abbr> <abbr>CSS</abbr>-Properties</th>
<th scope="col" id="th-wcag" abbr="WCAG">Relevante <abbr>WCAG</abbr> 2.1-Erfolgskriterien</th>
<th scope="col" id="th-mehr" abbr="Mehr">Weitere Bemerkungen und Links</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="th-video" scope="row"><a href="https://www.youtube.com/watch?v=5NiZd0UmzmE">Seitentitel & Überschriften</a></th>
<td headers="th-beschreibung">Dieses Video erklärt, was man bei Webseiten bezüglich Seitentitel und Überschriften beachten muss, damit die <abbr>WCAG</abbr> 2.1-Anforderungen erfüllt sind.</td>
<td headers="th-tags">
<ul>
<li><code>title</code></li>
<li><code>main</code></li>
<li><code>section</code></li>
<li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>.</li>
</ul>
</td>
<td headers="th-wcag">
<ul>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships" hreflang="en" lang="en">1.3.1: Info and Relationships (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence" hreflang="en" lang="en">1.3.2: Meaningful Sequence (A)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#identify-purpose" hreflang="en" lang="en">1.3.6: Identify Purpose (AAA)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#bypass-blocks" hreflang="en" lang="en">2.4.1: Bypass Blocks (A)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#multiple-ways" hreflang="en" lang="en">2.4.5: Multiple Ways (AA)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#section-headings" hreflang="en" lang="en">2.4.10: Section Heading (AAA)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#consistent-navigation" hreflang="en" lang="en">3.2.3: Consistent Navigation (AA)</a></li>
</ul>
</td>
<td headers="th-mehr">
<ul>
<li><abbr>WAI</abbr>: <a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings</a></li>
<li><abbr>WAI</abbr>: <a href="https://www.w3.org/WAI/tutorials/page-structure/content/">Content Structure</a></li>
</ul>
</td>
</tr>
<tr>
<th headers="th-video" scope="row"><a href="https://www.youtube.com/watch?v=EHufyPdKPYo">Seitenstruktur & Landmarks</a></th>
<td headers="th-beschreibung">Dieses Video erklärt, was man bei Webseiten bezüglich Seitenstruktur und Landmarks beachten muss, damit die <abbr>WCAG</abbr> 2.1 Anforderungen erfüllt sind.
Außerdem wird der Skip-Link erklärt.
</td>
<td headers="th-tags">
<ul>
<li><code>header</code>, <code>nav</code>, <code>main</code>, <code>footer</code></li>
<li><code>section</code>, <code>article</code>, <code>aside</code></li>
<li><code>form</code></li>
</ul>
</td>
<td headers="th-wcag">
<ul>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships" hreflang="en" lang="en">1.3.1: Info and Relationships (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#bypass-blocks" hreflang="en" lang="en">2.4.1: Bypass Blocks (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#page-titled" hreflang="en" lang="en">2.4.2: Page Titled (A)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#headings-and-labels" hreflang="en" lang="en">2.4.6: Headings and Labels (AA)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#section-headings" hreflang="en" lang="en">2.4.10: Section Heading (AAA)</a></li>
</ul>
</td>
<td headers="th-mehr">
<ul>
<li><abbr>WAI</abbr>: <a href="https://www.w3.org/WAI/tutorials/page-structure/regions/">Page Regions</a></li>
<li>Deque: <a href="https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html"><abbr>HTML</abbr> 5 and <abbr>ARIA</abbr> Landmarks</a></li>
</ul>
</td>
</tr>
<tr>
<th headers="th-video" scope="row"><a href="https://www.youtube.com/watch?v=RAmoNrujJFA">Einsatz von Farben</a></th>
<td headers="th-beschreibung">Dieses Video erklärt, was man beim Einsatz von Farben beachten muss, damit die <abbr>WCAG</abbr> 2.1 Anforderungen erfüllt sind.</td>
<td headers="th-tags">
<code>color</code>, <code>background-color</code> (<abbr>CSS</abbr>)
</td>
<td headers="th-wcag">
<ul>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#sensory-characteristics" hreflang="en" lang="en">1.3.3: Sensory Characteristics (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#use-of-color" hreflang="en" lang="en">1.4.1: Use of Color (A)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum" hreflang="en" lang="en">1.4.3: Contrast (Minimum) (AA)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced" hreflang="en" lang="en">1.4.6: Contrast (Enhanced) (AAA)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast" hreflang="en" lang="en">1.4.11: Non-text Contrast (AA)</a></li>
</ul>
</td>
<td headers="th-mehr">
<ul>
<li><a href="https://contrast-ratio.com/">contrast-ratio.com</a></li>
<li><a href="http://contrast-finder.tanaguru.com/">Tanaguru Contrast-Finder</a></li>
<li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser (<abbr>CCA</abbr>)</a></li>
</ul>
</td>
</tr>
<tr>
<th headers="th-video" scope="row"><a href="https://youtu.be/ATZ64nmEs1g">Animationen</a></th>
<td headers="th-beschreibung">Dieses Video erklärt, wie man Animationen gestalten sollte, damit die <abbr>WCAG</abbr> 2.1 Anforderungen erfüllt sind</td>
<td headers="th-tags">(<code>img</code>, <code>script</code>)</td>
<td headers="th-wcag">
<ul>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#non-text-content" hreflang="en" lang="en">1.1.1: Non-text Content (A)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast" hreflang="en" lang="en">1.4.11: Non-text Contrast (AA)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#pause-stop-hide" hreflang="en" lang="en">2.2.2: Pause, Stop, Hide (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold" hreflang="en" lang="en">2.3.1: Three Flashes or Below Threshold (A)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#three-flashes" hreflang="en" lang="en"> 2.3.2: Three Flashes (AAA)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#animation-from-interactions" hreflang="en" lang="en">2.3.3: Animation from Interactions (AAA)</a></li>
</ul>
</td>
<td headers="th-mehr">
<ul>
<li><a href="http://krasimir.github.io/gifffer/">Gifffer</a>: Demo;
<a href="https://github.com/krasimir/gifffer">Gifffer Quellcode</a>
</li>
<li><a href="https://github.com/nattarnoff/omrijs">Omri.js</a></li>
</ul>
</td>
</tr>
<tr>
<th headers="th-video" scope="row"><a href="https://www.youtube.com/watch?v=i_5Mkem9Byc">Links oder Verweise</a></th>
<td headers="th-beschreibung">Dieses Video erklärt, worauf man bei der Gestaltung von Links achten sollte.</td>
<td headers="th-tags"><code>a</code></td>
<td headers="th-wcag">
<ul>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships" hreflang="en" lang="en">1.3.1: Info and Relationships (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence" hreflang="en" lang="en">1.3.2: Meaningful Sequence (A)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#identify-input-purpose" hreflang="en" lang="en">1.3.5: Identify Input Purpose (AA)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#identify-purpose" hreflang="en" lang="en">1.3.6: Identify Purpose (AAA)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#headings-and-labels" hreflang="en" lang="en">2.4.6: Headings and Labels (AA)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#label-in-name" hreflang="en" lang="en">2.5.3: Label in Name (A)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#target-size" hreflang="en" lang="en">2.5.5: Target Size (AAA)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#on-focus" hreflang="en" lang="en">3.2.1: On Focus (A)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#on-input" hreflang="en" lang="en">3.2.2: On Input (A)</a></li>
<li class="wcag-level-AA"><a href="https://www.w3.org/TR/WCAG21/#consistent-identification" hreflang="en" lang="en">3.2.4: Consistent Identification (AA)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#change-on-request" hreflang="en" lang="en">3.2.5: Change on Request (AAA)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions" hreflang="en" lang="en">3.3.2: Labels or Instructions (A)</a></li>
<li class="wcag-level-AAA"><a href="https://www.w3.org/TR/WCAG21/#help" hreflang="en" lang="en">3.3.5: Help (AAA)</a></li>
<li class="wcag-level-A"><a href="https://www.w3.org/TR/WCAG21/#name-role-value" hreflang="en" lang="en">4.1.2: Name, Role, Value (A)</a></li>
</ul>
</td>
<td headers="th-mehr">
Web<abbr>AIM</abbr>: <a href="https://webaim.org/techniques/hypertext/" hreflang="en" lang="en">Links and Hypertext</a>
</td>
</tr>
<!--
<tr>
<th headers="th-video" scope="row"></th>
<td headers="th-beschreibung"></td>
<td headers="th-tags"></td>
<td headers="th-wcag">
<ul>
<li class="wcag-level-A"><a href="" hreflang="en" lang="en"> (A)</a></li>
<li class="wcag-level-AA"><a href="" hreflang="en" lang="en"> (AA)</a></li>
<li class="wcag-level-AAA"><a href="" hreflang="en" lang="en"> (AAA)</a></li>
<li><a href="" hreflang="en" lang="en"></a></li>
</ul>
</td>
<td headers="th-mehr">
<ul>
<li><a href="" hreflang="en" lang="en"></a></li>
<li><a href="" hreflang="en" lang="en"></a></li>
</ul>
</td>
</tr>
-->
</tbody>
</table>
<p>Diese Videos sind unter der Lizenz
<a href="https://creativecommons.org/licenses/by/4.0/legalcode.de">Creative Commons — Namensnennung 4.0 International — <abbr>CC</abbr> BY 4.0</a>
verfügbar.
</p>
<p>Auf der Website
<a href="https://gpii.eu/wcag21erklaert/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 erklärt</a>
finden Sie Links zu Videos und anderen Ressourcen zu den Richtlinien und Erfolgskriterien von <abbr>WCAG</abbr> 2.1.
</p>
<p>Werkzeuge zur Überprüfung der Barrierefreiheit von Webseiten:</p>
<ul>
<li><a href="http://wave.webaim.org/" hreflang="en" lang="en">WAVE Web Accessibility Tool</a> (Web<abbr>AIM</abbr>)</li>
<li><a href="https://www.paciellogroup.com/toolkit/" hreflang="en" lang="en">ARC Toolkit</a> (Paciello Group)</li>
<li><a href="http://fae20.cita.illinois.edu/" hreflang="en" lang="en">Functional Accessibility Evaluator (<abbr>FAE</abbr>) 2.0</a> (University of Illinois)</li>
<li><a href="https://achecker.ca/checker/index.php" hreflang="en" lang="en">AChecker</a></li>
</ul>
<p>Hinweis:
Die Hochschule der Medien bietet im Rahmen des Weiterbildungskurses »<span lang="en">Digital Innovation</span>« ein
<a href="https://www.hdm-weiterbildung.de/angebote/kontaktstudium/digital-innovation/digitale-barrierefreiheit">Modul Grundlagen der digitalen Barrierefreiheit</a>
an.
</p>
<!--
<p id="imagefiller" style="margin-top: 100px; text-align: center;" lang="en"><img src="./img/Orca.svg" alt="Orca screen reader logo" height="240" width="240" />
<img src="./img/Stephen_hawking_2008_nasa_cropped_240px.jpg" alt="Stephen Hawking giving a lecture for NASA's 50th anniversary" height="240" width="240" />
<img src="./img/Plage-braille-avec-touches-speciales_320px.jpg" alt="Braille display with eight keys for Braille input and other special keys" height="240" width="320" />
</p>
<p class="imagefiller"><img src="./img/Orca.svg" alt="Logo des Screenreaders Orca" height="240" width="240" />
<img src="./img/Stephen_hawking_2008_nasa_cropped_240px.jpg" alt="Stephen Hawking während einer Vorlesung anlässlich des fünfzigjährigen Bestehens der NASA" height="240" width="240" />
<img src="./img/Plage-braille-avec-touches-speciales_320px.jpg" alt="Braille-Gerät mit Tasten für Braille-Eingabe und anderen speziellen Tasten" height="240" width="320" />
</p>
-->
</main>
<footer>
<p id="licence">
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/legalcode.de"><img alt="Creative Commons License" style="border-width:0" src="./img/cc_by_4.0_88x31.png" /></a><br />
Die Website <a href="https://gpii.eu/vonanfangan/"><strong>Digitale Barrierefreiheit von Anfang an</strong></a> von <a href="https://github.com/REMEXLabs"><abbr>HdM</abbr> REMEXLabs</a> ist unter der Lizenz
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/legalcode.de">Creative Commons — Namensnennung 4.0 International — <abbr>CC</abbr> BY 4.0</a>
verfügbar.
<br />Copyright © <span lang="de">Hochschule der Medien</span> (<abbr>HdM</abbr>) / Stuttgart Media University, 2018–2019.
</p>
<p>Diese Website benutzt keine Cookies.</p>
<p><a href="publisherinfo.de.html">Impressum</a> | <a href="https://gpii.eu/legal/de/datenschutz.html">Datenschutz</a> | <a href="https://github.com/REMEXLabs/vonanfangan">GitHub repository</a></p>
</footer>
</body>
</html>