Accessibility Testing for Facilities, VBA Regional Offices

[davidmpickett]

Product information

• [X] Team name, product name, and feature name have been added to the title of this issue.
• [X] Team label, product label and feature label (if applicable) have been added to this issue.

Who completed the use of color and color contrast test?

@davidmpickett

Use of color and color contrast checks

• [x] All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
• [x] All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
• [x] Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
• [x] Color is not the only way to distinguish links from other text (eg. links are underlined)
• [x] Any charts, maps, infographics, and tables convey all information without only relying on color
• [x] Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")

How did color testing go?

Good. Contract ratios ranged from 5.9:1 on the low end and 17.22:1 on the high end. Only instance of the name of a color on the page was in the context of the phrase "Agent Orange."

Fun side note. I've got Deuteranomaly. When I clicked that filter, I was like "this looks normal? Is the filter working? ohhh..."

Who completed the axe scans?

@davidmpickett

axe checks

• [X] Each page has been scanned using axe (results shared below)
• [ ] axe is integrated into your end-to-end testing
  • E2E test aren't possible on Drupal-powered products. Discussed with Platform on Slack

axe DevTools scan results

How did axe testing go?

Uneventful.

Who completed the content zoom and reflow test?

@davidmpickett

Content zoom and reflow checks

• [x] All page elements are readable and usable at 200% zoom
• [x] All page elements are readable and usable at 300% zoom
• [x] All page elements are readable and usable at 400% zoom

How did content zoom and reflow testing go?

Good until 400% zoom. Email addresses go off the screen sometimes at that zoom level.

It's possible to scroll over and read the full email address, so I guess it's still readable and usable, it just doesn't look great

I stubbed an issue for our backlog.

Who completed the keyboard navigation test?

@davidmpickett

Keyboard navigation checks

• [x] Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
• [x] Each link, button, form input, checkbox, radio button, select menu, and custom element responds to expected keys
• [x] All elements under focus have a visible focus indicator
• [x] The order of [Tab] stops made sense and was appropriate for completing tasks

How did keyboard testing go?

It went well. I caught a couple broken links and noticed some quirky focus behavior which I have stubbed as a defect ticket.

Do you have any other results to share?

No response

Known issues

• https://github.com/department-of-veterans-affairs/va.gov-cms/issues/18354
• https://github.com/department-of-veterans-affairs/va.gov-cms/issues/17686
• https://github.com/department-of-veterans-affairs/va.gov-cms/issues/18367

[davidmpickett]

@eselkin There's a bullet point here about axe being integrated into our end-to-end tests. But my understanding from your testing ticket is we don't have any e2e tests for VBA, correct?