Tools And Techniques For Evaluating Accessibility
2 likes5,064 views
This document provides an overview of tools and techniques for evaluating web accessibility (a11y). It discusses what accessibility is and why it's important. Several standards for accessibility are described, including WCAG 2.0 and Section 508. Common accessibility issues like alternative text, color contrast, proper heading structure, keyboard navigation, and responsive design are covered. The document then lists and describes various automated testing tools that can be used to evaluate accessibility. It provides additional resources for learning about accessibility and tools to use for testing in browsers.
Tools And Techniques For Evaluating Accessibility
- 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
- 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. We need to make every single thing accessible to every single person with a disability. - Stevie Wonder
- 5. Information wants to be free ACCESSIBLE Information needs to be #a11y
- 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. 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. All non-text content needs a text equivalent to help convey information to those with sensory disabilities
- 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. Without alternative text, life-saving information in this graphic is not available to visually impaired users. #a11y
- 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. 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. 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. 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. 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. Pages should have <proper heading structure> in order to be readable without a stylesheet for those who do not navigate visually. #a11y
- 17. All site functionality should be available using the keyboard for persons who do not use a mouse. #a11y
- 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. 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. ARIA (Assistive Rich Internet Applications) Was created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. #a11y
- 21. GOOD MARKUP The foundation for good accessibility is #a11y
- 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. 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. 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. 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. 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. 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. wA11y - The Web Accessibility Toolbox https://wordpress.org/plugins/wa11y/
- 32. Take advantage of in-browser testing tools to evaluate WordPress theme demos before you purchase. ACCESSIBILITY PRO TIP: #a11y
- 33. TOOLS • Which Tool Is Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools #a11y
- 34. • Color Contrast Checker • http://webaim.org/resources/contrastchecker • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria #a11y OTHER RESOURCES
- 35. • 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
- 36. #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/
- 37. 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
- 38. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org @wpcampusorg #WPCampus
- 39. QUESTIONS? Get involved at https://wa11y.org #A11Y / #wA11Y @bamadesigner https://bamadesigner.com https://wa11y.org Rachel Carden Senior Software Engineer, Disney Founder, WPCampus