Today

• Talk about A11y

• Learn about A11y Standards and Testing

• Learn about how this relates to Open MCT

• How it relates to e2e testing

• Go forward steps

My Background

• Worked on a enterprise web app when pizzagate happened

• The cheapest path for us was to hire an independent company to audit our application and give us the reports for us to fix. It was only like $4,000

• I worked with the accessibility department at Red hat to ensure that our application met accessibility standards.

• There was an entire team and working group dedicated to this.

Pizzagate

• In the world’s largest liberal hippy commune AKA State of California

• Case effectively mandates that existing handicap ADA laws apply to websites

• Specifically referenced the WCAG2.0 standard as the requirement that was not met

• This case is still ongoing, and is likely only going to result in more specific laws and standardization.

Why Should We Care?

• Jamie

• Even if VIPER doesn’t ultimately meet an accessibility standard, any web application you work on will likely have this requirement

• Federal Accessibility standard is likely coming

• We have a unique need in our end-to-end testing.

Standards?

• There are rapidly evolving standards that are firming up with enough tooling to take seriously

• WCAG 2.1 AAA and AA

• Contrast and legibility of text

• Some “general” design patterns specifically associated with screen reader technologies

• Accessibility requirements for the application to be considered usable (ARIA)

• Keyboard navigation

How to Use or Test

• Voice over or JAWS

• Lighthouse

• Axe / WAVE

• Note: No totally authoritative automated testing suite which ensures conformance and compliance to the WCAG specification.

How is Open MCT Doin'

• Voice over on macOS

• WAVE

• Lighthouse

Why Now?

• Nikhil and I started looking at this for the Forms refactor and didn’t get anywhere

• Playwright added native role locators.

• Global Search PR was first ernest attempt

• e2e Black Box and the three paths in front of us

e2e needs

e2e needs

• e2e tests need an abstraction away from classes or raw implementation which allows us to test that it improves (or regresses over time)

• https://github.com/nasa/openmct/pull/5203/files

• https://github.com/nasa/openmct/pull/5256/files#diff-aeb7f9545916699de8768f88ebf461170ec77bb289a85b096a24a621a41aa043

3 paths

• Page Object Pattern
  • Lots of overhead. You effectively create a terrible clone of the application which is inflexible and out of sync
• Test IDs

  • Allow BDD-like syntax on the application

  • Invisible to the application -- only the tests need it

  • Give the abstraction we need!

• ARIA

  • Allow BDD-like syntax for the application

  • Give the abstraction we need

  • Actually benefits someone other than the e2e tests

  • This is what Google is using in their new automated scripting performance testing framework

I thought this was about ARIA?

Resources

• MDN
• Examples https://www.w3.org/WAI/WCAG21/working-examples/aria-label-invisible-label-box/#box
• Google Search

ARIA Order

• Bad ARIA is worse than no ARIA... only for screen readers
• i.e. Don't need to use 'button' on a ARIA Label. Otherwise you get 'Create Button Button'
• Use HTML 5.2 semantics.
• Check MDN Site for ARIA Roles. Some are deprecated
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role

ARIA Order 2

• Check existing labels with DevTools Accessibility Tree tab
• ARIA Label vs ARIA Labelled By
• ARIA Description
• Then validate in playwright codegen

Go Forward

• Let's focus on iteratively learning about this as a team.

• Let's focus on the end-to-end test first

• Share what we learn about this in code reviews

• When writing and end test, if it's obvious that the locator is extremely brittle or tied to an implementation, it would be a great opportunity to implement some accessibility