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.

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. What is accessibility?#a11y

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/

30. BROWSER TOOLS#a11y

31. BROWSER TOOLS#a11y

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