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.

Tools And Techniques For Evaluating Accessibility

4,020 views

Published on

When your website is accessible, all users can access your content no matter their abilities. Visually-impaired users can visit your website using a screen reader. Those who can’t use the mouse can navigate your site using a keyboard or other input device. Some accessibility features might also improve your SEO. When your site is inaccessible, research shows you could be excluding up to 20 percent of your users. This talk for all skill levels will review tools and techniques you can use to test and improve your site’s accessibility.

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Tools And Techniques For Evaluating Accessibility

  1. 1. TOOLS AND TECHNIQUES FOR
 EVALUATING #A11Y A C C E S S I B I L I T Y @bamadesigner https://bamadesigner.com
 https://wa11y.org Rachel Carden Senior Software Engineer, Disney
 Founder, WPCampus
  2. 2. What is accessibility?#a11y
  3. 3. Web accessibility refers to 
 the inclusive practice of 
 removing barriers that prevent interaction with, or access to, websites by people with disabilities. #a11y
  4. 4. We need to make every single thing accessible to 
 every single person with a disability. - Stevie Wonder
  5. 5. Information wants to be free ACCESSIBLE Information needs to be #a11y
  6. 6. Data shows 1 in 5 people have a disability. You could be excluding 20% 
 of your potential users, 
 customers, students, 
 and more. #a11y
  7. 7. WEB ACCESSIBILITY STANDARDS 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.
  8. 8. All non-text content needs 
 a text equivalent to help convey information to those with sensory disabilities
  9. 9. Accessible text equivalents: • Image captions or alt attributes • Captioned video • Audio transcripts Examples of non-text content: • Images / Word Art • Charts / Graphs • Decorative images, such as backgrounds #a11y
  10. 10. Without alternative text, life-saving information in this graphic is not available to visually impaired users. #a11y
  11. 11. 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
  12. 12. 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:
  13. 13. The link would be 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.
  14. 14. 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:
  15. 15. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  16. 16. Pages should have
 <proper heading structure>
 in order to be readable without a stylesheet for those who do not navigate visually. #a11y
  17. 17. All site functionality
 should be available 
 using the keyboard 
 for persons who do 
 not use a mouse. #a11y
  18. 18. While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. #a11y
  19. 19. Another important consideration is download speeds and order to ensure those who don’t have access to high speed Internet can consume your information. #a11y
  20. 20. ARIA (Assistive Rich Internet Applications)
 Was created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. #a11y
  21. 21. GOOD MARKUP The foundation for good accessibility is #a11y
  22. 22. CHECKLISTS • WCAG 2.0 Checklist - from WebAIM • http://webaim.org/standards/wcag/checklist • Section 508 Checklist - from WebAIM • http://webaim.org/standards/508/checklist #a11y
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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:
  27. 27. 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
  28. 28. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/
  29. 29. BROWSER TOOLS#a11y
  30. 30. BROWSER TOOLS#a11y
  31. 31. Take advantage of in-browser testing tools to evaluate WordPress theme demos before you purchase. ACCESSIBILITY PRO TIP: #a11y
  32. 32. TOOLS • Which Tool Is Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools #a11y
  33. 33. • Color Contrast Checker • http://webaim.org/resources/contrastchecker • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria #a11y OTHER RESOURCES
  34. 34. • 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/ #a11y OTHER RESOURCES
  35. 35. #A11y, WordPress and Your Website https://www.wpwatercooler.com/video/a11y-wordpress- website-wrachel-carden-bamadesigner-wpblab/ Accessibility In WordPress https://www.thewpcrowd.com/podcast/episode-006- accessibility-in-wordpress/
  36. 36. wA11y "web a11y" or "web accessibility"
 wA11y.org is a new initiative to contribute to web accessibility by providing information, education, resources, and tools. Interested in joining or contributing?
 Sign up at https://wa11y.org
  37. 37. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org @wpcampusorg #WPCampus
  38. 38. QUESTIONS? Get involved at https://wa11y.org #A11Y / #wA11Y @bamadesigner https://bamadesigner.com
 https://wa11y.org Rachel Carden Senior Software Engineer, Disney
 Founder, WPCampus

×