forked from fdnd-task/all-human-accessible-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
afbeeldingen.html
337 lines (325 loc) · 13 KB
/
afbeeldingen.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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/style.css" />
<script
src="https://kit.fontawesome.com/cadd5161ca.js"
crossorigin="anonymous"
></script>
<title>toegankelijkheid</title>
</head>
<body>
<nav>
<img src="assets/Logo.png" alt="Logo website" />
<a href="index.html">
<span>Home</span>
</a>
</nav>
<div class="nav-bar">
<h4>Menu</h4>
<a href="afbeeldingen.html"><button>Afbeeldingen</button></a>
<a href="bediening.html"><button>Bediening</button></a>
<a href="formulieren.html"><button>Formulieren</button></a>
<a href="media.html"><button>Media</button></a>
<a href="navigatie.html"><button>Navigatie</button></a>
<a href="ontwerp.html"><button>Ontwerp</button></a>
<a href="teksten.html"><button>Teksten</button></a>
</div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<em>Dark Mode!</em>
</div>
<header>
<h2>Afbeeldingen</h2>
<br />
<p>
Content van een website dat niet uit tekst bestaat, zoals foto’s, icoontjes en
andere afbeeldingen, kan toegankelijk worden gemaakt door deze ook als tekst
beschikbaar te maken. Tekst kan namelijk door hulptechnologieën op verschillende
manieren worden gepresenteerd. Voorleessoftware kan een tekst omzetten in spraak
(auditief) en een brailleleesregel kan het vertalen naar braille (tactiel). Zo
worden afbeelding ook toegankelijk voor bezoekers die de afbeelding niet kunnen
waarnemen.
</p>
<br />
<p>
De invulling van zo’n tekstalternatief is afhankelijk van de context van de
afbeelding en kan per situatie zelfs verschillen voor dezelfde afbeelding.
</p>
</header>
<a href="#" class="to-top">
<i class="fa-solid fa-circle-arrow-up fa-4x"></i>
</a>
<div class="box">
<button class="accordion">
Zorg dat afbeeldingen in de code een tekst alternatief kunnen krijgen
</button>
<div class="panel">
<p>
Alle afbeeldingen moeten een tekstalternatief hebben. Een tekstalternatief kan
op verschillende manieren worden toegevoegd:
</p>
<br />
<h4>Tekstalternatief voor een <code><img></code>-element</h4>
<br />
<p>
Bij een <code><img></code>-element wordt een tekstalternatief gegeven met
behulp van het alt-attribuut. In de code ziet dat er zo uit:
</p>
<br />
<pre>
1| <img src="hond.jpg" alt="Hond speelt met een bal">
</pre
>
<br />
<h4>Tekstalternatief voor een <code><svg></code>-element</h4>
<br />
<p>
Bij een <code><svg></code>-element wordt een tekstalternatief gegeven met
behulp van het title-element in de svg. Gebruik ook aria-attribuut role="img" om
ervoor te zorgen dat zo veel mogelijk ondersteunende technologieën het
<code><svg></code>-element herkennen als een afbeelding. In de code ziet dat
er zo uit:
</p>
<br />
<pre>
1| <svg role="img">
2| <title>Hond speelt met een bal</title>
3| ...
4| >/svg
</pre
>
<br />
<h4>Tekstalternatief voor afbeeldingen die is geplaatst met css</h4>
<br />
<p>
Aan een afbeelding die geplaatst is met CSS kan een tekstalternatief worden
gegeven met een <code>aria-label</code>.
</p>
<br />
<pre>
1| <div id=”logo” aria-label=”Hond speelt met een bal”>
</pre
>
<br />
<h4>Invulling van het tekstalternatief</h4>
<br />
<p>
De invulling van een tekstalternatief wordt bepaald door de functie die een
afbeelding heeft. In veel gevallen draagt een afbeelding informatie over.
Beschrijf dan in het tekstalternatief wat er op de afbeelding te zien is. Bij
een afbeelding die ook een link is, gaat het juist om het beschrijven waar de
link naar toe verwijst. Als een afbeelding geen informatie aan de pagina
toevoegt, dan is het beter om het helemaal geen tekstalternatief te geven zodat
het kan worden genegeerd door hulptechnologieën.
</p>
</div>
<button class="accordion">
Geef afbeeldingen die informatie overdragen een beschrijvend tekstalternatief
</button>
<div class="panel">
<br />
<p>
Afbeeldingen die informatie overbrengen zijn noodzakelijk voor het begrijpen van
de tekst. De afbeeldingen voegen extra informatie toe aan de pagina. Deze
afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft wat er
op de afbeelding te zien is. De invulling is afhankelijk van de context en kan
per situatie afwijkend zijn voor dezelfde afbeelding.
</p>
<br />
<p>
In een CMS kan een tekstalternatief doorgaans worden toegevoegd in de
mediatheek.
</p>
<br />
<p>In de code ziet dat er zo uit:</p>
<br />
<pre>
<img src="poes.jpg" alt="Witte poes speelt met een rode bal">
</pre
>
<br />
<p>
Het tekstalternatief moet een goede vervanging kunnen zijn voor een afbeelding.
Bedenk bij het schrijven van het tekstalternatief altijd wat de bedoeling is van
de afbeelding. Houd een tekstalternatief altijd nuttig en beknopt.
</p>
</div>
<button class="accordion">
Geef complexe afbeeldingen een langere beschrijvng
</button>
<div class="panel">
<br />
<p>
Soms is het niet mogelijk om een afbeelding volledig te beschrijven in een kort
tekstalternatief. Bijvoorbeeld als het gaat om een uitgebreide infographic of
een grafiek. Dit soort complexe afbeeldingen moeten ook volledig worden
beschreven in een tekstalternatief. Geef in dat geval naast een beknopte
beschrijving in het <code>alt</code>-attribuut ook een langere beschrijving in
de omringende tekst.
</p>
<br />
<pre>
1| <img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2021 met 18% gestegen">
2| <div>
3| <p>De groei van maandelijkse verkopen in 2021 tegen 2020 verliep als volgt:</p>
4| <ul>
5| <li>Januari: +22%<li>
6| <li>...
7| <div>
</pre
>
<br />
<p>
Een langere beschrijving mag ook op een aparte pagina worden geplaatst. Plaats
dan een link met de verwijzing naar die andere pagina direct voor of na de
afbeelding.
</p>
<br />
<pre>
1| <img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2021 met 18% gestegen">
2| <a href=”/langere-beschrijving.html”>Uitgebreide beschrijving van de grafiek met verkoopcijfers</a>
</pre
>
<br />
<p>
De omringende tekst hoort ook te worden gekoppeld aan de afbeelding. Dit is geen
verplichting maar wel erg handig. Hiervoor kan gebruik worden gemaakt van het
<code>aria-describedby</code>-attribuut. Gebruik het <code>ID</code>van het
element waar de complexe afbeelding beschreven wordt. Deze informatie hoort dan
ook zichtbaar te zijn voor bezoekers die wel kunnen zien.
</p>
<br />
<pre>
1| <img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2020 met 18% gestegen" aria-describedby="beschrijving">
2| <div id="beschrijving">
3| <p>De groei van maandelijkse verkopen in 2020 tegen 2019 verliep als volgt:</p>
4| <ul>
5| <li>Januari: +22%</li>
6| <li>...
7| </div>
</pre
>
</div>
<button class="accordion">
Geef afbeeldingen die ook een link zijn een tekstalternatief dat het doel van de
link beschrijft
</button>
<div class="panel">
<br />
<p>
In de gevallen dat niet tekst maar alleen een afbeelding als link wordt
gebruikt, spreken we over functionele afbeeldingen. Dit kunnen afbeeldingen zijn
die verwijzen naar een andere pagina of website, maar ook afbeeldingen die een
actie op de pagina uitvoeren.
</p>
<br />
<p>
Deze afbeeldingen moeten een tekstalternatief hebben dat het doel van de link
beschrijft, of die beschrijft wat er gebeurd als op de afbeelding wordt geklikt.
Voorleessoftware gebruikt het tekstalternatief namelijk als linktekst. Daarom is
het belangrijker om het doel van de link te beschrijven, in plaats van wat er op
de afbeelding te zien is.
</p>
<br />
<p>
Als er ook tekst staat op een functionele afbeelding, dan moeten de tekst op de
afbeelding én het doel van de link allebei in het tekstalternatief worden
vermeld. Hierdoor kunnen bezoekers die met spraakherkenning werken de link ook
makkelijk bereiken.
</p>
</div>
<button class="accordion">
Zorg dat decoretieve afbeeldingen door hulptechnologieen genegeerd kunnen worden
</button>
<div class="panel">
<br />
<p>
Afbeeldingen die puur ter decoratie op de pagina zijn geplaatst, horen geen
tekstalternatief te hebben. Dit zijn bijvoorbeeld afbeeldingen die geen
informatie overdragen en niet noodzakelijk zijn voor het begrijpen van de tekst.
Deze afbeeldingen moeten worden genegeerd door hulptechnologieën. Decoratieve
afbeeldingen kunnen het best met CSS worden geplaatst.
</p>
<br />
<pre>
1| <div class="line"></div>
</pre
>
<br />
<pre>
.line {
background-image: url("horizontale-lijn.jpg");
}
</pre
>
<br />
<p>
Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan
moet het <code>alt</code>-attribuut in het <code><img></code>-element worden
leeg gelaten. Het<code>alt</code>-attribuut moet wel aanwezig zijn maar het
heeft dan geen tekst.
</p>
<br />
<pre>
2| <img src="horizontale-lijn.jpg" alt="" />
</pre
>
</div>
<button class="accordion">Gebruik geen afbeeldingen van tekst</button>
<div class="panel">
<br />
<p>
Gebruik geen afbeeldingen van tekst om informatie over te dragen. Afbeeldingen
van tekst zijn voor sommige bezoekers niet handig. De lettergrootte in een
afbeelding schaalt namelijk vaak niet goed mee. Ook kunnen bezoekers tekst die
is ingebakken in een afbeelding niet aanpassen naar eigen voorkeuren.
</p>
<br />
<p>
Gebruik daarom ‘echte’ tekst. Tekst die daadwerkelijk als tekst op de pagina
staat kan goed worden vormgegeven met CSS. Hiermee kan bijvoorbeeld de kleur,
het lettertype, de lettergrootte, d e regelhoogte en de letterafstand en worden
ingesteld. Eventueel kan tekst met CSS ook bovenop een afbeelding worden
geplaatst.
</p>
</div>
<button class="accordion">
Zorg dat bewegende content kan worden gepauzeerd, gestopt of worden uitgezet
</button>
<div class="panel">
<p>
Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start
én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden
uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere
carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met
een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die
gebruik maken van een schermlezer kan dit storend zijn.
</p>
<br />
<p>
Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt
ook de frequentie van updates mag worden aangepast.
</p>
</div>
<button class="accordion">
Gebruik geen content dat meer dan 3 keer per seconde flitst
</button>
<div class="panel">
<p>
Gebruik geen flitsende content. Laat onderdelen in elk geval niet meer dan 3
keer per seconde flitsen. Bezoekers met bepaalde vormen van epilepsie kunnen een
aanval krijgen als ze kijken naar knipperende of flitsende afbeeldingen of
media.
</p>
</div>
</div>
<script src="scripts/script.js"></script>
</body>
</html>