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.
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
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
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
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
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