forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
media.html
349 lines (317 loc) · 16.1 KB
/
media.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
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html lang="nl">
<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" />
<link rel="stylesheet" href="styles/progressbar.css" />
<script src="scripts/progressbar.js" defer></script>
<script
src="https://kit.fontawesome.com/cadd5161ca.js"
crossorigin="anonymous"
></script>
<title>Afbeeldingen</title>
</head>
<body>
<div class="sidebar">
<div class="innermap">
<a href="index.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-house"></i>
<p>Home</p>
</a>
</div>
<div class="innermap">
<a href="afbeeldingen.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-regular fa-images"></i>
<p>Afbeeldingen</p>
</a>
</div>
<div class="innermap">
<a href="bediening.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-keyboard"></i>
<p>Bediening</p>
</a>
</div>
<div class="innermap">
<a href="formulieren.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-list"></i>
<p>Formulieren</p>
</a>
</div>
<div class="innermap">
<a id="focus-media" href="media.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-photo-film"></i>
<p>Media</p>
</a>
</div>
<div class="innermap">
<a href="navigatie.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-arrow-pointer"></i>
<p>Navigatie</p>
</a>
</div>
<div class="innermap">
<a href="ontwerp.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-paintbrush"></i>
<p>Ontwerp</p>
</a>
</div>
<div class="innermap">
<a href="tekst.html">
<svg viewBox="0 0 388 268" fill="#ffd05f" xmlns="http://www.w3.org/2000/svg">
<path
d="M168.133 0H25.8667C17.2444 0 0 5.16 0 25.8V242C0 250.6 5.17333 267.8 25.8667 267.8H362.133C370.756 267.8 388 262.64 388 242V51.6C388 43 382.827 25.8 362.133 25.8H219.867C215.556 25.8 204.347 23.22 194 12.9C183.653 2.58 172.444 0 168.133 0Z"
></path>
</svg>
<i class="fa-solid fa-book"></i>
<p>Teksten</p>
</a>
</div>
</div>
<a href="#" class="to-top" aria-label="BackToTopButton">
<i class="fa-solid fa-circle-chevron-up fa-3x"></i>
</a>
<div class="main-background">
<div class="main">
<header>
<a href="https://www.vervoerregio.nl/">
<img src="/assets/Logo.png" alt="Logo Vervoerregio Amsterdam" />
</a>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p>Donkere Modus!</p>
</div>
</header>
<main>
<div class="topnav">
<div id="myLinks">
<a href="index.html">Home</a>
<a href="afbeeldingen.html">Afbeeldingen</a>
<a href="bediening.html">Bediening</a>
<a href="formulieren.html">Formulieren</a>
<a href="media.html">Media</a>
<a href="navigatie.html">Navigatie</a>
<a href="ontwerp.html">Ontwerp</a>
<a href="tekst.html">Teksten</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<progress value="0" max="100"></progress>
<div class="progress-bar">
<label class="checkboxfour">
<input class="step input-1" type="checkbox" name="checkbox" />
<input class="step input-2" type="checkbox" name="checkbox" />
<input class="step input-3" type="checkbox" name="checkbox" />
<input class="step input-4" type="checkbox" name="checkbox" />
<input class="step input-5" type="checkbox" name="checkbox" />
<input class="step input-6" type="checkbox" name="checkbox" />
<input class="step input-7" type="checkbox" name="checkbox" />
</label>
</div>
<div class="box">
<button class="accordion">Geef media een kort tekstalternatief</button>
<div class="panel">
<br />
<p>
Alle mediabestanden moeten een korte tekstuele introductie hebben, ook als
er volledige alternatieven zoals een transcript of audiodesciptie aanwezig
zijn. Zo’n korte introductie moet de inhoud van het mediabestand globaal
beschrijven. Met deze informatie kunnen bezoekers zelf beslissen wat ze
met het mediabestand willen doen. Dit is vooral handig voor bezoekers die
de content niet gemakkelijk kunnen scannen, zoals bezoekers die gebruik
maken van schermlezers.<br /><br />
Een korte tekstuele introductie kan worden gegeven met een beschrijvende
kop, een beschrijvende titel of eventueel een beschrijvend label.
</p>
</div>
<button class="accordion">
Plaats een transcript bij geluidsfragmenten en bewegende beelden
</button>
<div class="panel">
<br />
<p>
Alle geluidsfragmenten en bewegende beelden moeten een transcript hebben.
Ook voor filmpjes kan een transcript een waardevolle toevoeging zijn. Een
transcript is een uitgeschreven tekst waarin alles wordt beschreven dat te
zien, te horen en te doen is. Bijvoorbeeld alle gesproken tekst, maar ook
de belangrijke beelden en geluiden. Eventuele interactieve elementen,
zoals een link, moeten ook worden opgenomen in een transcript.<br /><br />
Een goed transcript:
</p>
<ul>
<li>Bevat alle gesproken tekst.</li>
<li>Beschrijft alle belangrijke beelden.</li>
<li>Beschrijft alle belangrijke geluiden.</li>
<li>Bevat alle links.</li>
<li>Beschrijft wie er spreekt als dit belangrijk is.</li>
<li>Benadrukt het volume van de spreker als dit belangrijk is.</li>
</ul>
<p>
Een transcript moet voor alle bezoekers gemakkelijk te bereiken zijn.
Plaats een transcript, of een link naar het transcript, altijd direct
onder de code van het mediabestand.<br /><br />
Aan geluidsfragmenten moet altijd een transcript worden toegevoegd. Aan
bewegende beelden moet alleen een transcript worden toegevoegd als er geen
audiodescriptie aanwezig is. Voor filmpjes geldt dat dit alleen verplicht
is als er interactieve elementen in het filmpje aanwezig zijn.
</p>
</div>
<button class="accordion">Voeg ondertitels toe aan filmpjes</button>
<div class="panel">
<br />
<p>
Alle filmpjes moeten ondertitels voor doven en slechthorenden hebben. In
ondertitels voor doven en slechthorenden moeten de gesproken tekst én de
belangrijke geluiden worden overgenomen. Belangrijk geluiden zijn
bijvoorbeeld een deurbel of een explosie. Ook muziek kan belangrijk zijn
om het filmpje of de sfeer in het filmpje te kunnen begrijpen.<br /><br />
Goede ondertitels:<br />
</p>
<ul class="lijst">
<li>bevatten alle gesproken tekst.</li>
<li>beschrijven alle belangrijke geluiden.</li>
<li>beschrijven wie er spreekt als dit niet direct duidelijk is.</li>
<li>benadrukken het volume van de spreker als dit belangrijk is.</li>
<li>zijn goed zichtbaar.</li>
<li>lopen zo veel mogelijk gelijk met het geluid.</li>
<li>bedekken geen andere informatie.</li>
</ul>
<p>
<br />Het is niet erg als de gesproken tekst een heel klein beetje wordt
versimpeld om de ondertitels niet te lang te maken.
<br /><br />Er zijn verschillende manieren om ondertitels toe te voegen:
ingebakken in het filmpje (open captions) of toegevoegd als een apart
ondertitelbestand bij het filmpje (closed captions)
</p>
</div>
<button class="accordion">Voeg een audiodescriptie toe aan filmpjes</button>
<div class="panel">
<br />
<p>
In filmpjes wordt soms niet alle zichtbare informatie óók met geluid
overgedragen. Sommige dingen zijn wel te zien, maar niet te horen. Deze
visuele informatie moet met een audiodescriptie worden toegevoegd aan het
filmpje. In een audiodescriptie vertelt een voice-over over belangrijke
zichtbare beelden die niet zijn af te leiden uit dat wat te horen is in
het filmpje. Dat kan bijvoorbeeld gaan om handelingen, personen maar ook
om tekst die alleen in het beeld te zien is. Dit gebeurt op de momenten
dat er pauzes zijn in het originele geluid van het filmpje. Zo kunnen
bezoekers die blind of slechtziend zijn het filmpje ook goed volgen.<br /><br />
Er zijn verschillende manieren om een audiodescriptie toe te voegen:
toegevoegd in het geluid van het filmpje of toegevoegd als alternatief
audiospoor.<br /><br />
Een audiodescriptie hoort zo veel mogelijk samen te vallen met de
beschreven zichtbare informatie.<br /><br />
Voor filmpjes is een audiodescriptie niet altijd nodig. Als alle zichtbare
informatie ook te horen is, dan is het niet verplicht. Aan bewegende
beelden moet alleen een audiodescriptie worden toegevoegd als er geen
transcript aanwezig is.
</p>
</div>
<button class="accordion">
Zorg dat geluid dat automatisch begint te spelen uitgezet kan worden of
binnen 3 seconden stopt
</button>
<div class="panel">
<br />
<p>
Laat geluid niet automatisch spelen na het laden van een pagina, of zorg
er in elk geval voor dat het geluid niet langer dan 3 seconden duurt. Voor
bezoekers die gebruik maken van voorleessoftware kan het storend zijn als
geluid automatisch begint te spelen. Zij kunnen de stem van
voorleessoftware dan niet meer goed te horen. Ook voor bezoekers die
moeite hebben met concentratie kunnen er door worden afgeleid.<br /><br />
Geluid dat toch automatisch begint te spelen, moet eenvoudig kunnen worden
gepauzeerd, gestopt of zachter worden gezet. Zorg dan voor een pauze- of
stopknop en een volumeregelaar bij het geluid. Voorzie eventueel ook een
skiplink zodat deze bediening gemakkelijk te bereiken is.
</p>
</div>
<button class="accordion">
Zorg dat bewegende content kan worden gepauzeerd, gestopt of worden uitgezet
</button>
<div class="panel">
<br />
<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.<br /><br />
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">
<br />
<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>
</main>
</div>
<footer>
<div class="socials">
<p>Deel deze tool op:</p>
<a href="https://www.facebook.com/">
<img src="assets/facebook-svgrepo-com (1).svg" alt="Facebook Logo" />
</a>
<a href="https://twitter.com/">
<img src="assets/twitter-svgrepo-com (1).svg" alt="Twitter Logo" />
</a>
</div>
</footer>
</div>
</body>
<script src="scripts/scripts.js"></script>
</html>