generated from VCGithubCode/vernell-c-new-repo-generator
-
Notifications
You must be signed in to change notification settings - Fork 6
/
resources.html
357 lines (339 loc) · 18.7 KB
/
resources.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
<!DOCTYPE html>
<html lang="en" data-bs-theme="auto" data-font-theme="default">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Explore Access Granted's accessibility, inclusiveness and availability for all. Access a wide range of different functions for accessibility">
<meta name="keywords" content="Accessible, accessibility, inclusive, inclusiveness, for everyone, a website for all">
<!-- Link head tags -->
<link rel='shortcut icon' href="assets/images/logo.webp">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<title>Access Granted | Resources</title>
</head>
<body class="relative">
<a href="#main-content" class="d-none">Skip to main content</a>
<!-- Header Section -->
<header class="fixed-top">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.webp" alt="Access Granted Logo" width="30" height="30"
class="d-inline-block align-top">
Access Granted
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item mt-2">
<a class="nav-link active" href="resources.html"><i class="fas fa-book"></i> Resources</a>
</li>
<li class="nav-item mt-2">
<a class="nav-link" href="about.html"><i class="fas fa-info-circle"></i> About</a>
</li>
<li class="nav-item mt-2">
<a class="nav-link" href="contact.html"><i class="fas fa-envelope"></i> Contact</a>
</li>
<li><button class="btn btn-secondary mt-2" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions"><i
class="fas fa-universal-access"></i> Accessibility</button></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Canvas sidebar -->
<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Accessibility Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-unstyled p-3">
<li class="mb-3">
<div class="dropdown-item">
<label class="form-label">Font Size</label>
<div class="d-flex flex-column">
<div class="btn-group" role="group" aria-label="Font Size">
<input type="radio" class="btn-check font-size-option" name="fontSize" id="fontSizeSmall" value="small">
<label class="btn btn-outline-secondary" for="fontSizeSmall">Small</label>
<input type="radio" class="btn-check font-size-option" name="fontSize" id="fontSizeMedium"
value="medium" checked>
<label class="btn btn-outline-secondary" for="fontSizeMedium">Medium</label>
<input type="radio" class="btn-check font-size-option" name="fontSize" id="fontSizeLarge" value="large">
<label class="btn btn-outline-secondary" for="fontSizeLarge">Large</label>
</div>
</div>
</div>
</li>
<li class="mb-3">
<div class="dropdown-item">
<div class="form-check form-switch form-switch-lg d-flex align-items-center">
<input class="form-check-input font-switch" type="checkbox" id="fontSwitch1" aria-label="Font switch">
<label class="form-check-label ms-2" for="fontSwitch1">Turn on Dyslexic Font</label>
</div>
</div>
</li>
<li class="mb-3">
<div class="dropdown-item">
<div class="form-check form-switch form-switch-lg d-flex align-items-center">
<input class="form-check-input theme-switch" type="checkbox" id="themeSwitch1" aria-label="Theme switch">
<label class="form-check-label ms-2" for="themeSwitch1">Turn on High Contrast</label>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Back to top button -->
<a href="#" class="btn btn-primary btn-lg back-to-top position-fixed bottom-0 end-0 m-3 d-none z-3" aria-label="Back to Top">
<i class="fas fa-arrow-up"></i>
</a>
<main id="main-content">
<section class="p-5 text-center container-fluid main-background d-flex align-items-center" style="height: 50vh;">
<div class="row w-100 align-items-center">
<div class="col-lg-6 col-md-8 mx-auto">
<h1>Understanding Web Accessibility</h1>
<p class="lead">Learn about the importance of web accessibility and how it impacts users with various needs.
</p>
</div>
</div>
</section>
<div class="container-fluid p-0 mt-5">
<!-- Voice Assistant Article -->
<article class="p-5 resources-voice-article">
<div class="row">
<div class="col-12">
<h2 class="text-primary">Voice Assistant: Your Personal Guide</h2>
<h3 class="text-muted">Meet Mikey the Mic!</h3>
<p>Mikey the Mic is here to assist you with voice commands, making navigation smooth and effortless. This
feature is designed to help individuals who rely on assistive technology, ensuring that everyone can
interact with our website hands-free.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<div class="p-3 rounded">
<img src="assets/images/microphone-iconNoBG.webp" alt="Mikey the Mic" class="img-fluid mb-3">
<a href="voice.html" class="btn btn-secondary btn-lg mt-3">Try It Out</a>
</div>
</div>
<div class="col-md-6">
<h4>Who it Helps:</h4>
<ul class="list-group mb-3">
<li class="list-group-item"><i class="fas fa-eye"></i> Individuals with visual impairments</li>
<li class="list-group-item"><i class="fas fa-wheelchair"></i> Users with mobility issues</li>
<li class="list-group-item"><i class="fas fa-microphone"></i> Anyone who prefers voice interaction</li>
</ul>
<h4>How It Works:</h4>
<ul class="list-group mb-3">
<li class="list-group-item"><i class="fas fa-microphone"></i> Activate Mikey by clicking the microphone
icon.</li>
<li class="list-group-item"><i class="fas fa-comments"></i> Use simple voice commands to navigate through
the site, search for information, and interact with content.</li>
<li class="list-group-item"><i class="fas fa-hands-free"></i> Enjoy a hands-free, user-friendly experience
tailored to your needs.</li>
</ul>
<h4>Why It Matters:</h4>
<p id="dyslexia">For many of us, using a mouse or keyboard is second nature, but those with visual
impairments or mobility
issues face significant barriers. Mikey's voice commands provide an essential alternative, transforming
how these users interact with digital content and ensuring they can access information just as easily as
everyone else.</p>
</div>
</div>
</article>
<!-- OpenDyslexic Article -->
<article class="p-5 resources-dyslexia-article">
<div class="row">
<div class="col-12">
<h2 class="text-danger">OpenDyslexic: Read with Ease</h2>
<h3 class="text-muted">Say Hi to Glassy with the Glasses!</h3>
<p>Glassy with the Glasses is dedicated to making reading easier for everyone, especially individuals with
dyslexia. By changing the site’s text to the OpenDyslexic font, Glassy ensures that reading becomes a more
comfortable and enjoyable experience.</p>
</div>
</div>
<div class="row align-items-center flex-md-row-reverse">
<div class="col-md-6">
<div class="p-3 rounded">
<img src="assets/images/glasses-iconNoBG.webp" alt="Glassy with the Glasses" class="img-fluid mb-3">
<div class="form-check form-switch form-switch-lg d-flex align-items-center justify-content-center">
<input class="form-check-input font-switch" type="checkbox" id="fontSwitch2" aria-label="Font switch">
<label class="form-check-label ms-2" for="fontSwitch2">Turn on Dyslexic Font</label>
</div>
</div>
</div>
<div class="col-md-6">
<h4>Who it Helps:</h4>
<ul class="list-group mb-3">
<li class="list-group-item"><i class="fas fa-brain"></i> Individuals with dyslexia</li>
<li class="list-group-item"><i class="fas fa-font"></i> Users who find standard fonts difficult to read
</li>
</ul>
<h4>How It Works:</h4>
<ul class="list-group mb-3">
<li class="list-group-item"><i class="fas fa-toggle-on"></i> Toggle the OpenDyslexic feature in the
settings menu.</li>
<li class="list-group-item"><i class="fas fa-text-height"></i> Experience an immediate transformation of
the site's text, making it more readable and less confusing.</li>
<li class="list-group-item"><i class="fas fa-book-reader"></i> Enjoy improved reading comfort and
comprehension with our dyslexia-friendly design.</li>
</ul>
<h4>Why It Matters:</h4>
<p>Reading can be a daunting task for individuals with dyslexia due to how their brains process visual
information. Glassy's OpenDyslexic font reduces this difficulty, providing a clearer and more stable
reading experience. By doing so, we're helping to break down barriers that many people face every day,
which often go unnoticed by those without these challenges.</p>
<p>
<span>
If you want to find out more, go to
</span>
<a id="high-contrast" href="https://opendyslexic.org/" target="_blank"
rel="noopener noreferrer">opendyslexic.org</a>
</p>
</div>
</div>
</article>
<!-- High Contrast Mode Article -->
<article class="p-5 resources-contrast-article">
<div class="row">
<div class="col-12">
<h2 class="text-warning">High Contrast Mode: See It Clearly</h2>
<h3 class="text-muted">Meet Spikey the Hedgehog!</h3>
<p>Spikey the Hedgehog is here to ensure that our content is accessible to everyone, including those with
color blindness and other visual impairments. With Spikey’s help, higher contrast can make text and images
stand out more clearly.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<div class="p-3 rounded">
<img src="assets/images/contrast-iconNoBG.webp" alt="Spikey the Hedgehog" class="img-fluid mb-3">
<div class="form-check form-switch form-switch-lg d-flex align-items-center justify-content-center">
<input class="form-check-input theme-switch mt-0" type="checkbox" id="themeSwitch2"
aria-label="Theme switch">
<label class="form-check-label ms-2 text-body" for="themeSwitch2">Turn on High Contrast</label>
</div>
</div>
</div>
<div class="col-md-6">
<h4>Who it Helps:</h4>
<ul class="list-group mb-3">
<li class="list-group-item"><i class="fas fa-eye-dropper"></i> Individuals with color blindness</li>
<li class="list-group-item"><i class="fas fa-low-vision"></i> Users with other visual impairments</li>
<li class="list-group-item"><i class="fas fa-adjust"></i> Anyone who benefits from higher contrast visuals
</li>
</ul>
<h4>How It Works:</h4>
<ul class="list-group mb-3">
<li class="list-group-item"><i class="fas fa-toggle-on"></i> Enable High Contrast Mode from the
accessibility settings.</li>
<li class="list-group-item"><i class="fas fa-palette"></i> The site’s design will adjust to use
high-contrast colors, making text and images more distinct.</li>
<li class="list-group-item"><i class="fas fa-eye"></i> Navigate and engage with content more comfortably
and efficiently.</li>
</ul>
<h4>Why It Matters:</h4>
<p>Color blindness affects a significant portion of the population, often making it difficult to distinguish
between certain colors. Spikey’s High Contrast Mode ensures that users with these visual impairments can
still clearly see and interact with our content. It's a reminder that accessibility features are crucial
for creating a truly inclusive web environment.</p>
<p>For more information, read this <a
href="https://uxdesign.cc/high-contrast-when-you-think-the-dark-mode-is-enough-d190218d4bba"
target="_blank" rel="noopener noreferrer">article</a> by Jahde Vaccani.</p>
</div>
</div>
</article>
</div>
<!-- Tabs Section -->
<div class="container py-5">
<h2 class="text-center mb-4">Accessibility Standards</h2>
<ul class="nav nav-tabs justify-content-center" id="awarenessTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="wcag-tab" data-bs-toggle="tab" data-bs-target="#wcag" type="button"
role="tab" aria-controls="wcag" aria-selected="true">WCAG</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="aria-tab" data-bs-toggle="tab" data-bs-target="#aria" type="button" role="tab"
aria-controls="aria" aria-selected="false">ARIA</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="508-tab" data-bs-toggle="tab" data-bs-target="#508" type="button" role="tab"
aria-controls="508" aria-selected="false">Section 508</button>
</li>
</ul>
<div class="tab-content py-3" id="awarenessTabContent">
<div class="tab-pane fade show active" id="wcag" role="tabpanel" aria-labelledby="wcag-tab">
<p>The <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank"
rel="noopener noreferrer">Web Content Accessibility Guidelines (WCAG)</a> provide guidelines for making
web content accessible to people with disabilities.</p>
</div>
<div class="tab-pane fade" id="aria" role="tabpanel" aria-labelledby="aria-tab">
<p>The <a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank"
rel="noopener noreferrer">Accessible Rich Internet Applications (ARIA)</a> specifications help make
dynamic content and advanced user interface controls accessible.</p>
</div>
<div class="tab-pane fade" id="508" role="tabpanel" aria-labelledby="508-tab">
<p><a href="https://www.section508.gov/" target="_blank" rel="noopener noreferrer">Section 508</a> requires
federal agencies to make their electronic and information technology accessible to people with disabilities.
</p>
</div>
</div>
</div>
<!-- Join the Movement Section -->
<section class=" container mt-5 text-center">
<h2>Join the Movement Towards Inclusive Design</h2>
<p>At Access Granted, we believe in creating an inclusive digital environment for all users. By leveraging these
innovative features, we're breaking down barriers and setting new standards in accessibility. Explore our site,
experience the difference, and join us in the mission to make the web a more accessible place for everyone.</p>
<p>Have questions or need assistance? We're here to help!</p>
<a href="contact.html" class="btn btn-primary btn-lg">Contact Us</a>
</section>
</main>
<hr>
<footer class="text-muted py-5">
<div class="container footerdiv">
<div class="row">
<div class="col-md-4">
<h5>Social</h5>
<ul class="list-unstyled">
<li><a href="https://github.com/VCGithubCode/access-granted" class="text-muted" target="_blank"
rel="noopener" aria-label="Visit our github repository page(Opens in a new tab)" aria-hidden="true"><i
class="fa-brands fa-github"></i> Github</a></li>
<li><a href="https://app.slack.com/client/T0L30B202/C080JB3ETHU" class="text-muted" target="_blank"
rel="noopener" aria-label="Visit our Slack channel(Opens in a new tab)" aria-hidden="true"><i
class="fa-brands fa-slack"></i> Slack</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Site Map</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-muted">Home</a></li>
<li><a href="resources.html" class="text-muted">Resources</a></li>
<li><a href="about.html" class="text-muted">About</a></li>
<li><a href="contact.html" class="text-muted">Contact</a></li>
</ul>
</div>
</div>
<p class="mb-1">© 2024 Access Granted Project</p>
</div>
</footer>
<!-- Fontawesome icons -->
<script src="https://kit.fontawesome.com/8f0b8db894.js" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Script -->
<script src="assets/js/script.js"></script>
<!-- Theme Switcher Script -->
<script src="assets/js/theme-switcher.js"></script>
<!-- Toggle navigation bar background -->
<script src="assets/js/navbar-background-toggler.js"></script>
</body>
</html>