Mission: Accessible. Share & Connect Online with Everybody!


Published on

Introducing Web Accessibility. Presentation for MAP TechWorks (http://www.maptechworks.com) by Joe Dolson and Crystal Colby Mulry, July 2014.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mission: Accessible. Share & Connect Online with Everybody!

  1. 1. Mission: Accessible #npa11y Share & Connect Online with Everybody!
  2. 2. MAP and MAP TechWorks • Consulting and training for nonprofit, social enterprise and philanthropic organizations • MAP TechWorks is our nonprofit technology learning and networking community • Free and low cost workshops, email support group, and video interviews at www.maptechworks.org.
  3. 3. What is web accessibility? Interface independence: Content is not dependent on the tools used to access it.
  4. 4. What is accessibility? None of these should be required on a website: ● Keyboards ● Mice ● Monitors ● Desktop computers
  5. 5. Who does it benefit? ● People with vision disabilities ● Deaf and Hard of Hearing users ● Color-blind users ● Users with cognitive impairments ● Users with mobility impairments
  6. 6. Who does it benefit? Accessibility helps everyone. ● Users of smart phones and tablets ● Users in brightly lit rooms ● Impatient users ● You. Me.
  7. 7. Do I need an accessible site? Yes. It’s the law. It helps SEO. Above all, it’s the right thing to do.
  8. 8. Who defines “accessible”? Accessibility on the web is a wild and wooly place: ● Mostly unprotected by law ● Different solutions for different disabilities ● Filled with contradictory and confusing information
  9. 9. Who defines “accessible”? Much of accessibility is subjective (to the user, not you). Know what’s testable and objective.
  10. 10. What level do I need? Standards have diverse measurements; different users have different needs. Do everything you can reasonably afford to do.
  11. 11. Test: Keyboard navigation How: unplug your mouse. Can you navigate to every link using the tab key? Can you tell where you are?
  12. 12. Test: Keyboard navigation 1) Tab 2) Look
  13. 13. “Skip to content” links ● Who are these for? ● What does it do?
  14. 14. Quick Fix: Keyboard accessibility ● Most problems come from styles ● Search your stylesheet; find a:hover ● Replace with a:hover, a:focus
  15. 15. Test: Alt text Alt text is a text alternative for non-text content (such as images) Turn your browser’s images off. Is there any information missing?
  16. 16. Alt text “Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement.” - WebAIM (Accessibility in Mind)
  17. 17. Alt text True or false: Every image requires alt text. False.
  18. 18. Alt text: is it needed? Is the image decorative or essential? If image is decorative, use alt=""
  19. 19. Alt text: is it needed? If the content of the image is described in surrounding text, such as a caption, you might choose to use alt=""
  20. 20. Alt Text What words to use? What is the image’s content? What is its function?
  21. 21. Alt Text If an image is a link, it has to have alt text. If it doesn’t have alt text, it’s not clear what the screen reader will do.
  22. 22. Alt Text Examples Image displayed http://www.mnhs.org/
  23. 23. Alt Text Examples Image not displayed http://www.mnhs.org/
  24. 24. Alt Text Examples Image not displayed; better alt text http://www.mnhs.org/
  25. 25. Alt Text Examples Ad with image displayed http://www.comozooconservatory.org/news/music-under-glass-line-up-annnounced-8-week-free- concert-series-begins-january-5/
  26. 26. Alt Text Examples Ad with images off: no info. But the text doesn’t require design. The only things that are design are the background (which could be just color) and the image at the bottom. http://www.comozooconservatory.org/news/music-under-glass-line-up-annnounced-8-week-free- concert-series-begins-january-5/
  27. 27. Alt Text Examples Infographic with image displayed http://www.nonprofitmarketingblog.com/comments/free_webinar_learn_all_about_infographics
  28. 28. Alt Text Examples Infographic with images off: What should they have done? http://www.nonprofitmarketingblog.com/comments/free_webinar_learn_all_about_infographics
  29. 29. Quick Fix: Alt Text Sometimes, it’s not obvious. Don’t forget email! Prioritize. What are the consequences for not fixing?
  30. 30. Test: Check Color Contrast Scan site: ● Juicy Studio Color Contrast Analyser ● WebAIM WAVE tool
  31. 31. Test: Check Color Contrast Firefox add-on: WCAG Contrast Checker
  32. 32. Spot Check Color Contrast Firefox: colorPicker add-on Chrome: Native element inspector Numerous applications for your operating system.
  33. 33. Solving Color Contrast Problems Get suggestions: http://contrast- finder.tanaguru.com Test color combinations: https://joedolson.com/tools/color-contrast.php
  34. 34. Test: Video Accessibility Captions: text version of spoken words and sounds
  35. 35. Video Accessibility YouTube’s auto captions: Always review them! Tip: use auto captions for time points, then revise
  36. 36. Video Accessibility Audio description: not the same as captions. Audio descriptions are needed for users with visual disabilities when the audio track isn’t enough.
  37. 37. Video Accessibility Audio descriptions: Narrator describes what is happening. http://youtu.be/yuh35uYxQJU
  38. 38. Video Accessibility Test the player you’ll be using ● on YouTube ≠ embedded on your site ● Check keyboard accessibility ● Check caption support
  39. 39. Form Labeling Forms have two key parts: inputs and labels ● Every input must have a label ● Every label must be explicitly connected to an input
  40. 40. Form Labeling The screen reader experience is hugely affected by missing labels.
  41. 41. Form Labeling: No Labels
  42. 42. Form Labeling: Correctly Labeled
  43. 43. Form Labeling Test Keyboard test: Click on the label, then start typing. http://dev.joedolson.com/form-good.html http://dev.joedolson.com/form-bad.html
  44. 44. Fix: Inclusive Content Skimmable content? No.
  45. 45. Inclusive Content Skimmable content? Yes. http://opportunities.org/program-referrals/residential-options/
  46. 46. Inclusive Content Meaningful link text? No.
  47. 47. Quick Fix: Open in New Window Check for and remove: target="blank" Exception: when interrupting a task would interfere with completion.
  48. 48. Inclusive Content Color should not be your only way to convey info
  49. 49. Inclusive Content ● Avoid locationally driven text such as “see the image at the right” ● Use clear language ● Be aware of acronyms and abbreviations ● Use all-CAPS sparingly
  50. 50. Summary It is subjective. It is time-consuming. Prioritize. It will never be perfect. But you can get closer. Knowing the issues is more than half the battle.
  51. 51. Questions? Joe Dolson joedolson.com @joedolson Crystal Colby Mulry @ccolby
  52. 52. Accessibility Resources Accessibility is a mindset, not a checklist WebAIM: Simplified summaries, recommendations. Extensive documentation on almost every accessibility topic: http://webaim.org
  53. 53. Accessibility Resources WCAG Recommended Techniques: highly technical, though simpler than the WCAG itself. http://www.w3.org/TR/WCAG-TECHS/ University of Minnesota, Duluth Web Design References: Extensive curated catalog of accessibility articles on the web: http://bit.ly/t3tPZC