Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Everything I Know About Accessibility I Learned from Stack Overflow

866 views

Published on

Accessibility practitioners are great at talking to one another and getting into the nuances of specs and assistive tech. We also tend to live in a bit of a bubble, taking for granted many of the basics with which developers struggle on a daily basis. In this talk I will explore some of the kinds of questions developers ask one another, often with non-ideal answers, using Stack Overflow as my source.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Everything I Know About Accessibility I Learned from Stack Overflow

  1. 1. Everything I Know About Accessibility I Learned from Stack Overflow rosel.li/a11yTOConf (case sensitive) #a11yTOConf Presented by Adrian Roselli (@aardrian) for a11yTO
  2. 2. HTML #a11yTOConf
  3. 3. HTML A: You can use <img alt=""> (no src attribute) to provide helpful content to screen readers. #a11yTOConf
  4. 4. HTML Q: Why can’t I activate a link on focus with this? <a href="#"><div tabindex="0">Tab focus me, then ⏎</div></a> #a11yTOConf
  5. 5. CSS #a11yTOConf
  6. 6. CSS A: You can disable link underlines that are added by user style sheets with !important. #a11yTOConf
  7. 7. CSS Q: I used jQuery to add border=0 to links, but everything gets a weird border. How do I remove it? #a11yTOConf
  8. 8. ARIA #a11yTOConf
  9. 9. ARIA A: Use aria-labelledby to associate each form field with the paragraph of instructions. #a11yTOConf
  10. 10. ARIA Q: VoiceOver won’t announce this image. What ARIA do I need to add to make it work? <img src="foo.gif" alt=""> #a11yTOConf
  11. 11. ARIA Q: Can I avoid adding alt text if I just add aria-hidden="true" to every image? #a11yTOConf
  12. 12. Assistive Technology #a11yTOConf
  13. 13. Assistive Technology Q: How do I override how JAWS navigates tables and replace the keystrokes with my better keystrokes? #a11yTOConf
  14. 14. Assistive Technology Q: How can I check if a user has a disability or is using a screen reader? You know, to justify making a design accessible. #a11yTOConf
  15. 15. Where Are Devs? #a11yTOConf
  16. 16. Where Are Devs? •Not in our Slack channels, •Not at our a11y conferences, •Not reading our specs •Not reading our blog-o-trons. #a11yTOConf
  17. 17. Where Are A11y Pros? #a11yTOConf
  18. 18. Where Are A11y Pros? • Are we on Stack Overflow? • Are we at local tech events? • Are we training teams? • Are we involved in education? • We need better outreach. #a11yTOConf
  19. 19. Resources #a11yTOConf
  20. 20. Resources Search for terms in your own answers with: user:me is:answer {search term} #a11yTOConf
  21. 21. Resources Add underlines to links (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);})() #a11yTOConf
  22. 22. Everything I Know About Accessibility I Learned from Stack Overflow rosel.li/a11yTOConf (case sensitive) #a11yTOConf Presented by Adrian Roselli (@aardrian) for a11yTO

×