-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
237 lines (227 loc) · 13.6 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
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
<!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">
<title>Improve accessibility to interactive tech events | CloudFest 2023</title>
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body class="body">
<header>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<nav id="primary-navigation" class="navbar navbar-expand-lg">
<div class="container-fluid p-0">
<a class="navbar-brand pe-3" href="#">
<img src="/images/logo-white.svg" alt="cloudfest logo"/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end mt-3 mt-lg-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item px-lg-3 mb-3 mb-md-0">
<a class="nav-link active" aria-current="page"
href="#Introduction">Introduction</a>
</li>
<li class="nav-item px-lg-3 dropdown mb-3 mb-md-0">
<a class="nav-link" href="#GeneralRecommendation">General
Recommendation</a>
</li>
<li class="nav-item px-lg-3 mb-3 mb-md-0">
<a class="nav-link" href="#disabilities">Checklist</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<main id="main">
<section>
<div class="container-fluid p-0">
<div class="row mb-5 g-0">
<div class="col-12">
<div class="image-overlay position-relative">
<img src="./images/hackthonCrew2023.jpg" class="w-100"
alt="HackathonCrew2023 Accessibility"/>
<div class="row g-0 center-text">
<div class="col-12 col-md-8">
<h1 class="mt-3 mb-3 text-uppercase ms-5">
Improve accessibility to interactive tech events
</h1>
<div class="subheadline ms-5">#A11Y #Accessibility #Hackathon #CFHack23</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center justify-content-between g-0 mb-5">
<div class="col-10 col-md-8 presentation">
<h2 id="Introduction">Introduction</h2>
<div class="content text-left">
<p>
Creating an inclusive environment is a key for planning a successful event. This
checklist provides the necessary steps to ensure access for all attendees. While this
list demonstrates a handful of situations for disabled people, specific assistance can
be provided at the request of the individual. Be sure to gather all the necessary
information from attendees prior to the event.</p>
</div>
</div>
<div class="col-10 col-md-8 presentation mt-5">
<h2 id="GeneralRecommendation">General recommendations</h2>
<h3>Before the event</h3>
<div class="content">
<div class="subtitle">Registration Process</div>
<ul class="list">
<li>Incorporate questions about special needs in the registration form</li>
<li>Create a complete form to identify and understand someone's special needs</li>
<li>Assign an assistant to help people with special needs</li>
</ul>
<div class="subtitle">Venue Preparation</div>
<ul class="list">
<li>Ensure the availability of assistants during the event</li>
<li>Prepare aiding tools according to the disability (e.g. device etc.)</li>
<li>Have a clear navigation plan</li>
<li>Checking for potential obstacles and adjusting options (availability of elevators,
ramps, accessible restrooms, sufficient lightning, signs, etc.)
</li>
<li>Provide reserved seating corresponding to the type of disability, accessible
transportation, and accomodation
</li>
<li>Notify organizers, staff, and speakers about the necessary steps. Applying
sensitivity, eventually creating a code of conduct and providing it to attendees
</li>
<li>Verify functionality of materials and tools - user testing</li>
</ul>
<div class="subtitle">Event Materials</div>
<ul class="list">
<li>Adding captions or transcripts for audio or video content.</li>
<li>Checking if formats and standards are compatible with the different types of devices
( visual readers, browsers, braille readers)
</li>
<li>Discuss the possibility of sharing conference materials in advance</li>
</ul>
</div>
</div>
<div class="col-10 col-md-8 presentation mt-5">
<h3>During the event</h3>
<div class="content">
<ul class="list">
<li>Prepare staff to manage unexpected situations that can occur during the event (e.g.
difficulties accessing the slides, or adjusting the seating arrangement)
</li>
<li>Ensuring all communication channels (e.g. website, social media, flyers) are
available to people with disabilities (e.g. alt text, captions, braille)
</li>
</ul>
</div>
</div>
<div class="col-10 col-md-8 presentation mt-5">
<h3>After the event</h3>
<div class="content">
<ul class="list">
<li>To request feedback from attendees to further improve the service of accessibility
(this can be done by surveys, or reviews of the event)
</li>
</ul>
</div>
</div>
<div class="col-10 col-md-8 presentation mt-5">
<h2 id="disabilities">Impairment Accessibility Checklist</h2>
<div class="block-list">
<div class="block">
<h3>Visual Impairment</h3>
<ul>
<li>
Proper formatting for assistive technologies (alternative
texts for images and videos, heading tags to structure content, text is
accessible
via keyboard navigation)
</li>
<li>Request to follow rules for creating presentations (high
contrast ratio)
</li>
<li>Large and legible text, large print or braille</li>
<li>Responsive designs (different screen sizes)</li>
<li>Assistive technology support and compatibility</li>
<li>Taking into consideration seat reservations</li>
<li>User testing</li>
</ul>
</div>
<div class="block">
<h3>Hearing Impairment</h3>
<ul>
<li> Text-based transcripts for the audio content and closed
captioning
</li>
<li>Signs for alerts and notifications</li>
<li>Text-based chat</li>
<li>Sign language interpreters</li>
<li>User testing</li>
</ul>
</div>
<div class="block">
<h3>Motor disabilities</h3>
<ul>
<li>Venue accessibility (see general recommendation)</li>
<li>Keyboard accessibility (shortcuts enabled)</li>
<li>Taking into consideration seat reservation</li>
<li>User testing</li>
</ul>
</div>
</div>
</div>
<div class="col-10 col-md-8 presentation mt-5">
<h2 class="d-block">Resources</h2>
</div>
<div class="col-10 col-md-8 presentation text-center">
<div class="row w-100">
<div class="col-12 col-md-6 text-center mb-5 mb-md-3 mt-5">
<a href="https://form.fimidi.com/index.php?r=survey/index&sid=766523&lang=en"
class="btn btn-primary d-grid">
Link to the event configurator form demo
</a>
</div>
<div class="col-12 col-md-5 col-md-6 text-center mb-5 mb-md-3 mt-md-5">
<a href="https://raw.githubusercontent.com/hackathon-accessibility/website/main/Accessibility_Checklist.pdf"
class="btn btn-primary d-grid">
Download accessibility checklist (PDF)
</a>
</div>
<div class="col-12 col-md-5 col-md-6 text-center mb-5 mb-md-3 mt-md-5 d-grid">
<a href="https://hackathon-accessibility.github.io/form" class="btn btn-primary">
Link to form configurator
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer classs="bg-dark m-3">
In our project called <strong>"Improve accessibility in interactive tech events"</strong> at the <a
href="https://www.cloudfest.com/hackathon">CloudFest Hackathon</a>, we're
passionate about improving accessibility for all attendees in future tech events. The information is open and
free to copy. If you wish to contribute to this project, we welcome you with open arms. <a
class="btn btn-primary"
href="https://github.com/hackathon-accessibility">Visit us on GitHub</a>
</footer>
<script src="main.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"
integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" defer></script>
</body>
</html>