forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmedia.html
455 lines (374 loc) · 17.7 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
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<!DOCTYPE html>
<html lang="NL" dir="ltr">
<!-- Sascha Davidson -->
<head>
<meta charset="utf-8">
<meta name="keywords" content="wcaw" />
<meta name="description" content="all human accessible website" />
<meta name="author" content="Sascha Davidson" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="https://kit.fontawesome.com/b6f0c431c5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/prism.css">
<title>Media</title>
<link rel="icon" type="image/png" href="assets/va-favicon.svg" />
</head>
<body>
<header>
<div class="site-header">
<div class="site-identity">
<a href="index.html">
<img src="assets/vervoerregio-logo.svg" alt="Vervoerregio Amsterdam">
</a>
</div>
<section id="burger" class="burger">
<section>
<p>menu</p>
</section>
<section>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</section>
</section>
<nav>
<ul class="main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="kennisbank.html">Kennisbank</a></li>
<li><a href="wet-en-regelgeving.html">Wet- en regelgeving</a></li>
<li><a href="richtlijnen.html">Richtlijnen</a></li>
<li><a href="checklist.html">checklist</a></li>
<button id="filter">Filter</button>
</ul>
</nav>
</div>
<dialog id="favDialog">
<form>
<div class="dialog-content">
<label><input type="checkbox" id="mode"> Donker moden</label>
<label><input type="checkbox" id=""> Laag / hoog contrast</label>
<label><input type="checkbox" id=""> Lettergrootte</label>
<label><input type="checkbox" id=""> Bewegend beeld</label>
</div>
<button value="cancel">Terug</button>
</form>
</dialog>
<section class="vervoerregio-path-box">
<div class="vervoerregio-path-box-devided">
<section class="responsive-width"></section>
<section class="logo-width"></section>
<?xml version="1.0" encoding="UTF-8"?>
<svg class="vervoerregio-path-curve" id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 990.38 392.17">
<defs>
</defs>
<path class="cls-1" d="M0,392.17V0H990.38C495.19,0,495.19,392.17,0,392.17Z" />
</svg>
</div>
<div id="socialmedia" class="socialmedias-button">
<a href="https://www.facebook.com/vervoerregio" class="button">
<div class="icon">
<i class="fab fa-facebook"></i>
</div>
<span>Facebook</span>
</a>
<a href="https://www.twitter.com/vervoerregio" class="button">
<div class="icon">
<i class="fab fa-twitter"></i>
</div>
<span>Twitter</span>
</a>
<a href="https://www.instagram.com/vervoerregio/" class="button">
<div class="icon">
<i class="fab fa-instagram"></i>
</div>
<span>Instagram</span>
</a>
<a href="https://www.linkedin.com/company/vervoerregio-amsterdam/?originalSubdomain=nl" class="button">
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<span>Linkedin</span>
</a>
<a href="#" class="button">
<div class="icon">
<i class="fab fa-github"></i>
</div>
<span>Github</span>
</a>
</div>
</section>
</header>
<div class="header-style-afbeeldingen">
<section class="header-style-content-3">
<section class="header-style-title">
<h1>Media</h1>
</section>
</section>
</div>
<main>
<section class="content-richtlinen">
<div class="afbeelding-content">
<section class="title-afbeeldingen">
<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>
<br><br>
<ul>
<li>Geluidsfragmenten (geluid zonder beeld)
</li>
<li>Bewegende beelden (beeld zonder geluid)
</li>
<li>Filmpjes (beeld met geluid)
</li>
</ul>
<br><br>
<p>Soms worden geluidsfragmenten of filmpjes gebruikt als een alternatief voor een tekst. Als alle informatie
die te zien of te horen is ookk in de tekst staat, dan spreek je van een media-alternatief. Met een
gelijkwaardig media-alternatief hoeft een mediabestand niet te voldoen aan de bijbehorende eisen zoals
ondertitels, transcript of audiodescriptie.
<br><br>
In Nederland geldt een uitzondering voor media die vóór 23 september 2020 zijn gepubliceerd. Ook live media
hoeft niet direct toegankelijk te zijn. Als het na de uitzending online blijft staan of ergens opnieuw wordt
gepubliceerd, dan moet het wel toegankelijk worden gemaakt.
</p>
</section>
<div class="details-box-shadow">
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Geef media een kort tekstalternatief</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Plaats een transcript bij geluidsfragmenten en bewegende beelden</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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>
<br><br>
<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>
<br><br>
<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>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Voeg ondertitels toe aan filmpjes</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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:
</p>
<br><br>
<ul>
<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>
<br><br>
<p>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>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Voeg een audiodescriptie toe aan filmpjes</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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.
</p>
<br><br>
<p>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>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Zorg dat geluid dat automatisch begint te spelen uitgezet kan worden of binnen 3 seconden stopt</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Zorg dat bewegende content kan worden gepauzeerd, gestopt of worden uitgezet</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Gebruik geen content dat meer dan 3 keer per seconde flitst</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<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>
</section>
</details>
</div>
</div>
<div class="progresion">test</div>
</details>
</main>
<footer>
<section class="vervoerregio-path-box-footer">
<div class="vervoerregio-path-footer">
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2">
<path d="M4,0H0c2,0,2,2,4,2" />
</svg>
</div>
<div class="width-footer"></div>
<div class="responsive-width-footer"></div>
</section>
<Section class="footer-content">
<div class="regio-logo"> <img src="assets/illustraties/vervoerregio's.svg" alt=""> </div>
<div class="contact">
<div>
<h4>Contact</h4>
<ul class="ul-footer">
<li>Vervoerregio<br> Jodenbreestraat 25<br> 1011 NH Amsterdam</li>
<li>Postbus 626<br> 1000 AP Amsterdam</li>
<li>020-5273700</li>
<li>info@vervoerregio.nl</li>
<li>Aanmelden Nieuwsbrief</li>
</ul>
</div>
</div>
<div class="footer-bericht">
<h4>Verstuur een bericht</h4>
<form action="/action_page.php">
<div class="footer-naam-form">
<label>Voor naam<input type="text" id="fname" name="firstname" placeholder="Sascha"></label>
<label>achternaam<input type="text" id="lname" name="lastname" placeholder="Davidson"></label>
</div>
<label>Bericht<textarea placeholder="Berijk ons met al je vragen"></textarea></label>
<input type="submit" value="Verstuur">
</form>
</div>
</Section>
<section class="sub-footer">
<p>© Copyright 2022 Vervoerregio Amsterdam</p>
<ul>
<li><a href="#"> Algemene voorwaarden</a></li>
<li><a href="#"> Disclaimer</a></li>
<li><a href="#"> Privacyverklaring</a></li>
<li><a href="#"> Cookieverklaring</a></li>
</ul>
</section>
</footer>
<script src="scripts/script.js" charset="utf-8"></script>
<script src="scripts/prism.js"></script>
</body>
</html>