ARIA N U

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