forked from fdnd-task/all-human-accessible-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bediening.html
176 lines (161 loc) · 7.22 KB
/
bediening.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
<!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>Donkere modus!</em>
</div>
<header>
<h2>Bediening</h2>
<br />
<p>
Bediening van een website is één van de belangrijkste onderdelen. Zonder goede
bediening ook geen interactie.
</p>
<br />
<p>
Veel bezoekers gebruiken een muis en toetsenbord om over het web te navigeren.
Maar dit is niet voor iedereen vanzelfsprekend. Zorg dat functionaliteit niet
alleen via muis of toetsenbord te gebruiken is.
</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 alle functies te bereiken en gebruiken zijn met alleen het toetsenbord
</button>
<div class="panel">
<p>
Alle functies op een website moeten te bereiken en gebruiken zijn met alleen het
toetsenbord. Sommige bezoekers kunnen geen muis gebruiken door bijvoorbeeld een
visuele of motorische beperking. Als alle functionaliteit met het toetsenbord
kan worden bediend, dan werkt deze ook met een groot aantal hulptechnologieën.
Zorg daarom dat onderdelen zoals links, knoppen, navigatie, invoervelden,
selectievakjes, keuzerondjes, keuzelijsten en alle andere interactieve functies
de toetsenbordfocus kunnen krijgen en kunnen worden gebruikt.
<br /><br />Standaard HTML-elementen voor links, knoppen en formulierelementen
op de website zijn goed toegankelijk met het toetsenbord.
<br /><br />De standaard toetsenbordnavigatie is als volgt:
</p>
<br />
<ul>
<li>Met TAB navigeert de toetsenbordfocus vooruit.</li>
<li>Met SHIFT + TAB navigeert de toetsenbordfocus achteruit.</li>
<li>
Met de pijltoetsen kan worden genavigeerd in gegroepeerde menu’s of
radiobuttons.
</li>
</ul>
<p>
<br />Bezoekers die gebruik maken van het toetsenbord gebruiken de TAB-toets om
door een website te navigeren. De TAB-toets verplaatst de toetsenbordfocus naar
het volgende focuseerbare onderdeel.
</p>
</div>
<button class="accordion">
Zorg dat een bezoeker die alleen het toetsenbord gebruikt niet vast komt te zitten
op de pagina
</button>
<div class="panel">
<br />
<p>
Als bezoekers met het toetsenbord naar een onderdeel op de pagina kunnen
navigeren, maar er niet meer vandaan kunnen dan is dit een toetsenbordval. Om
uit een toetsenbordval te raken is de enige manier vaak om de muis (of ander
aanwijsapparaat) te gebruiken of om de pagina helemaal te herladen. Dit is dit
geen optie voor bezoekers die geen gebruik kunnen maken van de muis. Dit komt
soms voor als er plugins worden gebruikt.
<br /><br />Zorg dat met het toetsenbord helemaal over de pagina kan worden
genavigeerd.
</p>
</div>
<button class="accordion">
Geef bezoekers de mogelijkheid om sneltoetsen zelf in te stellen of uit te zetten
</button>
<div class="panel">
<br />
<p>
Op sommige websites kunnen bezoekers gebruik maken van sneltoetsen. Met
sneltoetsen kunnen bezoekers gemakkelijk functies uitvoeren of navigeren naar
een pagina. Dit werkt goed voor veel bezoekers die gebruik maken van het
toetsenbord maar kunnen conflicteren sommige hulptechnologieën. Hierdoor kunnen
sneltoetsen onbedoeld worden geactiveerd. Dit geldt bijvoorbeeld voor bezoekers
die gebruik maken van software voor spraakherkenning.
<br /><br />Zorg daarom dat sneltoetsen die bestaan uit één karakter kunnen
worden aangepast, uitgeschakeld of alleen geactiveerd kunnen worden als het
onderdeel de toetsenbordfocus heeft.
</p>
</div>
<button class="accordion">
Zorg voor een eenvoudige bediening voor acties die door aanraking of gebaren
worden geactiveerd
</button>
<div class="panel">
<br />
<p>
Sommige functionaliteit op een website is alleen te uit te voeren met een
moeilijk gebaar. Bijvoorbeeld gebaren waarbij de bezoeker meerdere vingers moet
gebruiken (meerpuntsgebaren) of gebaren waarbij de bezoeker een vinger (of de
aanwijzer) in een bepaald pad moet bewegen (pad gebaseerde gebaren). Bezoekers
kunnen, om verschillende redenen, soms niet in staat zijn om moeilijke gebaren
te maken met hun vingers of met een aanwijzer. Bijvoorbeeld door een motorische
beperking.
<br /><br />Zorg dat functionaliteit die met gebaren wordt geactiveerd, ook met
een klik, dubbelklik of klikken-en-vasthouden van een muis kan worden
geactiveerd. Dit kan bijvoorbeeld met een eenvoudige bediening toe te voegen.
</p>
</div>
<button class="accordion">
Gebruik niet alleen apparaatbewegingen voor het uitvoeren van een actie
</button>
<div class="panel">
<br />
<p>
Acties die in worden geactiveerd door een apparaat te kantelen of te schudden
zijn niet goed toegankelijk voor sommige bezoekers. Bezoekers met een motorische
beperking kunnen deze acties bijvoorbeeld onbedoeld uitvoeren. Er zijn ook
bezoekers die dit niet, of niet goed, kunnen bedienen omdat het apparaat op een
vaste plek is bevestigd aan bijvoorbeeld een rolstoel. Ook het maken van gebaren
naar een camera die deze de bewegingen kan interpreteren valt onder
bewegingsactivering.
<br /><br />Laat bezoekers daarom de bewegingsactivering uitschakelen of zorg
dat acties die kunnen worden geactiveerd met bewegingsactivering ook te
activeren zijn met een alternatieve bediening.
</p>
</div>
</div>
<script src="scripts/script.js"></script>
</body>
</html>