-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
412 lines (392 loc) · 25.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
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
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>The Accessibility First WordPress Development Methodology</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/white.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
<style type="text/css">
.reveal section {
text-align: left;
}
.img-style {
border-radius: 5px;
box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 9%);
}
</style>
</head>
<body>
<h1 style="display: none;">The Accessibility First WordPress Development Methodology</h1>
<div class="reveal">
<div class="slides">
<section>
<h2>The Accessibility First WordPress Development Methodology</h2>
<p>- Steve Jones</p>
<p><a href="https://stevejonesdev.github.io/accessibility-first-method/" aria-label="slides">stevejonesdev.github.io/accessibility-first-method</a></p>
<img style="margin-bottom:0px;" data-src="images/equalize-digital-logo.svg" width="400" alt="Equalize Digital">
<p style="margin-top:0px;"><small><a href="https://equalizedigital.com">EqualizeDigital.com</a> | <a href="https://twitter.com/EqualizeDigital">@EqualizeDigital</a></small></p>
<aside class="notes">
<p>Hi I'm Steve Jones. I'm the CTO of Equalize Digital we're a certified B-Corporation and a WordPress VIP agency that specializes in accessibility.</p>
<p>Today I'm excited to talk about how to implement an accessibility first approach into your WordPress development projects. This ensures a truly accessible digital experience for all users, specifically those with disabilities. We'll explore WordPress developers unique responsibility to take a proactive approach to developing blocks, plugins, and themes. As well as tools and automatons we can integrate into our development workflow.</p>
</aside>
</section>
<section>
<h2>Adopt and prioritize accessibility early, and often throughout your development workflow.</h2>
<aside class="notes">
<p>The goal of this talk is to equip you with the inspiration and information to adopt and prioritize accessibility early, and often throughout your development workflow.</p>
</aside>
</section>
<section>
<h2>Prerequisite: <br />Website Accessibility</h2>
<p>An accessible website is usable by as many people as possible, regardless of their ability or circumstances.</p>
<aside class="notes">
<p>I'm sure most of you are familiar at some level with website accessibility since you've showed up for an accessibility talk. But I want to start with a simple definition of accessibility so we're on the same page.</p>
<p>Accessible website development is the practice of making websites usable by as many people as possible, regardless of their ability or circumstances.</p>
<p></p>Traditionally, people think of this as only those with disabilities. However making websites accessible also benefits those using mobile devices, slow internet connections, or those with temporary heath issues.</aside>
</aside>
</section>
<section>
<h2>Why Accessibility?</h2>
<ul>
<li>
Legal requirements
<br /><small>*I'm not a lawyer!</small>
</li>
<li>Everyone benefits from accessibility.</li>
</ul>
<aside class="notes">
<p>There are many reasons why accessibility is important but I'll briefly cover just a couple.</p>
<h3>Legal requirements</h3>
<p>Disclaimer, I am not a lawyer, please consult your lawyer for legal advice.</p>
<p>Many countries have legal accessibility requirements and penalties if you're found to not be following accessibility requirements. In the United States, federal agencies and often those receiving federal grants are required to adhere to <a href="https://www.section508.gov/">Section 508</a> standards. Other businesses in the United States such as local governments and those open to the public must adhere to the <a href="https://www.ada.gov/">Americans with Disabilities Act</a> (ADA)</p>
</p>I've personally been in conversations with people at WordCamps who were sued for violating accessibility requirements. It's better to do it right the first time then to get tangled up in costly litigation.</p>
<h3>Everyone benefits from accessibility.</h3>
<p>Accessibility benefits all users. If you develop features for users that are hard-of-hearing, it will benefit users watching in loud places or with the audio turned off. If you develop features for users that are visually impaired, it will benefit users that suffer from migraines and can't currently look at their screens.</p>
<p>As much as we would like to avoid it, we are all aging and will most likely some day benefit from accessibility ourselves, either due to age related heath issues such as visual impairment or some more extreme health issues.</p>
<p>Even though we may not realize it, we all need accessibility.</p>
</aside>
</section>
<section>
<h2>Fully adopting accessibility first development now ensures an accessible future.</h2>
<aside class="notes">
</aside>
</section>
<section>
<h2>What is Accessibility First Development?</h2>
<ul>
<li>It's Necessary</li>
<li>It's Inclusive</li>
<li>It's Proactive</li>
</ul>
<aside class="notes">
<p>Accessibility first development is a shift in the way you approach your thinking about the development process. You should create projects that are as accessible as possible out of the box.</p>
<h3>It's necessary</h3>
<p>Accessibility first development embraces the idea that accessibility is a necessity. It's not added later or worse, ignored altogether if the project deadline is approaching. Prioritizing accessibility takes it from being a baseline standard to a core project requirement.</p>
<h3>It's Inclusive</h3>
<p>Accessibility first aims to target users with the most severe disability. This creates a trickle down affect that covers all other users with little to no disabilities.</p>
<h3>It's Proactive</h3>
<p>Accessibility first development addresses inclusivity at the beginning and throughout the development process, not as an afterthought. Addressing accessibility earlier saves time and resources through a more efficient development workflow.</p>
</aside>
</section>
<section>
<h2 class="r-fit-text">If it's not accessible, it's broken!</h2>
<aside class="notes">
<p>Simply put, If it's not accessible, it's broken!</p>
<p>Developers must adopt the mindset that if what they are coding is not accessible, it's broken. It should be fixed and tested before being merged into production.</p>
</aside>
</section>
<section>
<h2>The WordPress Developers Accessibility Responsibility</h2>
<ul>
<li>Ensure blocks, plugins, and themes are fully accessible at launch</li>
<li>WordPress products are content producing</li>
<li>WordPress powers over 40% of all websites</li>
<li>Retroactive remediation can be daunting and expensive.</li>
</ul>
<aside class="notes">
<p>WordPress developers have a unique responsibility to take a proactive approach to developing blocks, plugins, and themes that are fully accessible at launch. These products are generally content producing or duplicated on multiple websites. With WordPress' massive ~40% market share of websites, remedying accessibility issues retroactively can be a daunting, if not impossible task.</p>
<p>For example, if you create and release a block plugin that generates HTML markup in the database that is inaccessible, it could be installed on any number of websites and used on any number of pages. Releasing an update to fix that issues would require all those sites to update to the latest version of that plugin. Most likely an update alone wouldn't fix this issue. A find and replace would likely need to be run on the database to fix the inaccessible code.</p>
</aside>
</section>
<section>
<h2>A Word of Caution</h2>
<p>Be cautious of layered on one click accessibility solutions.</p>
<aside class="notes">
<p>There are some people out there that claim accessibility can be layered on top of an existing, inaccessible website (overlays). This is not true and these people are typically trying to sell you something.</p>
</aside>
</section>
<section>
<h2>There is no replacement for making accessibility part of your development knowledge base from the onset.</h2>
</section>
<section>
<h2>We've Been Here Before - Mobile First Development</h2>
<ul>
<li>Mobile first required a shift in thinking</li>
<li>Mobile first required adjustments in development workflows</li>
<li>Accessibility first development must become just as common place as mobile first development.</li>
</ul>
<aside class="notes">
<p>Around 2009, we first heard about the mobile first concept. It was an overwhelming shift in thinking and development workflows. Now, it is just part of our daily lives as developers. I actually think it would be more work to make a website that isn't responsive at this point.</p>
<p>Today, the accessibility first concept may seem just as daunting as mobile first did years ago. With the right tools and attitude Accessibility can become just as integral to our development workflow as mobile first.</p>
</aside>
</section>
<section>
<h2>Learn Accessibility Deeply</h2>
<ul>
<li>
Web Content Accessibility Guidelines (WCAG)
<br /><small><a href="https://www.w3.org/WAI/standards-guidelines/wcag" aria-label="Web Content Accessibility Guidelines">w3.org/WAI/standards-guidelines/wcag</a></small>
</li>
<li>
MDN Web docs (Unofficial)
<br /><small><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" aria-label="MDN Accessibility docs">developer.mozilla.org/en-US/docs/Web/Accessibility</a></small>
</li>
<li>
Equalize Digital Accessibility Checker Documentation (Unofficial)
<br /><small><a href="https://equalizedigital.com/accessibility-checker/documentation/" aria-label="Equalize Digital Accessibility Checker Documentation">equalizedigital.com/accessibility-checker/documentation</a></small>
</li>
</ul>
<aside class="notes">
<p>Here are a few resources that will help you get started learning accessibility deeply.</p>
<h3>WCAG</h3>
<p>The Web Content Accessibility Guidelines (WCAG) is the official accessibility documentation. You want to aim for a minimum WCAG 2.1 AA compliance.</p>
<h3>MDN</h3>
<p>I find the MDN Web Docs to be a help place for developers to find detailed accessible documentation and examples.</p>
<h3>Accessibility Checker</h3>
<p>The accessiblity checker is a plugin that I development with my partners that is a great resource for documentation. For each accessible check the plugin performs, there is documentation that describes the issue, its impact on accessibility and how to fix it.</p>
<p>These are unofficial docs so alway be sure to cross reference the information found on these docs with the office WCAG guidelines.</p>
</aside>
</section>
<section>
<h2>Accessibility First Testing</h2>
<p>Test accessibility early and test it often.</p>
<aside class="notes">
<p>The Accessibility First Mantra: Test accessibility early and test it often.</p>
</aside>
</section>
<section>
<h2>Automated Testing</h2>
<ul>
<li>Reduces repetitive tasks</li>
<li>Reduces potential for human error</li>
<li>Saves time and cost</li>
</ul>
<aside class="notes">
<p>Automation is crucial to an accessibility first development workflow. It reduces repetitive tasks and the potential for human error. Testing can quickly identify accessibility issues and provide full site reports, saving time and cost.</p>
</aside>
</section>
<section>
<h3><a href="https://wordpress.org/plugins/accessibility-checker/">Accessibility Checker</a></h3>
<small>(Free WordPress Plugin)</small>
<div class="r-stack">
<img class="img-style" data-src="images/edac-screenshot-01.png" alt="Accessibility Checker WordPress plugin summary screen">
<img class="fragment img-style" data-src="images/edac-screenshot-02.png" alt="Accessibility Checker WordPress plugin details screen">
</div>
<aside class="notes">
<p>As I previously mentioned, the Accessibility Checker is free plugin that we created at Equalize Digital.</p>
<ul>
<li>Accessibility error and warning notifications right on your post edit screen.</li>
<li>40 different accessibility checks</li>
<li>No limits on pages scanned</li>
<li>Readability analysis (Flesch Kincaid grade level)</li>
<li>Ignore feature</li>
<li>All data store on your server</li>
<li>An more...</li>
</ul>
<p>This is a screenshot of the Accessibility Checker plugin running in the WordPress admin edit screen of a post. The Accessibility Checker has three tabs; Summary, Details, and Readability with Summary being the current tab. To the left is a circle progress bar showing 83% passed tests. To the right are four squares showing 17 errors, 5 contrast errors, 6 warnings, and 0 ignored items. In the bottom it shows a reading level of 12th grade.</p>
<p>This screenshot is the same as the previous but with the details tab as the current tab. It shows a list of accessibility issues first by errors, then warnings, and finally passed checks.</p>
</aside>
</section>
<section>
<h3>Software as a Service (Saas) Scanning Tools</h3>
<ul>
<li><a href="https://monsido.com/">Monsido</a></li>
<li><a href="https://pope.tech/" >Pope Tech</a> (WAVE API)</li>
<li><a href="https://www.siteimprove.com/">Siteimprove</a></li>
</ul>
<aside class="notes">
<p>Saas scanning tools such as Monsido, Pope Tech, and Siteimprove all run from an external server. These are typically premium services that will scan a whole website or from a defined sitemap. They may have time delays or limits based on different plan levels. Detailed reporting and management tools are also provided.</p>
</aside>
</section>
<section>
<h3>Automated Doesn't Equal Accessible</h3>
<aside class="notes">
Automation doesn't equal an accessible website. It just mean that you've made accessible anything that can be automated. Some issues must be tested manually.
</aside>
</section>
<section>
<h2>Browser Extensions</h2>
<ul>
<li>Directly within the browser</li>
<li>Typically private and secure</li>
<li>Evaluates the rendered page</li>
</ul>
<aside class="notes">
<ul>
<li>Allows you to evaluate web content for accessibility issues directly within your browser.</li>
<li>Typically private and secure</li>
<li>Evaluates the fully rendered page</li>
<li>Support most Chromium browsers and/or FireFox</li>
</ul>
</aside>
</section>
<section>
<h3>WAVE</h3>
<img class="img-style" data-src="images/wave.png" alt="weather.com with wave browser extension overlay">
<aside class="notes">
<p>WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your website by injecting icons and indicators into your page.</p>
<p>In this screenshot is the WAVE Chrome extension overlayed on the weather.com website. On left side of the page there is a list of WAVE accessibility errors and alerts.</p>
</aside>
</section>
<section>
<h3>axe DevTools - Web Accessibility Testing</h3>
<img class="img-style" data-src="images/axe.png" alt="weather.com with axe dev tools browser extension">
<aside class="notes">
<p><a href="https://www.deque.com/axe/devtools/">axe DevTools</a>Uses axe-core, developed by Deque.</p>
<p>Runs in the Chrome Dev Tools</p>
<p>In this screenshot the axe DevTools Chrome extension is open in the developer tools panel. The panel shows the total number of issues with details below.</p>
</aside>
</section>
<section>
<h3>IBM Equal Access Accessibility Checker</h3>
<img class="img-style" data-src="images/ibm.png" alt="weather.com with ibm equal access accessibility checker browser extension">
<aside class="notes">
<p>The IBM Equal Access Accessibility Checker is an open source tool that utilizes IBM's accessibility rule engine.</p>
<p>Also runs in the Chrome Dev Tools</p>
<p>In this screenshot the IBM Equal Access Accessibility Checker Chrome extension is open in the developer tools panel. The panel is split in two columns with a list of issues in the first column and scan summary stats in the second column.</p>
</aside>
</section>
<section>
<h3>HeadingMap</h3>
<img class="img-style" data-src="images/headings-map.png" alt="gizmodo.com and yahoo.com with the headings map browser extension">
<aside class="notes">
<p>HeadingMap generates an index of all the headings on a page. It provides a quick way to identify out of order headings.</p>
<p>Heading order is good for accessibility and SEO.</p>
<p>Clicking on a heading takes you to it's location on the page.</p>
<p>In this screenshot is two browser windows. In the first window is the HeadingMap Chrome extension for the website gizmodo.com. Headings are out of order for this website. In the second window is the HeadingMap for the website yahoo.com. Headings are in order for this website.</p>
</aside>
</section>
<section>
<h2>Linters</h2>
<img class="img-style" data-src="images/axe-linter.png" alt="button code with axe linter visual studio code plugin code">
<a href="https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter">axe Accessibility Linter</a> (Visual Studio Code)
<small>
Checks React (.js .jsx .ts .tsx), Vue (.vue), Angular (.component.html), HTML (.html .htm), and Markdown (.md .markdown)
</small>
<aside class="notes">
<p>Also uses, Deque axe-core.</p>
<p>This is a screenshot from Visual Studio Code running the axe Accessibility Linter plugin. In the code editor you can see one line of code for a button that is missing text. Below the line of code is the axe-linter error with text that reads, "axe-linter (button-name): Ensures buttons have discernible text".</p>
<p>PHP currently doesn't have a good up-to-date linter or code sniffer.</p>
</aside>
</section>
<section>
<h2>GitHub Actions</h2>
<ul>
<li><a href="https://www.deque.com/axe/">Axe</a></li>
<li><a href="https://github.com/pa11y/pa11y">pa11y</a></li>
</ul>
<img class="img-style" data-src="images/github-actions.png" alt="GitHub action errors">
<aside class="notes">
<p>GitHub actions can be used to automate accessibility tests with code libraries like axe, pa11y, and lighthouse.</p>
<p>These actions can be run on pull requests or update as a stop-gap to ensure accessibility is tested before merging code into production. Any errors would need to resolved before being accepted.</p>
<ul>
<li>
axe by Deque: is a command line interface (CLI)
</li>
<li>
Pa11y: a command line interface (CLI) tool that you can use from your terminal
</li>
<li>
Lighthouse: by Google is included in the Chrome browser development tools. It can be run from the terminal and generates reports on accessibility.
</li>
</ul>
<p>This is a screenshot of a GitHub actions error with text that reads "All checks have failed" Followed by the failures, which are axe and unit-tests.</p>
</aside>
</section>
<section>
<h2>Keyboard</h2>
<p>Use your keyboard to move through any interactive elements. Look for:</p>
<ul class="r-stack">
<li class="fragment fade-in-then-out">Ability to tab to any interactive element (buttons or links) with the tab key.</li>
<li class="fragment fade-in-then-out">Nothing invisible or hidden (that you cannot see) gets focus.</li>
<li class="fragment fade-in-then-out">Focus order follows the order of the page, left to right, top to bottom.</li>
<li class="fragment fade-in-then-out">Visible focus outline (2px solid with a 2px offset) that sufficiently contrasts with the background (AAA color contrast).</li>
<li class="fragment fade-in-then-out">Buttons should be able to be triggered by the Enter/Return key or the space bar.</li>
<li class="fragment fade-in-then-out">Links should be triggered by the Enter/Return key.</li>
<li class="fragment fade-in-then-out">If a button or link triggers a scroll or opens a modal, etc. the focus should shift to the scrolled-to area or into the modal.</li>
<li class="fragment fade-in-then-out">If a modal is opened, when it is closed, the focus should return to the button that triggered the modal to open.</li>
</ul>
<aside class="notes">
<ul>
<li>Ability to tab to any interactive element (buttons or links) with the tab key.</li>
<li>Nothing invisible or hidden (that you cannot see) gets focus.</li>
<li>Focus order follows the order of the page, left to right, top to bottom.</li>
<li>Visible focus outline (2px solid with a 2px offset) that sufficiently contrasts with the background (AAA color contrast).</li>
<li>Buttons should be able to be triggered by the Enter/Return key or the space bar.</li>
<li>Links should be triggered by the Enter/Return key.</li>
<li>If a button or link triggers a scroll or opens a modal, etc. the focus should shift to the scrolled-to area or into the modal.</li>
<li>If a modal is opened, when it is closed, the focus should return to the button that triggered the modal to open.</li>
</ul>
</aside>
</section>
<section>
<h2>Screen Readers</h2>
<p>Use either NVDA (Windows) or VoiceOver (Mac) to listen to the element. Listen for:</p>
<ul class="r-stack">
<li class="fragment fade-in-then-out">Missing labels - anything that just says “button” or “link” but doesn't say what the button or link is or does.</li>
<li class="fragment fade-in-then-out">Confusing or incorrect labels or alternative text. For example, a close button on a modal that just reads as “X” rather than “close modal.”</li>
<li class="fragment fade-in-then-out">Ambiguous labels that don't have meaning without the surrounding text, for example, “Read More”, “Download”, etc.</li>
<li class="fragment fade-in-then-out">Unnecessary clutter (multiple links in a row going to the same place, decorative icons next to linked text, etc.)</li>
</ul>
<aside class="notes">
<ul>
<li>Missing labels - anything that just says “button” or “link” but doesn't say what the button or link is or does.</li>
<li>Confusing or incorrect labels or alternative text. For example, a close button on a modal that just reads as “X” rather than “close modal.”</li>
<li>Ambiguous labels that don't have meaning without the surrounding text, for example, “Read More”, “Download”, etc.</li>
<li>Unnecessary clutter (multiple links in a row going to the same place, decorative icons next to linked text, etc.)</li>
</ul>
</aside>
</section>
<section>
<h2 class="r-fit-text">Accessibility First = People First</h2>
<aside class="notes">
<p>In conclusion, when we fully adopt the accessibility first development method, we're choosing to prioritize people first because <strong>Accessibility First</strong> equals <strong>People First</strong>!</p>
</aside>
</section>
<section>
<h2 style="margin-bottom: 0px;">Steve Jones</h2>
<p style="margin-top: 0px;"><small>Owner & CTO</small> <br />
<a href="https://twitter.com/stevejonesdev" aria-label="Steve Jones Twitter Profile">@stevejonesdev</a></p>
<p>WordPress Accessibility Meetup <br />
<a href="Equalizedigital.com/events" aria-label="WordPress Accessibility Meetup">Equalizedigital.com/events</a></p>
<p>WordPress Accessibility Facebook Group<br />
<a href="https://www.facebook.com/groups/wordpress.accessibility" aria-label="WordPress Accessibility Facebook Group">facebook.com/groups/wordpress.accessibility</a></p>
<img style="margin-bottom:0px;" data-src="images/equalize-digital-logo.svg" width="400" alt="Equalize Digital">
<p style="margin-top:0px;"><small><a href="https://equalizedigital.com">EqualizeDigital.com</a> | <a href="https://twitter.com/EqualizeDigital">@EqualizeDigital</a></small></p>
<aside class="notes">
</aside>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
progress: true,
//showNotes: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>