CSUN 2020 presentation by Poonam Tathavadkar and Sagar Barbhaya

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