Web Accessibility has always been an important topic within the Drupal community. Having a fully accessible website has many benefits in addition assisting people with disabilities. But now that AODA (the Accessibility for Ontarians with Disabilities Act) has come into effect for all organisations in Ontario with over 20 people, for many of us it's the law. This session is primarily targeted towards Designers, Developers, and Content Producers, but it will also be of great interest to Project Managers and Product Owners. In this session I offered guidance on how to: - Audit your website (for AODA compliance) - Test your code (for WCAG 2.0 A, AA, and AAA ratings) - Understand and interpret the WCAG 2.0 guidelines - Develop processes for Accessible Content and Feature Development In addition I tried to answer the following questions (among others): - What is AODA? - How does this affect me? - Why now? Why should I care? - What’s covered? What's not? - Isn't Drupal already accessible? - What do I have to do to make my site accessible? Is this a one-time thing? - Where can I find more info? Where can I get help?

1. TACKLING ACCESSIBILITY

2. (OR)
!
MAKING PEOPLE HAPPY!

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 $$$???

18. CERTIFICATION VS
CONFORMANCE

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

29. LET'S GET TECHNICAL

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!)

32. WHAT ABOUT WIDGETS?

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

41. https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/
WAVE TOOLBAR

42. http://squizlabs.github.io/HTML_CodeSniffer/
HTML_CODESNIFFER

46. http://webaim.org/resources/contrastchecker/
COLOR CONTRAST

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

53. CAMPS AND CONFERENCES
http://accessconf.cahttp://www.accessibilitycampto.org
http://www.carleton.ca/accessibilitysummit/

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

56. THANKS FOR CARING!

57. CRISPIN@THEREFORE.CA @CSPIN
DIGITAL PRODUCER, UX + A11Y LEAD

58. WWW.THEREFORE.CA