The Role of ADA Compliance and the Future of the Web
•Download as PPTX, PDF•
0 likes•276 views
ADA compliance is the catalyst for inclusive design. When responding to meeting new standards, think more about inclusion rather than checking off a box. Having a compliant and usable website can have a positive impact on website design and ROI. What does this mean, exactly? Do you have to run out and quickly redesign your website? Not exactly. But, not addressing these issues could be costly for your organization.
Recommended
Recommended
More Related Content
Similar to The Role of ADA Compliance and the Future of the Web
Similar to The Role of ADA Compliance and the Future of the Web (20)
More from Hileman Group
More from Hileman Group (20)
Recently uploaded
Recently uploaded (20)
The Role of ADA Compliance and the Future of the Web
- 1. 1 April 20, 2018 © Hileman Group. All rights reserved The Role of ADA Compliance and the Future of the Web
- 2. 2 • Our goal is to have this be an interactive session, so please submit your questions throughout the presentation and we will be sure to answer as many as we can in the last 15 minutes. • No worries about scrambling to take notes. As a follow-up, we will send an email of the video recording and the entire deck for your records. • If you would like to live tweet throughout the webinar, feel free to use – #hilelights • We’d love to hear from you! If we don’t cover something, or if your question isn’t answered – send us an email and we will get you a response as soon as possible – Contact@HilemanGroup.com Housekeeping Notes HILE - LIG HT S PRESENT S
- 3. 3 MeetYour Hosts for the Afternoon HILE - LIG HT S PRESENT S Tom Hileman President @HilemanGroup Kate Penrod Visual Designer @K8Penro
- 4. 4 Agenda HILEMAN G ROUP ► Best Practices► What Is ADAWeb Compliance? ► Inclusive Design ► Legal Ramifications ► Accessibility vs. Usability ► Questions ► KeyTakeaway ► Recommended Process: POUR
- 5. 5 Usability Usability is all about designing to achieve specific objectives, be efficient and, ultimately, provide a satisfying experience Accessibility Accessibility focuses on creating a site that is usable to those with disabilities VS
- 6. “Would you build a bridge that only a specific type of car can use?” –Andrea Fercia
- 7. 7 DisabilityTypes HILEMAN G ROUP Physical & Motor Skills Hearing Cognitive & Learning Vision
- 8. 8 What Is ADAWeb Compliance? HILEMAN G ROUP • Americans with Disabilities Act was passed in 1990 • In 1998, Section 508 was added to the Rehabilitation Act of 1973 • Required all electronic information used by the government to be accessible to people with disabilities (known asTitle II) • In 1999, the firstWeb Content Accessibility Guidelines (WCAG) went into effect • Published by theWorldWideWeb Consortium (W3C) • Introduced the 3 levels of priority: A, AA, AAA • Broken into 14 principles • WCAG 1.0 was very HTML specific When did the web get involved in all this? Sources: https://www.section508.gov/content/learn/laws-and-policies https://webaim.org/standards/wcag/#wcag2
- 9. 9 Legal Ramifications HILEMAN G ROUP Sources: https://www.adatitleiii.com/2018/01/2017-website-accessibility-lawsuit-recap-a-tough-year-for-businesses/ • Currently no laws surroundingTitle III based websites, onlyTitle II • Title III is defined as commercial and public facilities such as stores, restaurants, public businesses, etc. • Title II is in reference to state and local governments • Section 508 update: By January 18, 2018,Title II websites had to be updated toWCAG 2.0 AA standards • Have to keep in mind the different international laws surrounding accessibility • Ex: AODA (Ontario, Canada) • In 2017, a minimum of 814 federal lawsuits were filed for inaccessible websites • This does not include lawsuits filed at the state level
- 10. 2008 – National Federation of the Blind v. Target Corp. • Lack of alt text • Online purchases could not be completed without a mouse • Locations map was inaccessible • Headings needed for navigation were missing Sources: https://www.adatitleiii.com/2018/01/2017-website-accessibility-lawsuit-recap-a-tough-year-for-businesses/
- 11. March 2017 – Robles v. Dominos Pizza, LLC • Plaintiff was not able to order online due to inaccessibility for screen readers • Dominos argued that they provide phone based accommodations • Judge dismissed case due to lack of law surroundingTitle III websites and provided evidence Sources: https://www.adatitleiii.com/2018/01/2017-website-accessibility-lawsuit-recap-a-tough-year-for-businesses/ http://www.pepperlaw.com/publications/doj-puts-ada-website-project-on-hold-2017-08-02/
- 12. June 2017 – Gil v. Winn Dixie Stores, Inc. • Screen readers were unable to assist in ordering prescriptions and printing coupons • Court sided with the plaintiff, Winn Dixie was forced to update site to AAWCAG 2.0 standards • Also heldWinn Dixie responsible for 3rd party pluginsSources: https://www.adatitleiii.com/2018/01/2017-website-accessibility-lawsuit-recap-a-tough-year-for-businesses/ http://www.pepperlaw.com/publications/doj-puts-ada-website-project-on-hold-2017-08-02/
- 13. 13 WCAG 2.0 HILEMAN G ROUP • Current standard in web guidelines • Published in 2008 • 2.1 slated to come mid-2018 • Major changes from theWCAG 1.0 saw the guidelines being more principle-centered rather than solely focusing on technique • Kept A, AA, AAA rating system • Broken into 4 main principles: POUR
- 15. 15Perceivabl e HILEMAN G ROUP All content should be able to be perceived by 3 relevant senses: sight, hearing and touch • Sight • Most important way of communicating information via the web • The visually impaired need to be able to use assistive technologies • Audio formats are the most popular ways to perceive visual communications • Hearing • Audio interactions are increasing as technologies mature and become more available • Includes written transcripts and subtitles when using sound or music on websites • Touch • Those who are both deaf and blind rely on touch to communicate • Refreshable braille devices can convert text from web pages to braille output
- 16. 16Perceivabl e HILEMAN G ROUP All content should be able to be perceived by 3 relevant senses: sight, hearing and touch • Content needs to be able to be transformed from one form to another • Must be able to be perceived in different ways • Ex: Using alt text on images for screen readers • Ex:Video transcriptions and closed captioning • Content needs to be able to be distinguishable from design elements • Color cannot be the only element to denote a link • Color contrast • Small text and 4.5:1, large text 3.5:1 • Logos and text used purely for decoration are exempt from contrast rules
- 17. 17 Perceivable – Example: AlternativeText for Images HILEMAN G ROUP All images that convey information should provide a text alternative GOOD alt=“An Xbox One S console, controller, and games" www.microsoft.com BAD alt=“Category RecommendationsGarden Center" www.homedepot.com
- 18. 18 Perceivable – Example: Color Contrast HILEMAN G ROUP zoo.sandiegozoo.org Needs to be: 3.5:1 Needs to be: 4.5:1
- 20. 20 Operable HILEMAN G ROUP Websites should be able to adapt to all methods of operation • Methods of input devices: • Mouse, keyboard, trackpad, touchscreen, voice input, switch control, eye tracker • Keyboard accessibility is seen as one of the most important principles of web accessibility • Examples of requirements for a site to be Operable: • Find, navigate through and interact with web content • Bypass extraneous or irrelevant content • Ex: “Skip Navigation” links • Have unlimited time to complete tasks • Have the ability to control media players, animations and any other type of time-dependent content • Error recovery
- 21. 21 Operable – Example: Keyboard-only Navigation HILEMAN G ROUP It should be possible to open all links and operate all forms using only the keyboard — no mouse! BAD – ClusterTruck’s ordering platformGOOD – Samsung
- 23. 23 Understandable HILEMAN G ROUP The website should be easy to understand, and not cause confusion or ambiguity • Wording should be simple and concise • Consider alternative representation for better understanding • Navigation should be consistent across the entire website and easy to understand and follow • All forms and UI controls need to be properly labeled • Provide instructions and guidance when necessary • Use meaningful text in all buttons and links • Apply proper heading level specifications
- 24. 24 HILEMAN G ROUP Understandable – Example: Heading Structure The headings on a webpage should be organized such that a user can get a general sense of what information is on the page, just by looking at the headings. GOOD –Wikipedia BAD – Giant Eagle
- 26. 26 Robust HILEMAN G ROUP The website should be able to be used across a variety of technologies and operating systems • RESPONSIVE WEBSITES ARE A MUST! • Adaptive sites are not acceptable due to the lack of effort put into tablet views • Content should be developed to work across many different versions of browsers • Users should be able to choose their own technologies to access web content • Allows customization to those with accessibility needs • Don’t rush development, clean HTML will work better than sloppy hacked together HTML • Don’t focus so much on limitations of old technologies; instead, focus on current and future possibilities
- 27. 27 Robust – Example HILEMAN G ROUP Focus on building for new technology, not old GOOD – Building for responsive BAD – Focusing on antiquated tech
- 30. 30 What Is Inclusive Design? HILEMAN G ROUP • Inclusion design is the practice of designing (and programming) products, such as websites, to be useable by everyone to the greatest extent possible • Situation examples: Quality of hardware, internet connectivity, computer literacy, education, language, age and disability (both permanent and situational) • Why is this an important idea? • Expands the use cases to include more than life-long disabilities • Enhances the usability of ADA compliance standards on the web • Leads to a more usable and innovative site • Not something you can rush • Research is a large part of a successful inclusively designed website • Expand personas to include situations and disabilities
- 31. 31 What Is Inclusive Design? HILEMAN G ROUP Scenario:Cell phone sizes are getting larger
- 32. 32 What Is Inclusive Design? HILEMAN G ROUP Scenario: Panicked mother looking for an emergency room
- 33. 33 Best Practices HILEMAN G ROUP • Make sure your whole team is aligned on the overall accessibility goals before starting your project • Consider creating personas geared towards those with disabilities, or to someone who would use your website in non-ideal situations • Think beyond life-long disabilities, and think about everyday situations and injuries that can impede a user’s ability to use the site • For optimal contrast, be open to a web-safe color palette for your website • All content that is not text-based should be provided alongside a text equivalent: • Make sure all images have descriptive alt text • Text transcriptions should be provided for videos and audio media • Content should be easy to understand and follow; for example, buttons and links should contain meaningful text: “Learn More” is not acceptable • A well-organized site is key • Label everything!
- 34. 34 KeyTakeaway HILEMAN G ROUP “Most of the time, these adaptations benefit nearly everyone, not just people with disabilities. Almost everyone benefits from helpful illustrations, properly-organized content, and clear navigation.”– WebAIM.org
- 35. Questions?