forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigatie.html
460 lines (392 loc) · 18.2 KB
/
navigatie.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
456
457
458
459
460
<!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>Navigatie</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>Navigatie</h1>
</section>
</section>
</div>
<main>
<section class="content-richtlinen">
<div class="afbeelding-content">
<section class="title-afbeeldingen">
<p>De navigatie is een belangrijk onderdeel van een website. Door te zorgen dat alle bezoekers goed over een
website kunnen navigeren, krijgen ze toegang tot alle beschikbare informatie.
<br><br>
Een gestructureerde en consequente paginaopbouw en skiplinks zorgen dat bezoekers zonder veel moeite over de
pagina kunnen navigeren.
</p>
</section>
<div class="details-box-shadow">
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Geef webpagina's een titel die het onderwerp of doel van de pagina beschrijft</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<p>De paginatitel van een webpagina moet het onderwerp of doel van de pagina beschrijven. Een
beschrijvende paginatitel maakt het voor iedereen makkelijker om te navigeren door de website.
Paginatitels worden getoond in het venster van de browser of in het tabblad van de pagina. Met een goede
paginatitel kunnen bezoekers de pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen
open staan.
<br><br>
Goede paginatitels:
</p>
<ul>
<li>beschrijven duidelijk het onderwerp of doel van de pagina.
</li>
<li>veranderen als een nieuwe pagina wordt ingeladen.
</li>
<li>hebben de unieke informatie vooraan.
</li>
<li>zijn uniform met de andere pagina’s.
</li>
<li>zijn beknopt.
</li>
<li>zijn uniek.
</li>
</ul>
<br><br>
<p>Paginatitels worden door hulptechnologieën gebruikt om de webpagina aan te duiden. Deze informatie
wordt als eerst gepresenteerd bij het openen van een pagina.
<br><br>
Gebruik het <code>title</code>-element in het
<code><head></code>-element in de code van de pagina. Beschrijf in dit element het onderwerp of
doel van de pagina.
<br><br>
In de code ziet dat er zo uit:
</p>
<script type="text/plain" class="language-html"><html lang="nl">
<head>
<title>WCAG.nl - Digitale toegankelijkheid voor iedereen</title>
...
</head>
...
</html></script>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Geef links een linktekst die het doel van de link beschrijft</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<p>Geef links op een webpagina een linktekst waaruit het doel van de link duidelijk is af te leiden. Een
beschrijvende linktekst is voor iedereen duidelijker. Zorg dat de linktekst zo is geformuleerd dat
bezoekers direct weten waar de link naar verwijst.</p>
<br>
<p>Schrijf dus niet:</p>
<ul>
<li>Lees meer. (onduidelijk)
</li>
<li>LinkedIn. (onduidelijk)
</li>
</ul>
<br>
<p>Maar zeg wel:</p>
<ul>
<li>Lees meer de over digitale toegankelijkheid.
</li>
<li>Ga naar onze LinkedIn pagina.
</li>
</ul>
<br>
<p>Bezoekers die gebruik maken van een schermlezer kunnen een lijst met alle links gebruiken om over de
pagina te navigeren.
<br><br>
Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de
link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in
de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.
<br><br>
In de code ziet dat er zo uit:
</p>
<br>
<script type="text/plain" class="language-html"><a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a>
<a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a></script>
<p>Wat ook kan is het verbergen van een deel van de linktekst met CSS:</p>
<script type="text/plain" class="language-html"><a href="info.html">Lees meer <span class="assistive">over digitale toegankelijkheid</span></a>
</script>
<script type="text/plain" class="language-css">.assistive {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}</script>
<p>Een linktekst mag nooit leeg zijn. Zonder linktekst kan natuurlijk niet worden bepaald waar de link
naar verwijst. Een lege link is misschien niet zichtbaar op de pagina maar deze links komen wél terug in
de focus volgorde. Schermlezers merken deze ook link op.
<br><br>
In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over
functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstalternatief dat beschrijft
waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei hetzelfde
linkdoel, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van
hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.
</p>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Zorg dat herhalende blokken op een pagina overgeslagen kunnen worden</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<p>Op veel websites staan blokken content die op iedere pagina worden herhaald. Bijvoorbeeld het logo, het
navigatiemenu, het zoekveld, enz. Bezoekers die gebruik maken van een schermlezer, zoals
voorleessoftware of een brailleleesregel, en bezoekers die met het toetsenbord navigeren moeten, iedere
keer als ze op een pagina komen, bovenaan de pagina beginnen. De inhoud wordt steeds volledig
voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang.
<br><br>
Zorg daarom voor een manier dat zorgt dat bezoekers herhalende blokken kunnen overslaan. Dit kan grofweg
op 2 manieren worden opgelost:
</p>
<ol>
<li>Voeg skiplinks toe.</li>
<li>Groepeer onderdelen in de code.</li>
</ol>
<h3>Voeg skiplinks toe</h3>
<p>Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee geef je
bezoekers de mogelijkheid om sneller bij een pagina-onderdeel te komen. Skiplinks zijn doorgaans niet
gelijk zichtbaar, maar worden ze pas zichtbaar als er met het toetsenbord door de pagina wordt
genavigeerd.
<br><br>
In de code ziet dat er zo uit:
</p>
<script type="text/plain" class="language-html"><html>
<body>
<header>
<a href="#content">Ga naar de inhoud</a>
<img decoding="async" src="logo.jpg" alt="WCAG.nl">
<nav>
...
</nav>
</header>
<main>
<h1 id="content" tabindex="-1">Inhoud</h1>
...
</main>
</body>
</html></script>
<p>
Skiplinks horen het eerste element op een pagina te zijn. Zet ze dus bovenaan in de code en gebruik ze
op iedere pagina waarop herhalende blokken staan.
</p>
<br>
<h4>Groepeer onderdelen in de code
</h4>
<p>Herhalende blokken overslaan kan ook door deze onderdelen te groeperen in de code. Hiervoor bestaan
meerdere technieken. Door deze onderdelen te groeperen kunnen bezoekers die gebruik maken van
hulptechnologieën gemakkelijk over de pagina navigeren. Deze bezoekers kunnen bijvoorbeeld een lijst van
alle koppen gebruiken of direct naar een oriëntatiepunt navigeren.</p>
<ul>
<li>Gebruik een kop-element aan het begin van alle blokken op een pagina.
</li>
<li>Gebruik ARIA landmark-elementen zoals <code><header></code> , <code><main></code> en
<code><footer></code> maar ook bijvoorbeeld de navigatie en de zoekfunctie.</li>
</ul>
<p>Dit moet wel op iedere pagina op dezelfde manier toegepast worden.</p>
<p>Zorg ook dat alle <code><iframe></code>-elementen een naam hebben zodat ze gemakkelijk
overgeslagen kunnen worden. Gebruik hiervoor het <code>title</code>-attribuut. Zorg dat deze
beschrijving het onderwerp of doel van het filmpje goed beschrijft.
<br><br>
In de code ziet dat er zo uit:
</p>
<script type="text/plain" class="language-html"><iframe src="https://www.youtube.com/embed/..." title="Digitale toegankelijkheid uitgelegd">
</iframe></script>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Zorg voor meerdere manieren om een pagina te vinden</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<p>Webpagina’s moeten op meer dan één manier te vinden zijn. Sommige bezoekers kunnen moeite hebben met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller.
<br><br>
Zorg daarom voor meer dan één manier om een pagina op een website te vinden. Bied naast de navigatie bijvoorbeeld ook een zoekfunctie aan, of publiceer een pagina met een sitemap.</p>
</section>
</details>
<details>
<summary>
<i class="fa-solid fa-caret-down"></i>
<h3>Plaats pagina-onderdelen op iedere pagina in een vaste volgorde</h3>
<label><input type="checkbox">
<i class="fa-solid fa-check"></i>
</label>
</summary>
<section class="detail-list">
<p>Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.
<br><br>
Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.</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>