Downloaded 20 times
Uploaded byAdrian Roselli
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
Adrian Roselli's presentation at the CSUN Assistive Technology Conference covers various aspects of web accessibility, emphasizing techniques for improving user experience for individuals with disabilities. Key topics include using appropriate HTML elements for screen readers, managing CSS styles, and implementing ARIA roles effectively. The presentation also highlights the need for better outreach and participation from developers and accessibility professionals in the community.
More Related Content
Similar to CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
More from Adrian Roselli
![How Big Brands are Taking Your Traffic in Alberta [Data Inside].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/howbigbrandsaretakingyourtrafficinalbertadatainside-260123180142-42d276f3-thumbnail.jpg?width=640&height=640&fit=bounds)
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
- 1. Everything I KnowAbout Accessibility I Learned from Stack Overflow rosel.li/CSUN (case sensitive) #CSUNATC18 Presented by Adrian Roselli (@aardrian) at CSUN Assistive Technology Conference
- 2.
- 3. HTML A: You canuse <img alt=""> (no src attribute) to provide helpful content to screen readers. #CSUNATC18
- 4. HTML Q: Why can’tI activate a link on focus with this? <a href="#"><div tabindex="0">Tab focus me, then ⏎</div></a> #CSUNATC18
- 6.
- 7. CSS A: You candisable link underlines that are added by user style sheets with !important. #CSUNATC18
- 8. CSS Q: I usedjQuery to add border=0 to links, but everything gets a weird border. How do I remove it? #CSUNATC18
- 10.
- 11. ARIA A: Use aria-labelledbyto associate each form field with the paragraph of instructions. #CSUNATC18
- 12. ARIA Q: VoiceOver won’tannounce this image. What ARIA do I need to add to make it work? <img src="foo.gif" alt=""> #CSUNATC18
- 13. ARIA Q: Can Iavoid adding alt text if I just add aria-hidden="true" to every image? #CSUNATC18
- 15.
- 16. Assistive Technology Q: Howdo I override how JAWS navigates tables and replace the keystrokes with my better keystrokes? #CSUNATC18
- 17. Assistive Technology Q: Howcan I check if a user has a disability or is using a screen reader? You know, to justify making a design accessible. #CSUNATC18
- 19.
- 20. “Physical Differences” 1.4% Iam blind / have difficulty seeing 0.8% I am deaf / have difficulty hearing 0.3% I am unable to / find it difficult to walk and/or stand without assistance 0.3% I am unable to / find it difficult to type #CSUNATC18
- 21. “Mental Health andDifferences” 8.5% I have a mood or emotional disorder (ex. depression, bipolar disorder) 7.8% I have an anxiety disorder 5.9% I have a concentration and/or memory disorder 2.1% I identify as autistic / a person with autism #CSUNATC18
- 22.
- 23. Where Are Devs? •Notin our Slack channels, •Not at our a11y conferences, •Not reading our specs •Not reading our blog-o-trons. #CSUNATC18
- 24. Where Are A11yPros? #CSUNATC18
- 25. Where Are A11yPros? • Are we on Stack Overflow? • Are we at local tech events? • Are we training teams? • Are we involved in education? • We need better outreach. #CSUNATC18
- 26.
- 27. Resources Search for termsin your own answers with: user:me is:answer {search term} #CSUNATC18
- 28. Resources Add underlines tolinks (rosel.li/bookmarklets#SOlink): javascript:(function(){var a=document.createElement('style'),b;document.head. appendChild(a);b=a.sheet;b.insertRule('.post-text a:link, .post-text a:visited, .comment-copy a:link, .comment-copy a:visited{text- decoration:underline !important}',0);})() #CSUNATC18
- 29. Everything I KnowAbout Accessibility I Learned from Stack Overflow rosel.li/CSUN (case sensitive) #CSUNATC18 Presented by Adrian Roselli (@aardrian) at CSUN Assistive Technology Conference
Editor's Notes
- #2 Read the URL, hashtag, Twitter handle As the Help Desk of the web Less “Wisdom of the Crowds” More “Most Popular, Not Most Correct” I am explicitly not including links to posts All questions/answers are paraphrased These slides use the fonts and colors from the SO site (tho I added link underlines) Event hashtag in the bottom right
- #3 Linger on this slide. Not all HTML questions are HTML.
- #4 This is an example of answer I saw to a question about writing content only screen readers will see. It was not accepted.
- #5 One answer cautioned against it, but explained how you could do this with script.
- #6 The text “No more HTML; React will run the web” on a starfield above a neon horizon line and neon grid. Behind the text is a purple triangle with translucent purple tail. The text is set in neon script (first three words), chrome block letters (for “React”), and oblique block letters (“will run the web”). Everything glows. It has a very retro 80s kitsch feel. Not everybody knows “raw” HTML. Analogous to seeing <cfif> tags in static HTML because of copy/paste
- #7 Linger on this slide. CSS questions usually have a script aspect to them.
- #8 Question was about overriding ugly underlines. Really wanted to prevent all users from ruining his/her design.
- #9 Many questions conflate JS, CSS, and HTML. Do not understand distinction.
- #10 The text “Did you try jQuery for that CSS issue?” on a starfield above a neon horizon line and neon grid. Behind the text is a yellow-to-orange gradient circle with orange palm tree silhouettes. The text is set in neon script (first three words), chrome block letters (for “jQuery”), and oblique block letters (“for that CSS issue”). Everything glows. It has a very retro 80s kitsch feel. Devs often do not know the difference between CSS and script Many get to it via a library or framework
- #11 Linger on this slide. As a11y pros we struggle with ARIA ourselves. Think of what we have seen so far. Imagine how out of hand this can get.
- #12 Question was about making sure a screen reader user never missed instructions. Problem was that they were not in the flow of the form. Also, confusing, so SR users who saw it would struggle.
- #13 He/she wanted SR user to know there was an image. Was not concerned what it said, but wanted to use to know was missing something. Had inherited somebody else’s code.
- #14 Conversely, this was a desire to hide everything. Came about because page failed validation for missing alt text. Did not seem to understand blank alt is fine.
- #15 The text “Just use ARIA everywhere” on a starfield above a neon horizon line and neon grid. Behind the text are neon triangles. The text is set in neon script (first couple words), chrome block letters (for “ARIA”), and oblique block letters (last word). Everything glows. It has a very retro 80s kitsch feel. Not uncommon to see 5,000 word tutorials that are inaccessible When pressed, the author often says “just add ARIA”
- #17 Dev found table navigation in JAWS confusing. Decided his method for using the tables made more sense. Built a giant library that worked outside an SR, but it fell apart in JAWS.
- #18 Struggled to make the case for a11y support to bosses. Bosses wanted numbers. Bosses also only considered a separate site, but numbers had to justify effort.
- #19 The text “We must detect screen readers” on a starfield above a neon horizon line and neon grid. Behind the text is a purple triangle with a rainbow tail. The text is set in neon script (first couple words), chrome block letters (for “Detect”), and oblique block letters (“screen readers”). Everything glows. It has a very retro 80s kitsch feel. Developers see AT as a barrier to be surmounted Rarely do they understand the browser’s role
- #20 SO ran a survey; let’s look at who participates Between 1.7% and 11.25% of SO survey respondents identified as having a disability (selection bias in inaccessible survey, there may be overlap between two groups) Let’s frame that… “We know developers can experience many forms of disability and difference, from mental health challenges to physical disability. Mental health issues like depression and anxiety are particularly common among our respondents. In the United States, almost 20% of respondents said they deal with either or both.” https://insights.stackoverflow.com/survey/2018#developer-profile-disability-status
- #21 I put the title in quotes because that is the SO term. 1,702 responses identified as having a physical difference 1.7%
- #22 I put the title in quotes because that is the SO term. 11,431 responses identified as having a mental difference 11.25%
- #23 On SO, developers are not working with a11y pros… Who do they ask? What is their regular support channel? Where do these devs learn these things? When do they realize they need to get help? How do they know what to even ask? Why aren’t they find or asking us?
- #24 They do not just stumble across our things. They find awful tutorials. They follow name brands who do not do it. They see lots of lip service. They see terrible advice in general.
- #25 As an industry, where do we go to contribute? Are we in an echo chamber? Who here interacts with any devs outside of those in their day job? Is this our fault? Many are already out there.
- #26 Many are already out there. Maybe choose a place to make your mark. Hang out on a forum. Leave helpful comments at the big sites. Follow-up on the social medias. Go to local tech events. Pester local colleges and universities. Offer to run a course. Accept that sometimes we will be wrong.
- #27 If you do choose to go to Stack Overflow, I made a couple resources for you. I am taking my annual sanity break.
- #28 Re-using answers is awesome. A well-documented / -linked / -researched answer should be re-used. This can make it easier to find.
- #29 I filed an issue forever ago. The bug reporting model is weird. I accepted an answer, but no idea what happens next. Use this in the meantime.
- #30 Read the URL