Automated Accessibility Testing with Cypress and Axe

Marie Drake, Principal Test Automation Engineer @ News UK

 

 

I'm not an Accessibility Testing expert...

I'm still learning about Accessibility

What is Accessibility?

"1 in 5 people in the UK have a long term illness, impairment or disability" 

Digital World 💻 📱

Web Accessibility

Dominos Accessibility Case

WCAG (Web Content Accessibility Guidelines)

WCAG 2.0

  • ​Perceivable

  • Operable

  • Undertandable

  • Robust

WCAG (Web Content Accessibility Guidelines)

WCAG 2.1

  • ​Mobile Accessibility
  • Low vision
  • Cognitive and learning abilities

WCAG Conformance Level

AAA

AA

The Testing Wheel

Manual

👍🏼 Nothing beats actual user testing

👍🏼 Finds issues missed by tools

👍🏼 More reliable

Automated

👍🏼 Fast

👍🏼 Cheap

👍🏼 Easy

👍🏼 Integrated in CI/CD pipelines

 

Accessibility Testing

Overview of Accessibility Testing Tools

Ok.. but how does Cypress fits here?

Helps catch accessibility issues from your site

Browser extensions

CLI tool

Libraries to integrate with different testing frameworks

Supported by Deque systems

What is Axe?

npm i --D cypress cypress-axe


// add it on support/index.js
import 'cypress-axe';

Getting Started

cy.injectAxe();
cy.checkA11y();

Commands

Demo App

Let's start writing our test!

Cypress Accessibility Tests

a11yComponentRules.forEach(component => {
  describe(`${component.name} component`, () => {
    it('should pass basic a11y test', () => {
      cy.visit(`?name=${component.name}`);
      cy.injectAxe();

      if (component.disabledRules === undefined) {
        cy.checkA11yWithDefaultRules();
      } else {
        cy.checkA11yWithCustomRule(component.disabledRules);
      }
    });
  });
});

Resources

Questions?

Marie Drake, Principal Test Automation Engineer

 

 

Made with Slides.com