Accessibility Testing - Introduction
Accessibility Testing - Introduction
y Testing
Agenda
• Accessibility Testing - Definition
• What is WCAG?
04/20/2025 2
What is Accessibility Testing?
• Definition: A type of testing that ensures digital platforms are usable
by people with disabilities (visual impairments, hearing impairments, motor
disabilities, cognitive disabilities etc.).
• Goal: Identify accessibility barriers and ensure that websites, applications,
and digital content meet accessibility standards.
Importance of Accessibility Testing
• Inclusive: We make sure everyone, no matter their ability, can use our
product.
• Legal Compliance: Avoid lawsuits by complying with global accessibility
laws (e.g., Americans with Disabilities Act).
• Business Growth: Enhances customer base, improves brand reputation, and
creates a better user experience for everyone.
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. It’s a set of rules created
to make web content more accessible to everyone, especially people with disabilities.
These guidelines are made by a group called the W3C (World Wide Web Consortium),
which helps set standards for the web.
WCAG quick reference guide – WCAG 2.2
04/20/2025 5
04/20/2025 6
04/20/2025 7
Based on
Conformance Level
• A: 34 Success Criteria
• AA: 23 Success
Criteria
• AAA: 29 Success
Criteria
• Level A: The minimum level of conformance, Level A contains basic success criteria for
removing serious accessibility barriers that affect a wide range of users.
• Level AA: Level AA removes additional barriers and establishes a level of accessibility that
works for most devices and assistive technologies, such as screen readers.
• Level AAA: The most strict level of conformance, Level AAA contains additional success
criteria to establish the highest possible level of website accessibility.
04/20/2025 8
How to perform basic Accessibility
• Audit?
Keyboard Accessibility
o Use only keyboard to access content –
• Resize and Reflow
o Set to Display resolution to 1280 * 1024
use appropriate key to interact with o Set the Zoom level 200% for Resize text standard –>
controls. Refresh the page -> validate that there must not be any
loss of content of functionality.
• Run Automated tools like
o Set the Zoom level 400% for Reflow standard –> Refresh
o aXe DevTools, Accessibility Insights for
the page -> validate that there must not be any loss of
Web
content of functionality & there should not be any
• Check Color Contrast – horizontal scroll bar present at this zoom level.
o Can use CCA tool
• Screen Reader Testing
o For regular text – 4.5:1
o Jaws (Edge)
o For large scale text or icons/logos - 3:1
o NVDA (Firefox)
Aquatic/Desert
o Check if the content is adapting the
Common Accessibility Barriers
• Lack of alt text for images: Visually impaired users can’t interpret what the image is about.
• Poor color contrast. Insufficient contrast between text and background colors can make
content difficult to read for users with visual impairments, including color blindness.
• Non-keyboard-friendly: Many users with motor disabilities rely on keyboard navigation instead
of a mouse.
• Lack of captioning or transcripts for audio and video content: Users who are deaf or hard
of hearing rely on captions or transcripts for audio and video content.
• Unlabeled form controls: Screen readers can’t interpret forms without proper labeling.
• Non-descriptive link text: Using vague phrases like “click here” for link text does not provide
enough information about the link’s destination.
Helpful Links
• WCAG Quick reference guide -
https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2&showtechniques=134%2C1410¤tsidebar=%23col_overvie
w#non-text-content
• Refer this if you want to know about how a component should be designed - https://www.w3.org/WAI/ARIA/apg/patterns/
• Tools -
Accessibility Insights for Web -
https://chromewebstore.google.com/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni?hl=en
Text Spacing - https://chromewebstore.google.com/detail/text-spacing-editor/amnelgbfbdlfjeaobejkfmjjnmeddaoj?hl=en
aXe DevTools -
https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en
Color Contrast Analyzer - https://www.tpgi.com/color-contrast-checker/
• Screen Reader -
Narrator -> in-built in Windows.
NVDA -> Free to use - Requires installation - https://www.nvaccess.org/download/
04/20/2025 11
Thank You
04/20/2025 12