-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdcdw.html
310 lines (291 loc) · 19.2 KB
/
dcdw.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I transformed DC Design Week from an inaccessible brand into an accessible beyond compliant experience through cultural change and accessibility-first design.">
<meta name="author" content="Josh Kim">
<title>Designing the most accessible AIGA conference ever | Josh Kim is a humanity centered accessibility strategist, educator, and design researcher</title>
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jk.css" rel="stylesheet">
<!-- Fonts from Google -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Libre Baskerville:wght@400&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Skip link for keyboard users -->
<a class="skip-main" href="#main">Skip to main content</a>
<!--Navigation -->
<header class="header">
<div class="container">
<nav class="jnav" aria-label="main">
<a href="index.html">Josh 内藤</a>
<span class="divider"></span>
<ul>
<li><a href="work.html">Work</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<!--end of container -->
</header>
<!-- Banner -->
<main role="main" id="main" tabindex="-1">
<article class="content">
<div class="container">
<!-- Intro -->
<div class="row ">
<div class="col-lg-8">
<h1><span class="h-desc">AIGA Washington DC</span> DC Design Week</h1>
<p>I transformed a local celebration of design from an inaccessible brand to an accessible beyond compliant experience through culture, accessibility operations, and design system work.</p>
<ul>
<li>Reduced 160+ issues caught through automated scans by 100%</li>
<li>Passed and expanded upon all WCAG 2.2 AA criteria, meeting 10+ applicable AAA criteria and prioritizing usability best practices</li>
<li>Established AIGA DC's first accessibility statement, severity rubric, and accommodation request process</li>
</ul>
<p><a href="https://2022-dcdesignweek.marcusrelacion.com/accessibility/">Explore our 2022 accessibility statement.</a></p>
</div>
</div><!-- row -->
<!-- Feature img -->
<div class="row">
<div class="col-lg-11">
<figure><img class="ft-img" src="img/dcdw/feature.png" style="width:100%;" alt="The accessibility statement of DCDW expresses AIGA DC's commitment to improving" />
</figure>
</div>
</div><!-- row -->
<!-- Content -->
<div class="row ">
<div class="col-lg-8">
<h2 id="challenge">Challenge</h2>
<p>DC Design Week is a celebration of the DC, Maryland, and Virginia region’s creative community. Each year, a committee of volunteers collaborates with local designers, businesses, and organizations to host a variety of events showcasing the work, creativity, and relationships thriving in this area.</p>
<p>I first joined the DC Design Week team in 2020, and was impressed by their commitment to diversity– but like many other AIGA programs, their efforts towards accessibility needed some love. Notably:</p>
<ul>
<li>No accessibility statement existed for the conference</li>
<li>No methods existed to request for accommodations</li>
<li>Branding and visual design were prioritized over accessibility</li>
<li>There were 100+ accessibility issues including color contrast, headings, motion, focus, alt text, and more</li>
</ul>
<p>I also joined too late. Accessibility was already siloed and framed around remediation as our brand and website were already in the works.</p>
</div>
</div>
<figure class="row">
<div class="col-lg-8">
<video controls loop muted>
<source src="img/dcdw/old-web.mov" type="video/mp4" alt="The 2020 website had a sharp black and green against white contrast with a twitchy video auto-playing on the homepage.">
</video>
</div>
<div class="col-lg-3">
<figcaption><a href="https://2020.dcdesignweek.org/">The year I joined our branding used sharp animations</a>, which unintentionally excluded people with motion sensitivities.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/axe-before.png" style="width:100%;" alt="An axe scan of the 2017 website's homepage which reveals 48 serious issues." />
</div>
<div class="col-lg-3">
<figcaption>Previous iterations had many serious accessibility issues, often on critical landing and event pages.</figcaption>
</div>
</figure>
<div class="row">
<div class="col-lg-8">
<h2>Maturing a culture of accessibility operations, not remediation</h2>
<p>As an annual conference that is run by over 40 volunteers and usually hosts 20+ events, DC Design Week needed upstream cultural change within the community, not last minute remediations to inaccessible ticketing and events.</p>
<figure>
<blockquote>
<p>You cannot put the blueberries into the muffin after it is cooked. This shows that you have to think about accessibility from the beginning, not after a website is already built. Another story is about ice cream cones. If you ignore your ice cream cone it gets very messy. In the same way, you cannot ignore accessibility until the end of the project.</p>
</blockquote>
<figcaption><a href="https://www.lflegal.com/2020/05/accessibility-is-delicious/">Lainey Feingold's observations on food analogies for digital inclusion</a></figcaption>
</figure>
<p>In the next 2 years, I focused on embedding myself as early and as often as possible with volunteers as a partner (not an expert) to bake the blueberries (accessibility) into our muffin (process).</p>
</div>
</div>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/cat-alt.png" style="width:100%;" alt="A slide from our alt text workshop coaching volunteers not to write super long alt text for a bananya" />
</div>
<div class="col-lg-3">
<figcaption>I taught executive leadership, volunteers, and speakers from <a href="https://docs.google.com/presentation/d/10KVEPRwLV0dNRfyXxEvsNgJIgevpm1KZRM_WXEILQBI/edit?usp=sharing">inclusive presentation tutorials</a> to <a href="https://docs.google.com/presentation/d/1ow1HaUCoY1ED_w64A222mbBeCj0K5v2SiTgmxccQhrI/edit?usp=sharing">alt text workshops</a>.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/office-hours.png" style="width:100%;" alt="A live kickoff call where I'm letting volunteers know of office hours and other accessibility updates.">
</div>
<div class="col-lg-3">
<figcaption>I gave accessibility updates on volunteer calls, hosted office hours, and set up slack spaces for async feedback.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/checklist.png" style="width:100%;" alt="A checklist on google sheets documenting recommendations for slides along with plain language explanations." />
</div>
<div class="col-lg-3">
<figcaption><a href="https://docs.google.com/spreadsheets/d/1bSeugPtQutymwIvIU7widoxZ5qu1zpJK5r7LKUptMFU/edit?usp=sharing">I created checklists written around disabled experiences</a> and embedded them within required checkpoints.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/github.png" style="width:100%;" alt="A github list of accessibility issues prioritized by must, should, and consider." />
</div>
<div class="col-lg-3">
<figcaption>I established a severity rubric to prioritize issues during QA testing.</figcaption>
</div>
</figure>
<div class="row">
<div class="col-lg-8">
<h2>Scaling honest and inclusive content</h2>
<p>I made it a priority to make our public content on accessibility as honest, transparent, and inclusive as possible.</p>
</div>
</div>
<div class="row">
<div class="col-lg-11">
<figure>
<img src="img/dcdw/statement.png" style="width:100%;" alt="When drafting our accessibility statement, I wrote a comment arguing for transparency." />
</figure>
</div>
</div>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/local.png" style="width:100%;" alt="A local accessibility statement noting ADA compliance, gender neutral bathrooms, and how to request accommodations." />
</div>
<div class="col-lg-3">
<figcaption>I created a template to publish accessibility information for each event. This let our content writers note if locations were ADA accessible and had gender-neutral bathrooms. </figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/approach.png" style="width:100%;" alt="A presenter commenting on a slide detailing how to request for accommodations and learn more about accessibility at DCDW.">
</div>
<div class="col-lg-3">
<figcaption>I also created default slide templates for presenters which included instructions on how to provide accessibility information.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/alt-race.png" style="width:100%;" alt="Three staff of color on the 2022 website have alt text describing their race." />
</div>
<div class="col-lg-3">
<figcaption>I worked with team members and speakers to craft inclusive alt text that represented our diverse identities. <a href="https://ux.shopify.com/the-case-for-describing-race-in-alternative-text-attributes-a093380634f2">Tolu makes the case for race</a> noting, “writers of alt text hold power in shaping the experience and perception of screen-reader users.” </figcaption>
</div>
</figure>
<div class="row">
<div class="col-lg-8">
<h2>A design system that puts accessibility first</h2>
<p>By 2022, I was able to build up a strong relationship with our design and web teams to focus on prioritizing accessibility first within our design system, code, and ultimately website.</p>
</div>
</div>
<div class="row">
<div class="col-lg-11">
<figure>
<img src="img/dcdw/brand-2.png" style="width:100%;" alt="A case study by our brand partner noting how accessibility was placed at the forefront." />
</figure>
</div>
</div>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/filters.png" style="width:100%;" alt="The events page features a h2 labelling the filters section and another h2 labelling the events list with a count included within it. Specific filters and the event titles were h3s nested within those sections for easy navigation." />
</div>
<div class="col-lg-3">
<figcaption>Accessibility annotations like headings ensured pages would be easy to navigate for assistive tech users.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/axe-after.png" style="width:100%;" alt="An axe scan revealing 0 automated issues on the 2022 landing page." />
</div>
<div class="col-lg-3">
<figcaption>A combination of automated and manual testing revealed we had resolved all accessibility issues from previous years.</figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<video controls loop muted>
<source src="img/dcdw/keyboard.mp4" type="video/mp4" alt="A visible focus halo remaining visible on both light and dark backgrounds.">
</video>
</div>
<div class="col-lg-3">
<figcaption>Keyboard navigation includes skip links, focus halos that use double drop shadows to perform on any component background combination, and underlines for actions that are links. </figcaption>
</div>
</figure>
<figure class="row">
<div class="col-lg-8">
<video controls loop muted>
<source src="img/dcdw/reduced-motion.mov" type="video/mp4" alt="With reduced motion set as a preference, the wavy animation on the homepage stops.">
</video>
</div>
<div class="col-lg-3">
<figcaption>All animated content on the website respects reduced motion preferences.</figcaption>
</div>
</figure>
<div class="row">
<div class="col-lg-8">
<h2>Closing thoughts</h2>
<p>Working with AIGA DC has been a gift over these last couple of years. While we’ve made huge leaps in accessibility as a ragtag team of volunteers, I feel we’re only just getting started:
<ul>
<li>Issues remain to be resolved, or may not have been caught yet</li>
<li>AIGA national remains to be inaccessible, with little transparency on how they plan to better include disabled creatives (if at all)</li>
<li>We need to include more disabled people within our teams and collaborate closer with local disabled creative groups</li>
</ul>
<p>Although this is my last year with the DC Design Week team, I’m confident that with good people and an accessibility-first culture, we’ll continue to reach new heights.</p>
</div> <!-- column -->
</div> <!-- row -->
<figure class="row">
<div class="col-lg-8">
<img src="img/dcdw/mochi.png" style="width:100%;" alt="Our team of BIPOC designers enjoying Korean corn dogs in a grocery foodcourt." />
</div>
<div class="col-lg-3">
<figcaption>Our web and design team finally got together to enjoy some mochinut goodness.</figcaption>
</div>
</figure>
</div>
<!--Container-->
</article>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<h2 class="sr-only">Footer</h2>
<div class="row">
<div class="col-4 col-md-2">
<h3>SITEMAP</h3>
<ul role="list">
<li><a href="work.html">Work</a></li>
<li><a href="speaking.html">Speaking</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="col-4 col-md-2">
<h3>CONTACT</h3>
<ul role="list">
<li><a href="resume.html">Resume</a></li>
<li><a href="mailto:[email protected]">Email</a></li>
<li><a href="https://www.linkedin.com/in/joshkimux/">LinkedIn</a></li>
</ul>
</div>
<div class="col-4 col-md-2">
<h3>A11Y</h3>
<ul role="list">
<li><a href="accessibility.html">Statement</a></li>
<li><a rel="external" href="https://www.a11yproject.com/spotlight/josh-kim/">Spotlight</a></li>
<li><a rel="external" referrerpolicy="strict-origin" href="https://a11y-webring.club/next">Webring</a></li>
</ul>
</div>
<div class="offset-0 col-sm-6 offset-md-1 col-md-5 offset-lg-2 col-lg-4">
<h3>HAIKU</h3>
<ul>
<li class="espresso">Need more espresso</li>
<li class="depresso">This site gives me depresso</li>
<li><a href="portfolio.html">Despite progresso</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="js/jk.js"></script>
</body>
</html>