Download to read offline
More Related Content
Similar to Hands On (& Eyes & Ears) Accessibility Workshop
Hands On (& Eyes & Ears) Accessibility Workshop
- 1. Hands-On (& Eyes& Ears) Accessibility November M. Samnee Manager, New Product Development Thomson Reuters July 12, 2012
- 2. CC Image courtesyof eszter on Flickr Why Should We Care? 2
- 3. Statistics – U.S. 20% of US 27 Million pop have Disabled reading difficulties 5 Million Disabled employed 3
- 4. Financial Impact US disabledspend $1 trillion each year $200B of that is discretionary spending CC Image courtesy of 401K 2012 on Flickr 4
- 5. Risks & Opportunities • Risks: – Inability to sell to federal/state agencies, academic markets – Lawsuits – Bad PR • Opportunities – Ethical obligation to be inclusive – Enhancements for disabled often enhance experience for everyone CC Image courtesy of avyfain on Flickr 5
- 6. Retrofit vs. AccessibilityFrom the Start • Retrofitting for the web can be more expensive – Accessibility in the beginning increases development costs by no more than 10% – Retrofitting accessibility may cost 2 to 3 times more CC Image courtesy of verseguru on Flickr 6
- 7. CC Image courtesyof Rolling F-Stop on Flickr How persons with disabilities access the web 7
- 8. Types of Disabilities Visual – Vision Loss, Blindness, Color- Blindness Hearing – Diminished or partial hearing, Deafness Mobility – Muscle fatigue/weakness, fine motor control, paralysis Cognitive – Dyslexia, Autism, ADD/ADHD 8
- 9. Assistive Technologies Used •No Vision/Blindness: – Typically use a screen reader – May use a refreshable Braille display 9
- 10. Assistive Technologies Used •Low vision or partial vision loss: – Screen Magnifiers (commercial or come with the OS) – High-contrast mode – May use a high-contrast keyboard 10
- 11. Assistive Technologies Used • Mobility impairments – May use voice recognition software – May use different keyboards or mice • Hearing impairments or Deafness: – Need captioned videos and may prefer contact via email or chat 11
- 12. Assistive Technologies Used •Cognitive – May use voice recognition or screen reading software – May use custom CSS to control web page presentation 12
- 13. Hands-On Time! The Task:Search the Commerce Bank website for “CD rates”. 13
- 14. Issues We Found 14 CC Image courtesy of L.e.e on Flickr
- 15. Issues we sawtoday • Consider Reading Order • Use True Text Whenever Possible • Design Accessible Form Controls • Design a “Skip to Main Content” Link (maybe) 15
- 16. CC Image courtesyof P1r on Flickr Standards & Guidelines 16
- 17. Main Web AccessibilityStandards Internet access is a human right. How do we implement accessibility? WCAG* 2.0 -Model Accessibility Guideline from the World Wide Web Consortium (W3C). Current version; replaces WCAG 1.0. WCAG* 1.0 – mostly extinct. Sec 508 -USA-specific law. Currently undergoing review to update. -Federal agencies require a VPAT as part of RFP process 17 *Web Content Accessibility Guidelines (WCAG)
- 18. Standards - WCAG2.0, Level AA* Content must be: • Perceivable – Content is made available to the senses – sight, hearing and/or touch. • Operable – Interface forms, controls and navigation are operable. 3. Understandable – Content and interface are understandable. 4. Robust – Content can be used reliably by a wide variety of user agents, including assistive technologies. 18 * http://www.w3.org/TR/WCAG/
- 19. from the WebAimflyer • Plan Heading Structure • Design Link Focus Early Indicators • Consider Reading Order • Design a "Skip to Main Content" Link • Provide Good Contrast • Ensure Link Text Makes • Use True Text Whenever Sense on Its Own Possible • Use Animation, Video, and • Use Adequate Font Size Audio Carefully • Remember Line Length • Don't Rely on Color Alone • Make Sure Links are • Design Accessible Form Recognizable Controls 19
- 20. CC Image courtesyof zzpza on Flickr Resources 20
- 21. Tools • Free AssistiveTechnologies – Windows: • NVDA • Windows Magnifier & High Contrast mode – Apple • VoiceOver • Zoom & High Contrast – Unplug your mouse! • Free Development & Testing Tools – WAVE Firefox toolbar – Color Contrast Analyzer & other Firefox plug-ins – Magpie 21
- 22.
- 23.
- 24.
- 25. Design & DevelopmentTechniques • Web Accessibility Initiative (WAI)* • WebAim – resources and e- mail discussion list** • The Paciello Group’s Resources*** • Simply Accessible**** • Deque***** * http://www.w3.org/WAI/ ** http://webaim.org *** http://www.paciellogroup.com **** http://simplyaccessible.com 25 ***** http://deque.com
- 26. Go forth andprosper! Feel free to reach out for further discussion: [email protected] @novie 26
Editor's Notes
- #5 Even if you think you have a product that disabled people won’t buy – (example of hunting equipment used by Texas DARS employee) – it is much easier for them to shop for gifts online than it is in stores
- #6 Lost business — (federal agencies and those receiving federal funding) are required to purchase the most accessible product that meets their needs Lawsuits - Target class action settles for $6 million, not to mention costs of retrofitting their site Structured settlements from Lainey Feingold in a number of industries (also working for tactile POS in many retail environments so blind people do not have to disclose their PIN, including getting them for Target & Best Buy) - MLB -- Charles Schwab -- American Cancer Society -- Staples -- CVS -- Rite Aid -- Credit reports by the credit agencies -- RadioShack -- LaSalle Bank -- First Union --many more Federal Agency investigations - In US, Department of Justice, civil rights division says the internet is included in the ADA, and are investigating complaints of inaccessible companies. NY has sued Orbitz, other travel websites. Cities and corporations included, e.g., Wells Fargo Curb cut, power door example
- #7 Design with Accessibility in Mind 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 Compare these costs to the retrofitting costs which consistently come in as 2 to 3 times more. http://www.glendathegood.com/blog/?cat=4 Retrofitting is not only expensive, but very painful!
- #9 Disabilities that could affect computer use: - Mobility impairments – these can be temporary, like repetitive stress Muscle fatigue and weakness Poor fine motor control (Multiple Sclerosis, Arthritis, muscle fatigue, muscle weakness, tremor, broken bones) Paralysis or partial paralysis Amputation or missing limbs - Cognitive Disabilities – many of these people wouldn’t consider themselves disabled, like Justin, but does affect his work Dyslexia ADD/ADHD
- #10 For No Vision/Blindness , customers typically use a screen reader In most common use: JAWS (Job Access With Speech) WindowEyes VoiceOver (for Apple products) NVDA (Non-Visual Desktop Access) Some customers may use a refreshable Braille display along with (or independent of) a screen reader so that they can quietly read. These users may get the most focus for accessibility efforts (for many reasons) but they are not the only ones to accommodate.
- #11 For low vision or partial vision loss , customers may use screen magnifiers (video example). Most computers come with free screen magnification and allow for zooming in the internet browser, but many of our customers also use: ZoomText WinZoom MAGic Use these with or without narration
- #12 Those with mobility impairments may use voice recognition software (video example), alone or along with different keyboards or mice, to interact with the web. The most prevalent voice recognition software used is Dragon Naturally Speaking .
- #14 The Rules: Each individual must be the tester for at least one station (can repeat stations if we have time) You must use the simulated limitations (although, if you are not a touch-typist, you can look at the keyboard) The tester will think aloud or summarize his/her experience for their small group Dragon station: http://www.youtube.com/watch?v=plPsmjA4Y7s&feature=plcp Ask the Dictator: Episode 59
- #18 WCAG 1.0 (May 1999 – Dec 11, 2008) WCAG 2.0 (Completely replaced WCAG 1.0; adopted Dec 11, 2008.) “ Section §508” in the US – will map to WCAG 2.0 soon Especially for sites not subject to a VPAT, industry widely recommends WCAG2.0. Target follows this.
- #19 Why WCAG 2.0? Section §508” in the US – will map to WCAG 2.0 AA soon Especially for sites not subject to a VPAT, industry widely recommends WCAG2.0. Settlements follow this. Rewrite of WCAG tried to make it more friendly and approachable language and documentation, but can still feel vague and in actionable Real value of these guidelines (I’m going to breeze through them) is that they map to resources I’ll be discussing a bit later. Image courtesy of sitepoint http://www.sitepoint.com/australian-government-wcag-2-accessibility/
- #21 Now that we’ve discussed what we need to do, we’re now going to discuss what tools can help you get this done
- #22 Assistive Technologies: NVDA – this is an open-source screen reader for Windows (used by customers who are blind or have low vision). It is very standards compliant, and if something works well in NVDA, we would typically consider it accessible for screen reader users. Download NVDA at http://www.nvda-project.org/wiki/Download . - light, doesn’t bog down system, British accent, developers don’t need JAWS Windows High Contrast mode – these modes can be activated in Windows 7 (they are available for other versions of Windows) by navigating to Control Panel > Ease of Access Center . Every page should be checked with this mode on to be sure that all content is available. Images that are links should appear, but any images that are purely decoration will not. Apple’s accessibility features for all their products are linked to from http://www.apple.com/accessibility/ Development & Testing Tools: WAVE Firefox Toolbar – this tool is used to check the code on webpages for compliance with WCAG 2.0 level AA and is created/maintained by WebAIM, a respected accessibility group. You can also use the evaluation tool by submitting a page to the WAVE servers, but the toolbar is necessary for pre-production code. Download WAVE at http://wave.webaim.org/toolbar . Color Contrast Analyzer – this tool is used to check foreground and background color combinations for contrast and is created/maintined by The Paciello Group, another respected accessibility consultancy. High contrast is necessary for customers with low vision and color-blindness. Download Contrast Analyser at http://www.paciellogroup.com/resources/contrast-analyser.html . MAGpie – this software is a caption and audio-description authoring tool to make videos accessible and is created/maintained by the National Center for Accessible Media. Other free and paid captioning tools are available, but this one seems the easiest to use. Download MAGpie at http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/download-magpie .
- #26 WCAG 2.0 Success Criteria – code samples, options & techniques, mapped to the guidelines WAI’s “How to Meet WCAG 2.0” – select the coding techniques you’re using, Level A & AA and get a customized list of techniques to use