Skip to content

Commit 42c3e1b

Browse files
smhigleysmhigley
committed
debugging slide updates
1 parent 859e97c commit 42c3e1b

File tree

4 files changed

+81
-43
lines changed

4 files changed

+81
-43
lines changed

‎debugging-a11y/assets/apg-menu.png

22.6 KB
Loading

‎debugging-a11y/assets/custom.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
white-space: nowrap;
1111
}
1212

13+
.reveal h4 {
14+
font-weight: bold;
15+
text-transform: none;
16+
}
17+
1318
.content-list li {
1419
margin-bottom: 0.5em;
1520
}
@@ -140,6 +145,15 @@ blockquote {
140145
width: 100%;
141146
}
142147

148+
.collage {
149+
position: relative;
150+
width: 100%;
151+
}
152+
153+
.collage > *:not(:first-child) {
154+
position: absolute;
155+
}
156+
143157
/* Specific slide styles */
144158

145159
.reveal .styled-nav {

‎debugging-a11y/examples/menu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
66
<link rel="stylesheet" href="./menu.css">
7-
<title>Things that are on my bookshelf</title>
7+
<title>Menus and cats</title>
88
</head>
99
<body>
1010
<div class="container">

‎debugging-a11y/index.html

Lines changed: 66 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -33,37 +33,58 @@ <h1>Debugging Broken Accessibility</h1>
3333
My name is sarah higley, my twitter handle is codingchaos, and I often use it to rant about tooltips
3434
</aside>
3535
</section>
36+
<section>
37+
<h2>This talk is <strong>not</strong> about:</h2>
38+
<ul>
39+
<li class="fragment">how to test</li>
40+
<li class="fragment">how to fix specific bugs</li>
41+
<li class="fragment">tooltips</li>
42+
</ul>
43+
<aside class="notes">To start off, I want to set expectations...</aside>
44+
</section>
3645
<section>
3746
<h2>Why debugging?</h2>
47+
<aside class="notes">
48+
So why debugging specifically? It's because for me, that's usually the part of the learning process where I feel most lost (even outside of a11y)
49+
</aside>
3850
</section>
3951
<section>
4052
<h3>The accessibility process (imagination)</h3>
4153
<div class="left">
4254
<ol class="content-list">
43-
<li>Tutorials: semantic HTML, tabbing, yay!</li>
44-
<li>Do accessibility testing on product</li>
55+
<li>Learn: semantic HTML, tabbing, yay!</li>
56+
<li>Test</li>
4557
<li>Fix bugs</li>
4658
<li>Include everyone!</li>
4759
</ol>
4860
</div>
4961
<div class="right">
5062
<img src="./assets/eager.jpg" alt="Retsuko is starry-eyed and eager, surrounded by bishie sparkles">
5163
</div>
64+
<aside class="notes">
65+
So tell me if this story sounds familiar: you're working on learning a skill, or getting your footing in a field. You soak up tutorials, articles, and talks. Then whenever you strike out on your own, you rapidly get mired in some unforseen problem and get stuck without a roadmap.
66+
<p>Like when I bought my first car, which was a ~15 year old new england rust bucket, and when trying to fix it up...</p>
67+
</aside>
5268
</section>
5369
<section>
5470
<h3>The accessibility process (reality)</h3>
5571
<div class="left">
5672
<ol class="content-list">
57-
<li>Tutorials: semantic HTML, tabbing, yay!</li>
73+
<li>Learn: semantic HTML, tabbing, yay!</li>
5874
<li>Testing happens</li>
5975
<li>...</li>
6076
<li>...</li>
61-
<li>... ... why is focus disappearing??!</li>
77+
<li>... ... what is aria-required-children??!</li>
6278
</ol>
6379
</div>
6480
<div class="right">
6581
<img src="./assets/overworked.jpg" alt="Aggretsuko staggers under a huge pile of papers with deep shadows under her eyes, surrounded by little blue flames">
6682
</div>
83+
<aside class="notes">
84+
<p>... I rapidly proceeded to sheer the head off a bolt, and was then just ... stuck.</p>
85+
<p>And everything I knew up until that point had not told me what to do when something went wrong and I went off the rails.</p>
86+
<p>Maybe this is just my perception, but I've found a lot of resources out there both about how to test (and great testing tools like aXe, accessibility insights, and others), and also on how to build or make specific patterns, like dialogs or SPA navigation. But not a lot on how to actually troubleshoot or move forward when stuck (which is one of the places I struggle most when learning a new skill)</p>
87+
</aside>
6788
</section>
6889
<section>
6990
<h3>My learning process:</h3>
@@ -82,7 +103,7 @@ <h3>My learning process:</h3>
82103
</li>
83104
</ul>
84105
<aside class="notes">
85-
<p>This isn't made any easier by the way a lot of us approach learning (or maybe it's just me) I want to tell a personal story: the way I learned web dev, javascript, and accessibility was largely isolated, because:</p>
106+
<p>This isn't made any easier by the way a lot of us approach learning (or maybe it's just me): the way I learned web dev, javascript, and accessibility was largely isolated, because:</p>
86107
<ul>
87108
<li>I was afraid to ask for help, yay imposter syndrome</li>
88109
<li>Often companies only have one accessibility person, and even that is if you're lucky (I didn't always work at Microsoft).</li>
@@ -92,15 +113,6 @@ <h3>My learning process:</h3>
92113
<p>I really don't recommend this way of learning.</p>
93114
</aside>
94115
</section>
95-
<section>
96-
<h2>This talk is <strong>not</strong> about:</h2>
97-
<ul>
98-
<li class="fragment">how to test</li>
99-
<li class="fragment">how to fix specific bugs</li>
100-
<li class="fragment">tooltips</li>
101-
</ul>
102-
<aside class="notes">To bring it back to the actual talk... (also there are a lot of resources already out there about these three things)</aside>
103-
</section>
104116
<section>
105117
<h2>This talk <strong>is</strong> about:</h2>
106118
<img src="./assets/rage-work.jpg" alt="aggretsuko, an aggrieved red panda, working furiously at her computer as papers go flying" style="width: 80%;">
@@ -113,6 +125,7 @@ <h2>This talk <strong>is</strong> about:</h2>
113125
<h3>A better option:</h3>
114126
<img src="./assets/pairing.jpg" alt="Retsuko looking at her computer while Haida watches over her shoulder, both looking nonplussed.">
115127
<aside class="notes">
128+
<p>And it's also about finding or making a better option:</p>
116129
<p>Good communication with coworkers who have domain expertise in the thing you want to learn is a good way to mitigate this. Pair programming (or just pairing) is a great method to get direct insight into how other people do things</p>
117130
<p>But as mentioned, a11y folks can be a bit isolated work-wise, and sometimes there aren't a lot of opportunities to pair specifically on accessibility.</p>
118131
</aside>
@@ -144,6 +157,19 @@ <h2>Our Toolbox:</h2>
144157
</aside>
145158
</section>
146159

160+
<section>
161+
<h2>The bugs:</h2>
162+
<ol>
163+
<li>Semantics</li>
164+
<li>Focus</li>
165+
<li>Oops</li>
166+
<li>Nope</li>
167+
</ol>
168+
<aside class="notes">
169+
You'll see what I mean about those last two when we get to them
170+
</aside>
171+
</section>
172+
147173
<section>
148174
<h2>Bug 1: the dreaded &lt;table&gt;</h2>
149175
<img src="./assets/table-ex1.png" alt="screenshot of a simple-looking table with information about books">
@@ -190,7 +216,7 @@ <h3>Compare in the spec:</h3>
190216
<section>
191217
<h2>Bug 2: the screen reader cursor is "lost"</h2>
192218
<img src="./assets/actions-menu.png" alt="An open file actions dropdown menu with three actions: save, edit, and delete" style="width: 60%;">
193-
<aside class="notes">This bug is logged on a dropdown menu (a programmatic menu, not a navigation menu), where after activating one of the items, the menu closes and the screen reader (JAWS on any browser or NVDA on Chrome) is jumped somewhere else (i.e. the top of the page). Tabbing still seems to work, though.</aside>
219+
<aside class="notes">This bug is logged on a dropdown menu (a programmatic menu, not a navigation menu), where after activating one of the items, the menu closes and the screen reader (JAWS) is jumped somewhere else (i.e. the top of the page). Tabbing still seems to work, though.</aside>
194220
</section>
195221

196222
<section>
@@ -238,10 +264,10 @@ <h3>Observing focus changes</h3>
238264

239265
<section>
240266
<h2>Bug 3: the screen reader should say...</h2>
241-
<img src="./assets/links-ex2.png" alt="screenshot of a styled list of nav links: Home, About, and Contact" style="width: 70%;">
242-
<p class="small">"NVDA isn't reading the index of the link when I tab"</p>
267+
<img src="./assets/actions-menu.png" alt="The same open file actions dropdown menu with three actions: save, edit, and delete" style="width: 50%;">
268+
<p class="small">"VoiceOver isn't reading the index of the menu items"</p>
243269
<aside class="notes">
244-
This is a series of links within list items, and someone has reported that a screen reader is not reading the index of a link within the list when tabbing.
270+
Someone, perhaps the same person as logged the previous bug, tested the same menu with VO on iOS and found that VO does not read the index of actions in a menu.
245271
</aside>
246272
</section>
247273

@@ -261,7 +287,7 @@ <h3>Tools</h3>
261287

262288
<section>
263289
<h4>Do NOT do this:</h4>
264-
<pre><code data-trim data-noescape class="html">&lt;li aria-label="Home, 1 of 3"&gt;Home&lt;/li&gt;</code></pre>
290+
<pre><code data-trim data-noescape class="html">&lt;button role="menuitem" aria-label="Save, 1 of 3"&gt;Save&lt;/li&gt;</code></pre>
265291
<aside class="notes">
266292
I agree this is a real problem, because if unchecked, it can result in bad code like this.
267293
<p>However, rather than saying "never use screen readers"...</p>
@@ -271,19 +297,11 @@ <h4>Do NOT do this:</h4>
271297
<section>
272298
<h3>Compare:</h3>
273299
<div class="left" role="nav" aria-label="example styled list of links">
274-
<ul class="styled-nav">
275-
<li><a href="#">Home</a></li>
276-
<li><a href="#">About</a></li>
277-
<li><a href="#">Contact</a></li>
278-
</ul>
300+
<img src="./assets/actions-menu.png" alt="Our custom, styled file actions menu" style="width: 90%;">
279301
</div>
280302

281303
<div class="right" role="nav" aria-label="example plain HTML list of links">
282-
<ul>
283-
<li><a href="#">Home</a></li>
284-
<li><a href="#">About</a></li>
285-
<li><a href="#">Contact</a></li>
286-
</ul>
304+
<a href="https://w3c.github.io/aria-practices/examples/menu-button/menu-button-actions.html"><img src="./assets/apg-menu.png" alt="The menu button example from the ARIA Authoring Practices" style="width: 40%;"></a>
287305
</div>
288306

289307
<aside class="notes">
@@ -387,8 +405,12 @@ <h2>Digging up roots</h2>
387405
</section>
388406

389407
<section>
390-
<h3>Table structure, HTML, and the value of front-end knowledge</h3>
391-
<img src="./assets/table-ex1-debug.png" alt="screenshot of Firefox dev tools showing the incorrect table accessibility tree from bug 1">
408+
<h3>The value of front-end knowledge</h3>
409+
<div class="collage">
410+
<img src="./assets/table-ex1-debug.png" alt="screenshot of Firefox dev tools showing the incorrect table accessibility tree from bug 1" style="transform: translateX(-15%);">
411+
<img src="./assets/actions-menu.png" alt="The file menu from bug 2" style="width: 40%;top: -5%;right: -5%;">
412+
<pre style="bottom: 10%;right: -10%;width: 50%;"><code data-trim data-noescape class="js">document.activeElement</code></pre>
413+
</div>
392414
<aside class="notes">
393415
Going back to the semantic structure of that table from Bug 1
394416
</aside>
@@ -398,7 +420,7 @@ <h3>Table structure, HTML, and the value of front-end knowledge</h3>
398420
<p>Accessibility practitioner yells at cloud</p>
399421
<img src="./assets/yell-at-cloud.png" alt="meme of Abe Simpson shaking his fist with the headline Old Man Yells At Cloud.">
400422
<aside class="notes">
401-
<p>The problem with "developers these days" not knowing semantic HTML has been beaten to death by others, and doesn't really need input from me. So I'll be quick.</p>
423+
<p>The problem with "developers these days" not knowing semantic HTML, or focus management has been beaten to death by others, and doesn't really need input from me. So I'll be quick.</p>
402424
</aside>
403425
</section>
404426

@@ -417,15 +439,16 @@ <h3>Look at the structure, not the individuals:</h3>
417439

418440
<section>
419441
<h3>Bad Assistive Tech assumptions</h3>
420-
<pre><code data-trim data-noescape class="html">&lt;li aria-label="Home, 1 of 3"&gt;Home&lt;/li&gt;</code></pre>
442+
<pre><code data-trim data-noescape class="html">&lt;button role="menuitem" aria-label="Save, 1 of 3"&gt;Save&lt;/li&gt;</code></pre>
421443
<p class="small">remember this?</p>
422444
</section>
423445

424446
<section>
425-
<h4>Who is doing the testing?</h4>
447+
<h4>Who is doing the testing, and who decides what the experience should be?</h4>
426448
<ul>
427-
<li>Are disabled people hired, and do they stay?</li>
428-
<li>Are your devs and testers only familiar with VoiceOver?</li>
449+
<li>Are disabled people hired?</li>
450+
<li>Do they stay?</li>
451+
<li>Are they listened to?</li>
429452
</ul>
430453
<aside class="notes">
431454
Hiring isn't enough if accommodations aren't provided as well.
@@ -475,15 +498,15 @@ <h4>Github checks anyone can do:</h4>
475498
<section>
476499
<h4>With some help:</h4>
477500
<div class="steps2">
478-
<div class="fragment fade-out step2">
501+
<div class=" step2">
479502
<img src="./assets/gh-stats-search.png" alt="A screenshot of a form field collecting github repository URL information for ant-design, under the heading 'Find accessibility stats by github repository'.">
480503
</div>
481-
<div class="fragment fade-in-then-out step2">
504+
<!--<div class="fragment fade-in-then-out step2">
482505
<img src="./assets/gh-stats-labels.png" alt="A screenshot of a github label with the name 'accessibility' and a keyboard emoji under the heading 'Issue labels'." style="width: 60%;">
483506
</div>
484507
<div class="fragment fade-in step2">
485508
<img src="./assets/gh-stats-results.png" alt="A heading saying 'Issue statistics' followed by a table that has shows issues tagged with accessibility on average get 6 comments, take 114 days to close, 7 days to comment, and are resolved 18% of the time compared to all issues, which average 2 comments, 13 hours to close, 8 hours to comment, and are resolved 5% of the time." style="width: 85%;">
486-
</div>
509+
</div>-->
487510
</div>
488511
<aside class="notes">
489512
<p>I chose ant design because it came up first when I googled "most popular UI library of 2020." Those stats are actually on the good side of the UI libraries I checked. This is super rough and experimental, so take it with a lot of salt and critical thinking. I'd love feedback on it.</p>
@@ -524,8 +547,9 @@ <h2>This talk is about:</h2>
524547
<p>...but it's better with friends.</p>
525548
<img src="./assets/better-with-friends.png" alt="aggretsuko screams into a karaoke mic while sharing wine with two of her friends">
526549
<aside class="notes">
527-
<p>I still don't know how to solve this, and I'm not sure anyone does. But it doesn't do any good to try to figure it out alone.</p>
528-
<p>The ultimate tool to debugging accessibility is sometimes just to be kind to yourself, and find people who you can share, rant, cry, and figure it out with.</p>
550+
<p>But this talk is also about the better option:</p>
551+
<p>Sometimes the best way to make progress on a seemingly impossible task is to find other people and other perspectives.</p>
552+
<p>The ultimate tool to debugging accessibility is sometimes just to be kind to yourself, and find people who you can share, rant, cry, or maybe just sing death metal in a karaoke bar with plenty of wine.</p>
529553
</aside>
530554
</section>
531555

@@ -536,7 +560,7 @@ <h2>slides:</h2>
536560
<h2>contact:</h2>
537561
<a href="https://twitter.com/codingchaos">@codingchaos</a>
538562
<aside class="notes">
539-
If you have any questions about the talk, or want to rant about tooltips, I'm on twitter @codingchaos.
563+
If you have any questions about the talk, or want to rant, I'm on twitter @codingchaos.
540564
</aside>
541565
</section>
542566
</div>

0 commit comments

Comments
 (0)