The document discusses using AXE for web accessibility testing. It begins with an introduction to web accessibility and common issues like lack of text alternatives and low color contrast. It then summarizes the WCAG guidelines and principles of perceivable, operable, understandable and robust. Various accessibility testing options are listed including AXE, which is an open source tool that can be used as a browser plugin or API for automated testing. It provides details on using the AXE JavaScript API to integrate accessibility tests into existing automation frameworks.

2. ACCESSIBILITY
TESTING USING AXE
APARNA GOPALAKRISHNAN
TEST AUTOMATION CONSULTANT

3. ABOUT ME
• Test Automation Consultant, Trainer
• Twitter – @aparna2019
• Linked in - https://www.linkedin.com/in/aparna-a-
gopalakrishnan-8088765a/
• Email - aparna.vadakath@gmail.com

4. AGENDA
• Introduction to Web Accessibility- What and Why?
• Common Accessibility Issues
• The Guidelines (WCAG Overview)
• Web Accessibility Testing Options/Tools
• Onto Axe

5. What is web accessibility?

6. Difficulty hearing, deafness and hearing impairments.
Visual Blindness, colour blindness, and low-vision
caused by various eye conditions.
Various forms of limited movement caused by injury,
congenital conditions, and tremors.
Conditions that affect the brain - memory, attention, or
ability to interpret

8. It’s all about inclusiveness!

9. Report says 1 in 5 people have disability.
There are 11.9 million disabled people in the UK
which is nearly 19% of the population.

10. Why does Accessibility
Matter?

11. • Social Responsibility
• Better Business
• Accessible websites are easier to find by search
engines
• “Accessibility Optimized” websites are easier to
navigate and simple to use
• Accessibility helps everyone

12. COMMON ACCESSIBILITY
ISSUES

13. Keyboard accessibility /(Screen Reader)
Image 1
It’s a
kitten
It’s a
puppy
Image 2 Image 1
It’s a
kitten
It’s a
puppy
Image 2
1 2
3 4
1 3
2 4

14. Failure to include text alternatives for images.
ALT TEXT
Please don’t forget me

15. c A p t c HA

16. Too Low Contrast
Can you read this?
How about this?

17. User name
Password
Email
Colour Driven Instructions

18. To Learn more CLICK
HERE
Check out this
page for
accessibility info
Use of CLICK HERE

19. HOW CAN WE
ENSURE OUR
WEBSITE
IS INCLUSIVE?

20. WCAG 2 OVERVIEW
(Web Content Accessibility Guidelines)
“The WCAG documents explain how to
make web content more accessible to
people with disabilities.”

21. THE STANDARDS
• WCAG 2.0 - published on 11 December 2008
• WCAG 2.1 - published on 5 June 2018
“Content that conforms to WCAG 2.1 also conforms to WCAG
2.0. (This is often called “backwards compatible”.) A website
that meets WCAG 2.1 should meet the requirements of policies
that reference WCAG 2.0.”

22. THE GUIDELINE
PRINCIPLES
• Perceivable - Alt Text and Captions
• Operable- Keyboard navigation
• Understandable- Link text, error suggestion, etc.
• Robust- Semantics, assistive technologies (screen readers)

23. Success Criteria
Level A
Level AA
Level AAA

24. Web Accessibility Testing
There is no substitute for real user feedback.
You need to include people with disabilities to test.
FACT

25. Accessibility Testing Options,
Tools, etc.
• Tab through the page using keyboard
• Screen readers (JAWS, NVDA, Talk Back, Speak
Screen, etc.)
• Zoom Text
• Browser plug-in(Axe, WAVE)
• APIs for automation (axe, pally, totalValidator,
etc.)

26. On to AXE!!!!
An Open source product from the Deque for accessibility testing

27. Axe
• Browser plug-in (chrome and Firefox)
• APIs for web accessibility automation
• Native apps and hybrid apps for android(Android
App and Axe Android API)
**iOS will be coming soon!

28. Axe As Browser Plug-in
Download and add browser extension to the browser and Analyze

29. Axe As Browser Plug-in
Axe plugin added
Inspect on the page

30. Axe As Browser Plug-in

31. Axe API For Web
Accessibility Automation
➢Open source accessibility rules for automated testing
➢Can be integrated on to existing automation framework

32. Web Accessibility Automation
Testing Using Axe
Install axe javascript api
npm install axe-webdriverJS –save-dev

33. Axe-webdriverJS Demo

34. Axe Tags

35. Axe Rules
axe.getRules([‘wcag21a’]);
axe.getRules(<tags>);

36. Page scanning options
// To run only specific set of rules
AxeBuilder(driver).withTags([‘wcag2a’]);
//To limit analysis to only specified rules
AxeBuilder(driver).withRules(['html-lang', ‘image-alt’]);
//To disable some rules
AxeBuilder(driver).disableRules(‘color-contrast’);

37. Pros
• No false-positive scenarios
• Better rule coverage
• Seamless integration feasibility with test automation
framework
• Easy integration with CI
• Easy to use
• Open Source

38. Automation and Manual web accessibility testing
MUST go hand in hand!

39. IS FOR EVERY ONE, LET’S DO OUR BEST TO ENSURE AS IT S

40. References
• https://www.gov.uk/service-manual/helping-people-to-use-
your-service/testing-for-accessibility
• https://www.smashingmagazine.com/2018/09/importance-
manual-accessibility-testing/
• https://www.w3.org/WAI/fundamentals/accessibility-intro/
• https://www.deque.com/axe/