forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·128 lines (120 loc) · 7.82 KB
/
index.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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>
Vervoerregio Amsterdam - Toolgankelijkheid
</title>
<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" />
<link rel="stylesheet" href="styles/desktop-xl.css" />
<link rel="stylesheet" href="../styles/desktop-xl.css" />
<link rel="icon" type="image/png" href="./assets/va-favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="logo"></div>
</header>
<div id="after-curve"></div>
<!-- Hieronder bevinden zich de 4 hoofdcategorieën -->
<aside class="cntt">
<a href="waarneembaar.html" class="categorie">
<svg viewBox="0 0 388 268" fill="none" 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" />
</svg>
<p>Waarneembaar</p>
</a>
<a href="./begrijpelijk.html" class="categorie">
<svg viewBox="0 0 388 268" fill="none" 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" />
</svg>
<p>Begrijpelijk</p>
</a>
<a href="./bedienbaar.html" class="categorie">
<svg viewBox="0 0 388 268" fill="none" 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" />
</svg>
<p>Bedienbaar</p>
</a>
<a href="./robuust.html" class="categorie">
<svg viewBox="0 0 388 268" fill="none" 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" />
</svg>
<p>Robuust</p>
</a>
</aside>
<!-- Dit is de sectie waar de content staat -->
<main class="subject">
<div class="toptab">
<div class="tab"></div>
<div class="curve"></div>
<div class="curve-bg"></div>
<!-- Dit zijn de twee knoppen om de toegankelijkheid van de content te verbeteren -->
<ul class="ui-settings">
<li>
<a class="active" href="" aria-label="Ga terug naar de homepagina">
<svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M33.1638 15.2685C33.8233 15.8892 33.384 16.9967 32.4784 16.9967H31.016C30.4616 16.9967 30.013 17.4477 30.016 18.0021L30.0856 31.0502C30.0885 31.6046 29.64 32.0555 29.0856 32.0555H22C21.4477 32.0555 21 31.6078 21 31.0555V22.389C21 21.8367 20.5523 21.389 20 21.389H14C13.4477 21.389 13 21.8367 13 22.389V31.0555C13 31.6078 12.5523 32.0555 12 32.0555H4.90911C4.35683 32.0555 3.90911 31.6078 3.90911 31.0555V17.9967C3.90911 17.4444 3.4614 16.9967 2.90911 16.9967H1.5216C0.616019 16.9967 0.176793 15.8892 0.836242 15.2685L16.3147 0.700632C16.6997 0.338233 17.3003 0.338233 17.6854 0.700632L33.1638 15.2685Z"
fill="#bbb" />
</svg>
</a>
</li>
<li>
<button class="fontSize" aria-label="Vergroot tekst" onclick="fontSize()">
<svg width="44" height="36" viewBox="0 0 33 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.1123 20L12.1043 15.828H6.44827L5.46827 20H0.708266L6.56027 0.595999H12.1323L17.9843 20H13.1123ZM7.23227 12.496H11.3203L9.27627 3.928L7.23227 12.496ZM31.1399 15.688C31.1399 16.248 31.2146 16.6587 31.3639 16.92C31.5319 17.1813 31.7932 17.3773 32.1479 17.508L31.2239 20.392C30.3092 20.3173 29.5626 20.1213 28.9839 19.804C28.4052 19.468 27.9572 18.9453 27.6399 18.236C26.6692 19.7293 25.1759 20.476 23.1599 20.476C21.6852 20.476 20.5092 20.0467 19.6319 19.188C18.7546 18.3293 18.3159 17.2093 18.3159 15.828C18.3159 14.204 18.9132 12.9627 20.1079 12.104C21.3026 11.2453 23.0292 10.816 25.2879 10.816H26.7999V10.172C26.7999 9.29467 26.6132 8.69733 26.2399 8.38C25.8666 8.044 25.2132 7.876 24.2799 7.876C23.7946 7.876 23.2066 7.95067 22.5159 8.1C21.8252 8.23067 21.1159 8.41733 20.3879 8.66L19.3799 5.748C20.3132 5.39333 21.2652 5.12267 22.2359 4.936C23.2252 4.74933 24.1399 4.656 24.9799 4.656C27.1079 4.656 28.6666 5.09467 29.6559 5.972C30.6452 6.84933 31.1399 8.16533 31.1399 9.92V15.688ZM24.4479 17.312C25.4559 17.312 26.2399 16.836 26.7999 15.884V13.252H25.7079C24.6999 13.252 23.9439 13.4293 23.4399 13.784C22.9546 14.1387 22.7119 14.6893 22.7119 15.436C22.7119 16.0333 22.8612 16.5 23.1599 16.836C23.4772 17.1533 23.9066 17.312 24.4479 17.312Z"
fill="" />
</svg>
</button>
</li>
<li>
<button class="contrast-trigger" id="changeContrast">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36ZM19.9943 32.0033C26.8608 31.0343 32.1429 25.134 32.1429 18C32.1429 10.866 26.8608 4.96574 19.9943 3.99665C18.9005 3.84229 18 4.75091 18 5.85548L18 18L18 30.1445C18 31.2491 18.9005 32.1577 19.9943 32.0033Z"
fill="" />
</svg>
</button>
</li>
</ul>
</div>
<section class="folder" id="fontIncrease">
<div class="content">
<h1 class="toolgankelijk fade-in">
<small>Maak kennis met</small> Toolgankelijk
</h1>
<strong>Is uw website al digitaal toegankelijk voor iedereen?</strong>
<p>Dat moet al of moet binnen 2 jaar! Voor overheden is dit al verplicht. En vanaf 2025 moet iedere nieuwe
website en app digitaal toegankelijk zijn.</p>
<strong>Wat kunt u doen om uw website toegankelijk te maken?</strong>
<p>De Vervoerregio Amsterdam heeft samen met studenten van de Hogeschool van Amsterdam een checklist ontwikkeld
waarin op eenvoudige wijze wordt uitgelegd wat hierbij komt kijken en welke stappen u kunt nemen om uw website
en app toegankelijk te maken.</p>
<strong>Wat is de wettelijke achtergrond?</strong>
<p>In Nederland zijn er ca. 2 miljoen mensen met een beperking. Als deze mensen uw website of app niet kunnen
gebruiken, dan zorgt dat dat deze mensen worden uitgesloten van de samenleving. Medio 2025 wordt om die reden
door de Europese Unie de European Accessibility Act (EAA) of Europese Toegankelijkheidswet ingevoerd. De wet
zorgt ervoor dat digitale barrières worden verwijderd voor mensen met een beperking. De eisen zijn gebaseerd
op de Web Content Accessibility Guidelines (WCAG) van het World Wide Web Consortium (W3C).</p>
</div>
</section>
</main>
<footer class="sticky">
<div>
</div>
</footer>
<script src="./scripts/script.js" type="text/javascript"></script>
</body>
</html>