Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding and Supporting Web Accessibility

2,018 views

Published on

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is accessible, all users can access your content and functionality no matter their abilities. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Most accessibility features will also improve your SEO.

When your site is inaccessible, research shows you could be excluding up to 20 percent of your users.

This talk will cover the basics of accessibility, why it’s important, and how you can support accessibility in your projects.

Published in: Technology
  • Be the first to comment

Understanding and Supporting Web Accessibility

  1. 1. #a11y UNDERSTANDING AND SUPPORTING
 WEB ACCESSIBILITY @bamadesigner https://bamadesigner.com
 https://wpcampus.org Rachel Cherry Senior Software Engineer, Disney
 Director, WPCampus
  2. 2. #a11y Web accessibility refers to 
 the inclusive practice of 
 removing barriers that prevent interaction with, or access to, websites by people with disabilities.
  3. 3. We need to make every single thing accessible to 
 every single person with a disability. - Stevie Wonder
  4. 4. #a11y Information wants to be free ACCESSIBLE Information needs to be #a11y
  5. 5. #a11y Data shows 1 in 5 people 
 have a disability. 
 You could be excluding 20% of your potential users, 
 customers, students, and more.
  6. 6. #a11y If you’re federally funded:
 Section 508 (with new rules enforced Jan 2018) If you’re a business: They’re on the way (2018)
 There are legal requirements:
  7. 7. Introduction to US Laws
 http://webaim.org/articles/laws/usa/ 
 *Be sure to follow along with the
 Department of Justice ruling on Website Accessibility 
 Requirements for the Americans with Disability Act (ADA).
 Current status: delayed until 2018 (not too far away)
  8. 8. WCAG 2.0 Web Content
 Accessibility
 Guidelines Section 508 WCAG are part of a series of guidelines published by 
 the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. Current version was published in December 2008. Section 508 Standards apply to electronic and 
 information technology developed, procured, maintained, or used by federal agencies, including computer hardware and software, websites, phone systems, and copiers. Standards were issued in 2000. WEB ACCESSIBILITY STANDARDS
  9. 9. CHANGES COMING FOR SECTION 508 Section 508 is getting an update that will 
 change the web accessibility requirements 
 to match WCAG 2.0 AA.
 The Final Rule is effective March 17, 2017, 
 and organizations (that receive federal funding) will have to comply by January 18, 2018.
  10. 10. WCAG 2.0 Checklist http://webaim.org/standards/wcag/checklist 
 Section 508 Checklist http://webaim.org/standards/508/checklist
  11. 11. All non-text content needs 
 a text equivalent to help convey information to those with sensory disabilities
  12. 12. #a11y Accessible text equivalents: • Image captions or alt attributes • Captioned video • Audio transcripts Examples of non-text content: • Images / Word Art • Charts / Graphs / Infographics • Decorative images, such as backgrounds
  13. 13. Without alternative text, life-saving information in this 
 graphic is not available to visually impaired users.
  14. 14. .screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px); clip-path: polygon(0 0, 0 0, 0 0, 0 0); position: absolute !important; white-space: nowrap; height: 1px; width: 1px; overflow: hidden; } How to hide content visually:
  15. 15. #a11y Color usage should have sufficient contrast and should not be used as the sole method for conveying information or direction. Minimum: 4.5:1 GREAT CONTRAST
 8.47:1 REALLY BAD CONTRAST 2.63:1 YOU GOTTA BE KIDDING ME 1.63:1 POOR CONTRAST 3.5:1
  16. 16. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If color is the only method for conveying a link:
  17. 17. The link is invisible to those who can’t see blue: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  18. 18. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If a different color AND an underline is used:
  19. 19. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  20. 20. #a11y The purpose of all links /actions
 should be determined from 
 the text alone and its context. 
 In other words: 
 Never use “click here”.
  21. 21. #a11y Pages should have
 <proper heading structure>
 in order to be readable without 
 a stylesheet for those who do not navigate visually.
  22. 22. #a11y All site functionality should 
 be available using the keyboard for persons who do not 
 use a mouse.
  23. 23. How to provide “Skip to Content”: <a id=“skip” href="#content">Skip to Main Content</a> #skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } #skip:focus { position: static; width: auto; height: auto; }
  24. 24. #a11y While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes.
  25. 25. #a11y Another important consideration 
 is download speeds/order 
 to ensure those who don’t have access to high speed Internet can consume your information.
  26. 26. #a11y ARIA (Assistive Rich Internet Applications)
 Was created to improve accessibility 
 of applications by providing extra information to screen readers via HTML attributes.
  27. 27. <nav role=“navigation”> <ul> <li> <a href=“/">Home</a> </li> <li> <a href="/contact">Contact Us</a> </li> </ul> </nav> ARIA example:
  28. 28. GOOD MARKUP The foundation for good accessibility is #a11y Which improves your SEO!
  29. 29. an accessibility evaluation tool from WebAIM http://wave.webaim.org • Free in-browser testing • Free Chrome extension • Premium API TESTS FOR: Section 508 and WCAG 2.0 A/AA
  30. 30. an accessibility visualization toolkit http://khan.github.io/tota11y • Alt text and confusing link text • Color contrast • Heading structure • Form labels • ARIA landmarks TESTS FOR: • Javascript file that places button on site • Free Chrome extension
  31. 31. client-side script that checks HTML source code and detects violations of a defined coding standard http://squizlabs.github.io/HTML_CodeSniffer • Copy/paste code for quick testing • Free bookmarklet for in-browser testing TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA
  32. 32. an automated accessibility testing library http://pa11y.org • Section508 • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:
  33. 33. Javascript library that executes automated accessibility testing inside your testing framework or browser of choice http://www.deque.com/products/axe • Free Javascript library • Free Chrome extension
  34. 34. Material Design:
 Color Tool https://material.io/color/ Allows you to measure 
 the accessibility level of 
 any color combination.
  35. 35. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/ WORDPRESS PLUGINS
  36. 36. WORDPRESS PLUGINS
  37. 37. BROWSER TOOLS
  38. 38. BROWSER TOOLS
  39. 39. BROWSER TOOLS
  40. 40. Take advantage of in-browser testing tools to evaluate WordPress theme demos 
 and other products before 
 you purchase. ACCESSIBILITY PRO TIP: #a11y
  41. 41. • Which Tool Is Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools • Color Contrast Checker • http://webaim.org/resources/contrastchecker RESOURCES
  42. 42. • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria • Practical ARIA Examples • http://heydonworks.com/practical_aria_examples • Videos of screen readers using ARIA • http://zomigi.com/blog/videos-of-screen-readers- using-aria-updated/ RESOURCES
  43. 43. • Accessibility - WordPress Theme Handbook • https://developer.wordpress.org/themes/functionality/ accessibility/ • The A11Y Project • http://a11yproject.com/ • The API You Probably Didn't Know Existed
 Amanda Rush, LoopConf • https://www.youtube.com/watch?v=IYg66C9PQy8 RESOURCES
  44. 44. The A11Y Project has
 an AMAZING list of resources: 
 http://a11yproject.com/resources.html RESOURCES
  45. 45. So what are my first steps to get started supporting accessibility? #a11y
  46. 46. #1:
 Learn accessibility deeply #a11y
  47. 47. #2:
 Implement testing tools into your workflow #a11y
  48. 48. #3:
 User testing is
 the best testing #a11y
  49. 49. #4:
 Tell your friends #a11y
  50. 50. #5:
 Repeat #a11y
  51. 51. WCAG 2.0 Checklist http://webaim.org/standards/wcag/checklist 
 Section 508 Checklist http://webaim.org/standards/508/checklist
  52. 52. COMMERCIAL SERVICES • Deque • https://www.deque.com/ • Tenon • http://www.tenon.io • Siteimprove • https://siteimprove.com • SSB Bart • http://www.ssbbartgroup.com/
  53. 53. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org
 @wpcampusorg / #WPCampus TICKETS STILL AVAILABLE!
  54. 54. QUESTIONS? #a11y @bamadesigner https://bamadesigner.com
 https://wpcampus.org Rachel Cherry Senior Software Engineer, Disney
 Director, WPCampus

×