forked from fdnd-task/look-and-feel-corporate-identity
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbedienbaar.html
376 lines (366 loc) · 21.1 KB
/
bedienbaar.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
<!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/mobile.css">
<link rel="stylesheet" href="./styles/tablet.css">
<link rel="stylesheet" href="./styles/desktop.css">
<title>Bedienbaar</title>
</head>
<body>
<header>
<img id="logo" src="images/logo_vervoerregio_amsterdam.png" alt="logo Vervoerregio Amsterdam">
<div id="after-curve"></div>
<div class="topnav">
<nav id="head-nav">
<a href="index.html">Home</a>
<a href="#">Ons doel</a>
<a href="#">Checklist</a>
<a href="#">Contact</a>
</nav>
</div>
</header>
<!-- Navigatie list aan linkerkant page, primair -->
<nav id="side-nav" aria-label="side-navigation">
<ol>
<li>
<button class="nav-button" id="nav-button" data-id="card4_0">
Bedienbaar
</button>
</li>
<li>
<button class="nav-button" id="nav-button" data-id="card4_1">
Captcha's
</button>
</li>
<li>
<button class="nav-button" id="nav-button" data-id="card4_2">
Automatisch beeld
</button>
</li>
<li>
<button class="nav-button" id="nav-button" data-id="card4_3">
Tijdslimiet
</button>
</li>
<li>
<button class="nav-button" id="nav-button" data-id="card4_4">
Formulieren
</button>
</li>
<li>
<button class="nav-button" id="nav-button" data-id="card4_5">
Bediening Formulieren
</button>
</li>
<li>
<button class="nav-button" id="nav-button" data-id="card4_6">
Invoervelden
</button>
</li>
</ol>
</nav>
<main class="main-content">
<nav id="side-nav-primair" aria-label="primair-side-navigation">
<ul>
<li>
<a href="./waarneembaar.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Waarneembaar</p>
</a>
</li>
<li>
<a href="./bedienbaar.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Bedienbaar</p>
</a>
</li>
<li>
<a href="./begrijpelijk.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Begrijpelijk</p>
</a>
</li>
<li>
<a href="./robuust.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Robuust</p>
</a>
</li>
</ul>
</nav>
<!-- Hier komt de main content van de bedienbaar page -->
<section class="cards-section" id="cards-section" aria-label="Criteria-bedienbaar">
<div id="card4_0" class="card-heading">
<article id="bedienbaar">
<h2>Bedienbaar</h2>
<p>
Om te voldoen aan
<a class="tooltip" href="https://wcag.nl/kennis/richtlijnen/wcag-2-1-richtlijnen/#bedienbaar">
WCAG 2.1 Principe 2:<span class="tooltiptext">Link naar de richtlijnen</span></a>
Bedienbaar moet ervoor worden gezorgd dat mensen content op de
website kunnen vinden en gebruiken, ongeacht de manier waarop ze
er gebruik van maken. Zoals bijvoorbeeld met hulptechnologieën.
</p>
<ul>
<li>Zorg ervoor dat alles werkt met een toetsenbord.</li>
<li>Toon de toetsenbordfocus.</li>
<li>Gebruik beschrijvende titels voor pagina’s en vensters.</li>
<li>
Gebruik beschrijvende links zodat duidelijk is waar het naar toe
leidt.
</li>
<li>Gebruik geen knipperende inhoud.</li>
</ul>
<p class="p-onderwerp">Kies een onderwerp om te beginnen</p>
</article>
</div>
<!-- Card 1 -->
<div id="card4_1" class="card-heading hide-show">
<article id="captcha">
<h2>Structuur</h2>
<p>CAPTCHA’s zijn toegankelijk voor iedereen.</p>
</article>
<!-- Artikel Uitleg -->
<div class="spaties-tabs">
<h3>Uitleg</h3>
<p class="uitleg">
Een toegankelijke CAPTCHA moet op zijn minst beschikbaar zijn als
audiofragment welke je met het toetsenbord kan bereiken.
</p>
</div>
<!-- Tip button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Tip uitleg -->
<div id="article-tip" aria-label="captcha-tip">
<h3>Tip:</h3>
<p>
Je kunt ook een vernieuwde CAPTCHA of andere controles gebruiken.
</p>
</div>
</div>
<!-- Card 2 -->
<div id="card4_2" class="card-heading hide-show">
<article id="automatisch">
<h2>Bewegend beeld/geluid</h2>
<p>
Bewegend beeld en geluid dat automatisch start kan uitgezet worden
of stopt binnen 3 seconden.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<!-- <h3>Uitleg</h3>
<p class="uitleg">Hier mist uitleg</p> -->
</div>
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="automatisch-tip">
<h3>Tip:</h3>
<p>
Beter is om helemaal geen beeld en geluid te gebruiken dat
automatisch start.
</p>
</div>
</div>
<!-- Card 3 -->
<div id="card4_3" class="card-heading hide-show">
<article id="tijdslimiet">
<h2>Tijdslimiet</h2>
<p>
Bezoekers hebben geen last van een tijdslimiet bij het invullen
van gegevens
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Sommige bezoekers hebben meer tijd dan gemiddeld nodig om gegevens
in te vullen. Bijvoorbeeld omdat zij voorleessoftware gebruiken of
dyslectisch zijn. Deze bezoekers moeten de tijdslimiet op kunnen
heffen of verlengen.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="tijdslimiet-tip">
<h3>Tip:</h3>
<p>
Zorg ervoor dat de gebruiker de tijdslimiet kan stopzetten,
aanpassen of uitbreiden
</p>
</div>
</div>
<!-- Card 4 -->
<div id="card4_4" class="card-heading hide-show">
<article id="formulier">
<h2>Formulier</h2>
<p>
Bezoekers kunnen zelf fouten voorkomen bij formulieren waarbij
belangrijke acties in gang worden gezet door te annuleren,
controleren of bevestigen.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Soms kan het verkeerd invullen van een formulier ingrijpende
gevolgen hebben. Door bezoekers de mogelijkheid te bieden een
inzending terug te trekken, help je hen grote fouten voorkomen.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="formulier-tip">
<h3>Tip:</h3>
<p>
Let vooral op bij wettelijke en financiële transacties, hier zijn
de gevolgen het grootst.
</p>
</div>
</div>
<!-- Card 5 -->
<div id="card4_5" class="card-heading hide-show">
<article id="bediening">
<h2>Bediening formulieren</h2>
<p>
Alle onderdelen van formulieren zijn via het toetsenbord te
bereiken en bedienen in logische volgorde.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Een formulier wat bruikbaar is d.m.v. het toetsenbord zorgt voor
een betere gebruikservaring.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="bediening-formulieren-tip">
<h3>Tip:</h3>
<p>
Gebruik een passende styling die bij de vormgeving past en ook nog
eens toegankelijk is.
</p>
</div>
</div>
<!-- Card 6 -->
<div id="card4_6" class="card-heading hide-show">
<article id="invoer">
<h2>Invoer</h2>
<p>Alle invoervelden hebben een duidelijke instructie.</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Stel jezelf als beheerder de vraag wat je van de gebruiker wilt
vragen. Is een invoerveld noodzakelijk? Mogen gebruikers een
typefoutje maken?
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="invoer-tip">
<h3>Tip:</h3>
<p>
Bied namen en alt-tekst aan invoervelden en groepeer bij elkaar
horende velden, uiteraard met voldoende tussenruimte.
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-container">
<div class="footer-social-media">
<div class="logo-footer">
<a href="#"><img src="./images/logo_vervoerregio_amsterdam.png"></a>
</div>
<div class="icon-container">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"/></svg></a>
</div>
</div>
<div class="footer-adres">
<p class="contact-info kopje">Neem contact op</p>
<div class="adres-info">
<div class="svg-container">
<svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
<svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>
<svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 256c-35.3 0-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64s-28.7 64-64 64z"/></svg>
</div>
<div class="contact-info-container">
<p class="contact-info link">[email protected]</p>
<p class="contact-info">020-5273700</p>
<p class="contact-info">1000 AP Amsterdam, Postbus 626</p>
</div>
</div>
</div>
<div class="feedback-button">-Work in progess -</div>
</div>
<p id="copyright-year"></p>
</footer>
<script type="text/javascript" src="./scripts/javascript.js"></script>
</body>
</html>