• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tackling Accessibility - DrupalCampTO 2014
 

Tackling Accessibility - DrupalCampTO 2014

on

  • 196 views

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 ...

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?

Statistics

Views

Total Views
196
Views on SlideShare
183
Embed Views
13

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 13

https://twitter.com 13

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tackling Accessibility - DrupalCampTO 2014 Tackling Accessibility - DrupalCampTO 2014 Presentation Transcript

    • TACKLING ACCESSIBILITY
    • (OR) ! MAKING PEOPLE HAPPY!
    • (AND A BETTER WORLD) HAPPY PEOPLE = $$$
    • DISCLAIMERS
    • • I am not “certified" • I am not disabled (at the moment) • Applying techniques from this presentation may result in happier people
    • LET'S GET TO THE POINT
    • ACCESSIBILITY IS NOT JUST ABOUT MAKING WEBSITES WORK FOR BLIND USERS
    • • 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
    • 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
    • NOT ABOUT DISABLED JUST DIFFERENTLY-ABLED
    • • Accessibility is a BUSINESS issue • Accessibility is a DEVELOPMENT challenge • Accessibility affects EVERYONE at some point
    • MAKE YOUR WEBSITE WORK EVERYWHERE
    • • 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
    • 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)!
    • 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?
    • :(
    • 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 $$$???
    • CERTIFICATION VS CONFORMANCE
    • #1: CERTIFICATION IS BULLSHIT
    • #2: CONFORMANCE IS OFTEN A MATTER OF INTERPRETATION
    • BEING RESPONSIVE
    • • 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
    • PLAN ON IT
    • • Implementing from the start is much easier • Have tools and checklists in place • Factor in extra time • It begins with content and design
    • DESIGN DEVELOP & TEST
    • • 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)
    • CONTENT + CODE = :)
    • • Use a multi-pronged approach • Multiple passes • More eyes (and ears) the better
    • LET'S GET TECHNICAL
    • • 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
    • • 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!)
    • WHAT ABOUT WIDGETS?
    • 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.
    • <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:
    • COMMON PITFALLS
    • • 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
    • 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
    • RESOURCES
    • • Tools • Websites • Books
    • • Web Developer Toolbar! • Accessibility Developer Tools • WAVE toolbar! • Juicy Studio toolbar • FireEyes (Firebug plugin) • FireFocus (Firebug plugin) • HTML_Codesniffer BROWSER TOOLBARS & PLUGINS
    • https://addons.mozilla.org/en-US/firefox/addon/wave-toolbar/ WAVE TOOLBAR
    • http://squizlabs.github.io/HTML_CodeSniffer/ HTML_CODESNIFFER
    • http://webaim.org/resources/contrastchecker/ COLOR CONTRAST
    • 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
    • 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
    • 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)!
    • 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
    • COMMUNITY
    • • Camps & Conferences • Meetups & LinkedIn Groups • Twitter
    • CAMPS AND CONFERENCES http://accessconf.cahttp://www.accessibilitycampto.org http://www.carleton.ca/accessibilitysummit/
    • Toronto Accessibility and Inclusive Design http://www.meetup.com/a11yTo/ ! LinkedIn Web Accessibility Group http://www.linkedin.com/groups/Web-Accessibility-41800/about GROUPS
    • FOLLOW THESE PEEPS @Jennison @thebillygregory @gbla11yday@MarcoInEnglish @PatrickDunphy @good_wally @karlgroves @mpaciello @mgifford @DavidLepofsky @ONAccessibility @IAAPOrg
    • THANKS FOR CARING!
    • CRISPIN@THEREFORE.CA @CSPIN DIGITAL PRODUCER, UX + A11Y LEAD
    • WWW.THEREFORE.CA