Download as PDF, PPTX
Uploaded byRachel Cherry
Tools And Techniques For Evaluating Accessibility
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.
More Related Content
Similar to Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
- 1. TOOLS AND TECHNIQUESFOR 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.
- 3. Web accessibility refersto the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. #a11y
- 4. We need tomake every single thing accessible to every single person with a disability. - Stevie Wonder
- 5. Information wants tobe free ACCESSIBLE Information needs to be #a11y
- 6. Data shows 1in 5 people have a disability. You could be excluding 20% of your potential users, customers, students, and more. #a11y
- 7. WEB ACCESSIBILITY STANDARDS WCAG2.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 contentneeds 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 shouldhave 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 meansthat 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 wouldbe 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 meansthat 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 linkwould become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
- 16. Pages should have <properheading structure> in order to be readable without a stylesheet for those who do not navigate visually. #a11y
- 17. All site functionality shouldbe available using the keyboard for persons who do not use a mouse. #a11y
- 18. While not anofficial standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. #a11y
- 19. Another important consideration isdownload speeds and order to ensure those who don’t have access to high speed Internet can consume your information. #a11y
- 20. ARIA (Assistive Rich InternetApplications) Was created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. #a11y
- 21. GOOD MARKUP The foundationfor good accessibility is #a11y
- 22. CHECKLISTS • WCAG 2.0Checklist - from WebAIM • http://webaim.org/standards/wcag/checklist • Section 508 Checklist - from WebAIM • http://webaim.org/standards/508/checklist #a11y
- 23. an accessibility evaluationtool 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 visualizationtoolkit 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 thatchecks 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 accessibilitytesting library http://pa11y.org • Section508 • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:
- 27. Javascript library thatexecutes 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 - TheWeb Accessibility Toolbox https://wordpress.org/plugins/wa11y/
- 30.
- 31.
- 32. Take advantage ofin-browser testing tools to evaluate WordPress theme demos before you purchase. ACCESSIBILITY PRO TIP: #a11y
- 33. TOOLS • Which ToolIs Best? • http://webaim.org/articles/tools • Web Accessibility Evaluation Tools • https://www.w3.org/WAI/ER/tools #a11y
- 34. • Color ContrastChecker • http://webaim.org/resources/contrastchecker • Getting Started With ARIA • http://a11yproject.com/posts/getting-started-aria #a11y OTHER RESOURCES
- 35. • Practical ARIAExamples • 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 andYour 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 andconference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org @wpcampusorg #WPCampus
- 39. QUESTIONS? Get involved athttps://wa11y.org #A11Y / #wA11Y @bamadesigner https://bamadesigner.com https://wa11y.org Rachel Carden Senior Software Engineer, Disney Founder, WPCampus