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.

Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack Overflow

489 views

Published on

Accessibility practitioners tend to live in a bubble, taking for granted many of the basics with which developers struggle. Explore questions developers ask one another.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack Overflow

  1. 1. Everything I Know About Accessibility I Learned from Stack Overflow rosel.li/guelph (case sensitive) #AccessConf18 Presented by Adrian Roselli (@aardrian) at Guelph Accessibility Conference
  2. 2. HTML #AccessConf18
  3. 3. HTML A: You can use <img alt=""> (no src attribute) to provide helpful content to screen readers. #AccessConf18
  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> #AccessConf18
  5. 5. CSS #AccessConf18
  6. 6. CSS A: You can disable link underlines that are added by user style sheets with !important. #AccessConf18
  7. 7. CSS Q: I used jQuery to add border=0 to links, but everything gets a weird border. How do I remove it? #AccessConf18
  8. 8. ARIA #AccessConf18
  9. 9. ARIA A: Use aria-labelledby to associate each form field with the paragraph of instructions. #AccessConf18
  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=""> #AccessConf18
  11. 11. ARIA Q: Can I avoid adding alt text if I just add aria-hidden="true" to every image? #AccessConf18
  12. 12. Assistive Technology #AccessConf18
  13. 13. Assistive Technology Q: How do I override how JAWS navigates tables and replace the keystrokes with my better keystrokes? #AccessConf18
  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. #AccessConf18
  15. 15. Survey Participants (2018) #AccessConf18
  16. 16. “Physical Differences” 1.4% I am 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 #AccessConf18
  17. 17. “Mental Health and Differences” 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 #AccessConf18
  18. 18. Where Are Devs? #AccessConf18
  19. 19. Where Are Devs? •Not in our Slack channels, •Not at our a11y conferences, •Not reading our specs •Not reading our blog-o-trons. #AccessConf18
  20. 20. Where Are A11y Pros? #AccessConf18
  21. 21. 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. #AccessConf18
  22. 22. Resources #AccessConf18
  23. 23. Resources Search for terms in your own answers with: user:me is:answer {search term} #AccessConf18
  24. 24. 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);})() #AccessConf18
  25. 25. Everything I Know About Accessibility I Learned from Stack Overflow rosel.li/guelph (case sensitive) #AccessConf18 Presented by Adrian Roselli (@aardrian) at Guelph Accessibility Conference

×