Intro to Web Accessibility for WiLS World

Transcript

1. “We design to embrace the things that make us human. It’s what drives us to create a world that makes lives better. The result is technology that’s inclusive.”
 Microsoft
2. Intro to Web Accessibility WiLS World July 23, 2019
3. Today’s Talk Brief into to accessibility Types of impairments Accessibility guidelines Tools and resources
4. National Federation of the Blind versus Target Landmark accessibility case Challenged whether Americans with Disabilities Act applied to websites or just physical locations 2006
5. American Council of the Blind versus Staples Staples had six months to apply priority one and two checkpoints of WCAG 1.0 Modern equivalent would be WCAG 2.0 AA, which most companies strive for 2009
6. National Association for the Deaf versus Netflix Netflix violated Title III of ADA by not providing closed captioning Netflix agreed to make “good faith, diligent efforts" ensure compatibility on most devices but is not obligated to get it 100% device compatible Had to provide captions on all new content 2012
7. Ashley Cwikla versus Bank of America Bank of America Credit Card Rewards redemption was hard to complete for visually impaired individuals BoA had to meet WCAG Level AA standards and conduct internal training for customer service staff to assist with visually impaired clients 2015
8. Confidential Plaintiff versus Kmart, McDonalds, GrubHub Confidential plaintiff and terms The cases were filed early 2017 and settled within weeks 2017
9. In 2017, plaintiffs filed at least 814 federal lawsuits about allegedly inaccessible websites.
10. In 2018, that number rose to over 2,000.
11. In 2019, this number is expected to grow to more than 4,000.
12. 156 lawsuits in May 2019 ! Business Services Retail and Consumer Products Restaurants and Food Manufacturing Healthcare Hotels Government Banking and Financial Real Estate Automotive and Transportation " Other # $ % & ' ( ) *
13. ! Business Services Retail and Consumer Products Restaurants and Food Manufacturing Healthcare Hotels Government Banking and Financial Real Estate Automotive and Transportation " Other # $ % & ' ( ) * 35 34 26 23 12 7 7 3 3 3
14. Even if you are not in danger of being sued, you should strive to be accessibility compliant.
15. 92% People with disabilities who use the internet
16. 91% People with disabilities who use a mobile phone or tablet
17. 1 in 5 people have a legal officially recognized permanent disability.
18. Examples of Legal Disabilities Holding Phone and Tapping: Missing Limb Remembering: Alzheimers, Dementia Reading and Seeing: Blindness, Vision Loss Hearing: Deaf
20. Anyone can have a temporary impairment.
21. Examples of Temporary Impairments Holding Phone and Tapping: Broken or injured limb Remembering: Concussions and temporary memory loss Reading and Seeing: Eye surgeries, Cataracts, temporary vision loss Hearing: Ear infections, tinnitus (ear ringing)
23. Situations can impact every user’s experience.
24. Examples of Situational Impact Holding Phone and Tapping: Holding an object, like a bag or laptop Remembering: Distracted by other people, really focused on their goal Reading and Seeing: Sunny day, glare Hearing: Wearing headphones, loud environment
25. Example from Microsoft inclusive design
26. Microsoft We design to embrace the things that make us human. It’s what drives us to create a world that makes lives better. The result is technology that’s inclusive.”
27. Accessibility Guidelines
28. Who makes the rules? Web Accessibility Initiative (WAI) of World Wide Web Consortium (W3C) Guidelines for inclusive design Influence accessibility and disability law Both website and mobile apps Perceivable, Operable, Understandable, Robust (POUR)
29. “Information and user interface components must be presentable to users in ways they can perceive”
31. Perceivable Users can find all the info they need Text and images should be readable Media has a sound alternative Color isn’t used to solely convey info
32. Perceivable Make sure everything is readable Aim for higher color contrast Use readable fonts
35. “User interface components and navigation must be operable.”
36. Operable Users need to be able to get to (and from) all non-decorative elements on the screen Information should be organized in a way that’s easy to understand Additional plugins can interfere with assistive devices
37. Operable Design for a variety of contexts Watch out for keyboard traps Build a hierarchy
41. “Information and the operation of user interface must be understandable.”
42. Understandable Users should be able to understand how your app works Can understand what the info means Messaging is consistent without using overwhelming jargon
43. Understandable Don’t use overly complex language Label everything Provide forgiveness
47. Forgiveness Help in entering inputs Guided tips to the user 404s and 501s should provide direction
49. Layout Rely on layout conventions (top nav, menu placements, etc) Android and iOS have accessibility in mind by default Consistency between screen sizes and mediums is not a requirement Important elements positioned prior to the screen break
53. “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”
54. Robust Users can access your app through a variety of ways Taps and touches Voice assistants (Siri, Alexa, Cortana) Screen readers Resizing
55. Robust Make sure screen readers can use your design Look out for slowness or performance issues Responsive User shouldn’t be able to easily break your website/app/product
56. Screen readers Android: TalkBack, iOS: VoiceOver Avoid unnecessary sounds Multiple ways to navigate screens with a screen reader May use screen reader by itself or with other assistive technology
57. + Perceivable , Operable - Understandable . Robust POUR to remember accessibility
58. What are the WCAG levels? A: Lowest level. These are easier to implement, have a high impact on the overall population AA: High impact, but a lower portion of the population AAA: Focused improvements for specific users
59. Level A Examples (not a complete list) • Include text alternatives for media • Provide captions for videos with audio • Avoid jargon • Don’t rely solely on color to give information (think error messages) • Label form fields • Use a meaningful header structure • No major code errors
60. Level AA Examples (not a complete list) • Everything in A • Color contrast of 4.5:1 • Text can be zoomed to 200% and still be able to use website • Suggest alternatives when users run into errors • Keyboard focus is clear • I can tab forward and back through website
61. Level AAA Examples (not a complete list) • Everything in A, AA • Videos have a sign language alternative • Contrast ratio is 7:1 • No images of text • All Abbreviations and unusual words are explained • No timeouts • Provide detailed help and instructions
62. Which level is right for me? Get everything done you can reasonably accomplish in your budget and timeframe You should be able to meet all Level A criteria at a minimum Parts of Level AA can be accomplished fairly easily as your team learns and grows Look for Level AA compliance over time and aspects of Level AAA that are easier for your team to implement
63. Which level is right for me? American Library Association has recommended WCAG 2.0 since 2009 Does not specify which level http://libguides.ala.org/libservice-disability/web-accessibility
64. How can I get started? / Critical Path 0 Full Audit 1 Triage 2 Educate and Train 3 Build into Dev Cycle
65. Accessibility Demos
66. Books A Web For Everyone - Designing Accessible User Experiences
 Sarah Horton & Whitney Quesenbery, Rosenfeld Media, 2013
 https://rosenfeldmedia.com/books/a-web-for-everyone/ Accessibility For Everyone
 Laura Kalbag
 https://abookapart.com/products/accessibility-for-everyone
 
 Accessibility Handbook - Making 508 Compliant Websites
 Katie Cunningham
 http://shop.oreilly.com/product/0636920024514.do
67. Tools Screen Reader WAVE Sim Daltonism Colour Contrast Analyzer
68. https://www.nvaccess.org https://www.nvaccess.org Built into MacOS
69. https://www.youtube.com/watch?v=q_ATY9gimOM
70. https://wave.webaim.org/
74. https://colororacle.org/ https://michelf.ca/projects/sim-daltonism/
75. No color blindness Perfect vision
76. Yellow-Blue Colorblind Tritanopia
77. Red-Green Colorblind Deuteranopia
78. Other Resources The Why and How of Screenreader Testing
 https://medium.com/that-conference/the-why-and-how-of-screen-reader- testing-8a92add2a609
79. Questions? Ashley Dzick Professor @ MSOE Accessibility Consultant
 adzick@gmail.com Slides: https://speakerdeck.com/ashleydzick