Selfish Accessibility: WordCamp Toronto 2014

Embed Size (px)

DESCRIPTION

We can all pretend that we’re helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive into ARIA, but more of an overall primer for those who aren’t sure where to start nor how it helps them.

Text of Selfish Accessibility: WordCamp Toronto 2014

  • 1. Selfish AccessibilityPresented by Adrian Roselli for WordCamp Toronto 2014#WCTO

2. About Adrian Roselli Co-written four books. Technical editorfor two books. Written over fiftyarticles, most recentlyfor .net Magazine andWeb Standards Sherpa.Great bedtime reading! 3. About Adrian Roselli Member of W3C HTML Working Group, W3CAccessibility Task Force, five W3C CommunityGroups. Building for the web since 1994. Founder, owner at Algonquin Studios(AlgonquinStudios.com). Learn more at AdrianRoselli.com. Avoid on Twitter @aardrian.I warned you. 4. What is a11y? A numeronym for accessibility: The first and last letter, The number of characters omitted. Prominent on Twitter (character restrictions): #a11y Examples: l10n localization i18n internationalizationAint language funsies? 5. Accessibility Gets No RespectCyberspace (gray)Lime Rickey (green)Online (blue)In fairness, Sherwin Williams needs to come up with a lot of color names... 6. Accessibility Gets No Respecthowever I think the team could have done better than this. 7. What Well Cover Boring Statistics How to Be Selfish Basic Tests Some Techniques Accessibility and WordPress Questions (ongoing!)Work with me, people. 8. Boring Statistics1 of 5 sections. 9. Any Disability In the United States: 10.4% aged 21-64 years old, 25% aged 65-74 years old, 50% aged 75+. Includes: Visual Hearing Mobility Cognitivehttp://www.who.int/mediacentre/factsheets/fs282/en/http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012 10. Vision Impairments 285 million worldwide: 39 million are blind, 246 million have low vision, 82% of people living with blindness are aged 50and above. 1.8% of Americans aged 21-64. 4.0% of Americans aged 65-74. 9.8% of Americans aged 75+.http://www.who.int/mediacentre/factsheets/fs282/en/http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012 11. Hearing Impairments 360 million people worldwide have disablinghearing loss. 17% (36 million) of American adults reportsome degree of hearing loss: 18% aged 45-64 years old, 30% aged 65-74 years old, 47% aged 75+ years old.http://www.who.int/mediacentre/factsheets/fs300/en/https://www.nidcd.nih.gov/health/statistics/Pages/quick.aspx 12. Mobility Impairments In the United States: 5.5% aged 21-64 years old. 15.6% aged 65-74 years old. 32.9% aged 75+.http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012 13. Cognitive Impairments Dyslexia, Dyscalculia, Memory issues, Distractions (ADD, ADHD), In the United States: 4.3% aged 21-64 years old. 5.4% aged 65-74 years old. 14.4% aged 75+.http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subButton=Get+HTML 14. How to Be Selfish2 of 5 sections. 15. WebAIMs Hierarchy for MotivatingAccessibility Changehttp://webaim.org/blog/motivating-accessibility-change/ 16. My Hierarchy for MotivatingAccessibility ChangeIs better, no? 17. Getting Older Affects (nearly) everyone, Carries risks and side effects, Is not for the young.Im still experimenting with it. 18. Rising Damp on Flickr. 19. Darren Baldwin on Flickr. 20. Accidents Broken limbs, Eye injuries, Hearing injuries, Head trauma.All of these have happened to me, multiple times. 21. James Lee on Flickr. 22. Rev Stan on Flickr. 23. Let Ideas Compete on Flickr. 24. Fluffy Steve on Flickr. 25. Paul Townsend on Flickr. 26. But Im Invincible! Multi-tasking, Sunlight, Eating at your desk, No headphones handy, Content is not in your native language.The sun is trying to kill me. 27. https://twitter.com/aardrian/statuses/388733408576159744 28. Shawn Liu on Flickr. 29. Bitznbitez on Flickr. 30. Marille on Flickr. 31. barockschloss on Flickr. 32. Seb on Flickr. 33. A.Davy on Flickr. 34. Raul Lieberwirth on Flickr. 35. Tim Norris on Flickr. 36. Steve Rhodes on Flickr. 37. SuperFantastic on Flickr. 38. Jacob Enos on Flickr. 39. World Bank Photo Collection on Flickr. 40. Lars Kristian Flem on Flickr. 41. Tech Support Think of your family! Think of your time spent helping them! Think of the wasted holidays!This is why we hate the holidays. 42. Robert Simmons on Flickr. 43. The Message Supporting accessibility now helps to servefuture you.There is no try. 44. The Message Supporting accessibility now helps to servefuture you. Supporting accessibility now helps injuredyou, encumbered you.There is no try. 45. The Message Supporting accessibility now helps to servefuture you. Supporting accessibility now helps injuredyou, encumbered you. Getting younger developers to buy in helpsfuture you if you teach them well.There is no try. 46. Basic Tests3 of 4 sections. 47. Click on Field Labels When you click label text next to a text box,does the cursor appear in the field? When you click label text next to a radio /checkbox, does it get toggled? When you click label text next to a selectmenu, does it get focus?http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 48. Unplug Your Mouse Turn off your trackpad, stick, trackball, etc. Can you interact with all controls (links,menus, forms) with only the keyboard? Can you tell which item has focus? Does the tab order match your expectation?http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 49. Turn off Images Can you still make sense of the page? Is content missing? Can you still use the site? Is your alt text useful?http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 50. Turn on High Contrast Mode Windows only. Background images and colors are replaced. Text colors are replaced. Does this make your site unusable?http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html 51. Turn off CSS Does important content or functionalitydisappear? Do error messages or other items that rely onvisual cues make sense? Is content still in a reasonable order? Do any styles (colors, text effects, etc.)remain?http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 52. Test for Colorblindness/Contrast Is there enough contrast? Are hyperlinks, menus, etc. still visible? Tools: Chrome Color Contrast Analyzer Lea Verous Contrast Ratio WebAIM Color Contrast Checker CheckMyColours.comhttp://www.inpixelitrust.fr/blog/en/tips-create-accessible-color-palette/http://alistapart.com/blog/post/easy-color-contrast-testing 53. Protanopia 54. Deuteranopia 55. Tritanopia 56. Look for Captions & Transcripts Do video/audio clips have text alternatives? Are links to closed-captions or transcripts builtinto the player or separate text links? Is there an audio description available? Tools: Media Access Australia YouTube captioning tutorial,Vimeo captioning tutorial, Tiffany Browns WebVTT tutorial, DIY Resources for Closed Captioning and Transcriptionfrom 3 Play Media.http://webaim.org/techniques/captions/ 57. https://www.youtube.com/watch?v=zCqN_cCLnnk 58. Hyperlinks! Is there any click here, more, link to?http://www.sitepoint.com/15-rules-making-accessible-links/ 59. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons?http://www.sitepoint.com/15-rules-making-accessible-links/ 60. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons? Do you warn before opening new windows?http://www.sitepoint.com/15-rules-making-accessible-links/ 61. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons? Do you warn before opening new windows? Do links to downloads provide helpful info?http://www.sitepoint.com/15-rules-making-accessible-links/ 62. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons? Do you warn before opening new windows? Do links to downloads provide helpful info? Are you using pagination links?http://www.sitepoint.com/15-rules-making-accessible-links/ 63. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons? Do you warn before opening new windows? Do links to downloads provide helpful info? Are you using pagination links? Are your links underlined (or otherwise obvious)?http://www.sitepoint.com/15-rules-making-accessible-links/ 64. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons? Do you warn before opening new windows? Do links to downloads provide helpful info? Are you using pagination links? Are your links underlined (or otherwise obvious)? Is there alt text for image links?http://www.sitepoint.com/15-rules-making-accessible-links/ 65. Hyperlinks! Is there any click here, more, link to? Are you using all-caps, URLs, emoticons? Do you warn before opening new windows? Do links to downloads provide helpful info? Are you using pagination links? Are your links underlined (or otherwise obvious)? Is there alt text for image links? Is the link text consistent?http://www.sitepoint.com/15-rules-making-accessible-links/ 66. http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html 67. Some Techniques4 of 5 sections. 68. Checklist Accessibility is not a checklist.http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/ 69. Checklist Accessibility is not a checklist. Accessibility is an ongoing process.http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/ 70. Stairamphttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/ Dean Bouchard on Flickr 71. WAI-ARIA Web Accessibility Initiative Accessible RichInternet Applications. Adds accessibility information to HTMLelements. Can be used with prior versions of HTML. WAI-ARIA 1.0 published March 20, 2014.http://w