Tackling Accessibility - DrupalCampTO 2014
- 3. (AND A BETTER WORLD) HAPPY PEOPLE = $$$
- 4. DISCLAIMERS
- 5. • I am not “certified" • I am not disabled (at the moment) • Applying techniques from this presentation may result in happier people
- 6. LET'S GET TO THE POINT
- 7. ACCESSIBILITY IS NOT JUST ABOUT MAKING WEBSITES WORK FOR BLIND USERS
- 8. • In the last U.S. census, 19.6% of the population thought of themselves as having a disability. • If you include close relatives as well, people with an emotional connection to disability climbs to 53%. • The disability market represents 1.3 billion people globally who face challenges across three general areas—dexterity, cognition or sensory issues. • The disability market represents an annual disposable income of $1 trillion—and $544 billion in the US alone. • When you include friends and family, this adds another 2.3 billion people who control an incremental $6.9 trillion in annual disposable income. A FEW FACTS* *source: Fifth Quadrant Analytics
- 9. About 4.4 million Canadians (14.3%) reported having a disability in 2006. The percentage of Canadians with disabilities increased with age, ranging from 3.7% for children 14 years and under to 56.3% for those 75 years and over. - HRSDC MORE NUMBERS
- 10. NOT ABOUT DISABLED JUST DIFFERENTLY-ABLED
- 11. • Accessibility is a BUSINESS issue • Accessibility is a DEVELOPMENT challenge • Accessibility affects EVERYONE at some point
- 12. MAKE YOUR WEBSITE WORK EVERYWHERE
- 13. • Screen-readers and Voice-to-Text tools • Keyboard and Touch UI • Search engines and content aggregators • Old browsers and slower connections • Feature phones and low-tech devices • APIs and other systems • Future browsers, OS’s, and devices
- 14. Q: WHY NOW? A: AODA Legal requirements for Websites for Public sector organizations, businesses and non-profit organizations (50+ staff):! ! • as of Jan 1, 2014: New public websites and web content must conform with WCAG 2.0 Level A.! ! • by Jan 1, 2021: All public websites and web content posted after January 1, 2012, must conform with WCAG 2.0 Level AA (other than criteria 1.2.4 (captions) and 1.2.5 (pre-recorded audio descriptions).)! Accessibility for Ontarians with Disabilities Act (2005)!
- 15. Failure to comply can be costly: ! • corporations can be fined up to $100,000 a day ! • individuals or unincorporated organizations can be fined up to $50,000 a day * for “major” contraventions in both severity and history WHY BOTHER?
- 16. :(
- 17. Accessibility experts estimate that the cost of developing sites that meet WCAG 2.0 AA increases development costs by the following:! ! • 1% to 3% on simple sites built with html and css (and little to no javascript)! • 3% to 6% on intermediate sites built with html, css and an intermediate level of javascript! • 6% to 10% on heavy javascript sites or flash sites! ! Retrofitting costs 2 to 3 times more. HOW MUCH $$$???
- 19. #1: CERTIFICATION IS BULLSHIT
- 20. #2: CONFORMANCE IS OFTEN A MATTER OF INTERPRETATION
- 21. BEING RESPONSIVE
- 22. • Be considerate with content and design choices • Validate your code and follow best practices • Provide alternatives whenever possible • Fix things as soon as you can • Put a page on your website with contact info
- 23. PLAN ON IT
- 24. • Implementing from the start is much easier • Have tools and checklists in place • Factor in extra time • It begins with content and design
- 25. DESIGN DEVELOP & TEST
- 26. • Pick your colour palette and establish font sizing early on (for legibility and to ensure conformance) • Use code validators throughout development • Watch out for regressions! (automate if possible)
- 27. CONTENT + CODE = :)
- 28. • Use a multi-pronged approach • Multiple passes • More eyes (and ears) the better
- 30. • Specify language (page and elements) • Use lists for menus and buttons for buttons • Number your headings correctly (nesting matters!) • Use appropriate elements and attributes (abbr, accr, alt, title, lang, etc.) • Upload captions and transcripts for audio and video content
- 31. • Use WAI ARIA alert role to properly handle focus • Specify states (modals, pop-ups, alerts) • Use text-indent instead of display:none for icons • Specify tab-order on complex forms (better yet simplify your forms!)
- 33. ARIA enables dynamic, JavaScript-driven applications and widgets to interoperate with a variety of desktop- based assistive technologies. ARIA (ACCESSIBLE RICH INTERNET APPLICATIONS) HOW? By providing additional semantics to describe the role, state, and functionality of user interface controls, such as menus, sliders, trees, and dialogs. ! It also provides additional structural information, helping authors identify landmarks, regions, and grids on their pages.
- 34. <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="buttoncut.png" alt="cut" role="button" id="button1"> <img src="buttoncopy.png" alt="copy" role="button" id="button2"> <img src="buttonpaste.png" alt="paste" role="button" id="button3"> </div> Really Basic Example:
- 35. COMMON PITFALLS
- 36. • Keyboard traps (esp. with widgets and iFrames) • Invisible focus (where the <bleep!> am I?) • Empty anchors (what icon?) • Headers used for styling (instead of classes) • Insufficient contrast (~8% of men are colour-blind) • Keyword stuffing alt tags for SEO gains
- 37. WHAT ABOUT DRUPAL? As an inclusive community, we are committed to making sure that Drupal is an accessible tool for building websites that can also be accessed by people with disabilities.! - Drupal.org Accessibility Statement
- 38. RESOURCES
- 39. • Tools • Websites • Books
- 40. • Web Developer Toolbar! • Accessibility Developer Tools • WAVE toolbar! • Juicy Studio toolbar • FireEyes (Firebug plugin) • FireFocus (Firebug plugin) • HTML_Codesniffer BROWSER TOOLBARS & PLUGINS
- 47. WCAG 2.0 http://www.w3.org/TR/WCAG20 ! WCAG 2.0 Understanding Conformance http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-conformance- requirements-head ! WebAIM http://www.webaim.org ! WebAIM Web Accessibility for Designers http://webaim.org/resources/designers WEBSITES
- 48. Web applications and ARIA FAQ https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ Web_applications_and_ARIA_FAQ ! Understanding ARIA Widgets http://yaccessibilityblog.com/library/understanding-aria-widgets.html ! W3C-ARIA Official Guide http://www.w3.org/TR/wai-aria-practices/ ! W3C Design Patterns (examples!) http://www.w3.org/TR/wai-aria-practices/#aria_ex WAI-ARIA RESOURCES
- 49. BOOKS A Web for Everyone by Sarah Horton & Whitney Quesenbery (2014)! Accessibility Handbook, Katie Cunningham (2012)! Pro HTML5 Accessibility, Joshue O’Connor (2012)! Universal Design for Web Applications, Wendy Chisholm & Matt May (2008)!
- 50. Automatic Captions https://support.google.com/youtube/answer/3038280 ! Youtube Transcripts https://support.google.com/youtube/answer/2734799?hl=en&ref_topic=3014331 ! YouTube Ready captioning vendors http://youtubeready.dcmp.org/ ! CAPTIONS AND TRANSCRIPTS
- 51. COMMUNITY
- 52. • Camps & Conferences • Meetups & LinkedIn Groups • Twitter
- 54. Toronto Accessibility and Inclusive Design http://www.meetup.com/a11yTo/ ! LinkedIn Web Accessibility Group http://www.linkedin.com/groups/Web-Accessibility-41800/about GROUPS
- 55. FOLLOW THESE PEEPS @Jennison @thebillygregory @gbla11yday@MarcoInEnglish @PatrickDunphy @good_wally @karlgroves @mpaciello @mgifford @DavidLepofsky @ONAccessibility @IAAPOrg
- 57. CRISPIN@THEREFORE.CA @CSPIN DIGITAL PRODUCER, UX + A11Y LEAD
- 58. WWW.THEREFORE.CA