Testing is an integral part of product development and is often misunderstood to be the last leg in the cycle. This puts more advanced testing like that for the accessibility of a product in jeopardy. This presentation will talk about the different phases during product development where you can test your application and mention some tools to do so especially for accessibility. Also, we will see how accessibility testing is not something that’s only restricted to engineers and can be done by product managers, designers as well.

1. Different Phases Of
Accessibility Testing

2. Speakers
Sagar Barbhaya
Staff Software Engineer
Poonam Tathavadkar
Software Engineer 2

3. How Much Does It Actually Cost To Fix A Bug?
“ At first, the cost of fixing a bug at the requirements stage is
nominal, when everything is on the drawing board. But as the software
moves along in its life cycle the cost of fixing a bug increases
radically. We start at 1 times when we are at the initial development
stage when a bug is no more than a change in notion.
But at the design stage, the relative cost is 5 times what it was
compared to the requirements stage, and then ten times what it was
when it becomes code and on this goes until it the relative cost of a
bug fix is 150 times what it was originally.”

6. Mindset Changes

7. Shift Left
● What is Shift Left?
● Ownership end to end
● Accessibility, Performance, Security Testing

8. Basic Accessibility Tests
Requirements (Manual)
● Keyboard Only Operation
● Visual Testing with Screen Reader
● Meaningful alt text for images
● Visual Aria Testing

9. Tools And Plugins

10. Open Chrome - chrome.google.com/webstore
Search for accessibility and install the following plugins
1. Microsoft Accessibility Insights For Web
2. Axe by Deque
3. Chromelens
4. NoCoffee
5. Wave

15. ● Evaluating multiple public websites at the same time
● Traverse through child pages
● Identifies issues based on severity - Critical v/s Serious
● Export evaluations
Worldspace Automation

19. Design

20. What Can Be Done?
STARK - Contrast plugin in Sketch
1. Color Contrast Requirements
2. Content Designers - Meaningful labels for
alt text, labels
3. Minute details - Hover, Focus States
4. Interaction Designers - Tab order

21. Development And Release

22. Linters Plugins Unit Testing Automation
Robust Accessible
Product
CI/CD
Build failures
Jenkins

23. Accessible Development
● Automation comes as a robust layer of added checks.
● But, while developing, there are some checks which can flag any
erroneous code.
● Examples - linters in React

24. Linters

25. Es6 + React

26. React Linter
● eslint-plugin-jsx-a11y - ESLint plugin, specifically for JSX and React.
● Reports any potential accessibility issues with the code. Comes baked
with a new React project (post 2017)
● Can be easily installed by adding a dependency in an existing
project's package.json file.
● Customizable rules

27. Quick installation
● Install the plugin using npm install
● Update the ESLint configuration
● add “jsx-a11y” to the “plugins” section
● Extend that plugin using
“extends” : [
“plugin: jsx-a11y/recommended”
]

28. Unit Testing

29. Cypress - Test Example
describe("Accordion", () => {
before(() => {
cy.visit("/");
});
cy.get("body")
.find("[role=region]")
.first()
.should("have.attr", "hidden");
// your tests here
});

31. Accessibility Automation
at Intuit
● Accessibility automation hub - one stop shop for integrations needed
with any platform
● Examples - Selenium, Webdriver JS, Webdriver IO
● Periodic check on accessibility health of the product
● Scalable - handle requests for multiple products across different
business units

32. Continuous Integration /
Deployment

33. Build System Failures
● Build systems like Jenkins is another touch point to integrate
accessibility checks
● Once automation checks for accessibility violations, builds like Jenkins
can be failed based on the automation result
● A red build will automatically raise flags before changes can be
pushed down the release pipeline.

34. @poonamst14
@sagar_barbhaya