Accessibility Testing for [CMS Team - Next Build and Next Build's Events and Event Listings Templates]

[laflannery]

Product information

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

https://staging.va.gov/eastern-colorado-health-care/events/
https://staging.va.gov/pittsburgh-health-care/events/
https://staging.va.gov/outreach-and-events/events/
https://staging.va.gov/outreach-and-events/events/73946/
https://staging.va.gov/outreach-and-events/events/64661/

Who completed the use of color and color contrast test?

@laflannery

Use of color and color contrast checks

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

How did color testing go?

Good

Who completed the axe scans?

@laflannery

axe checks

• Each page has been scanned using axe (results shared below)
• axe is integrated into your end-to-end testing

axe DevTools scan results

4 of the 5 pages have 0 axe issues. 1 of the detail pages was flagged for a heading issue however this comes from the editor managed content and not the code:

How did axe testing go?

Good

Who completed the content zoom and reflow test?

@laflannery

Content zoom and reflow checks

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

How did content zoom and reflow testing go?

Good

Who completed the keyboard navigation test?

@laflannery

Keyboard navigation checks

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

How did keyboard testing go?

Good

Do you have any other results to share?

• There was final QA done on the pages last week and issues were documented as subtasks in the Events parent ticket and the Events listing parent ticket. Not all of these are accessibility related but it was easier to share them all.
• There is are a couple existing issues that we have ticketed for follow up work post-launch:
  • Incorrect order for Meta titles on Event detail pages
  • Correct/Standardized padding on Events
• There is also an existing issue with the pagination component on smaller screens that the DST is aware of an has documented:
  • The Previous/Next buttons are sometimes cut off
  • On Mobile, the previous/next buttons do not show

[timcosgrove]

We have axe testing incorporated into our Playwright integration tests, for example here:

• https://github.com/department-of-veterans-affairs/next-build/blob/main/playwright/tests/event.spec.ts#L12
• https://github.com/department-of-veterans-affairs/next-build/blob/main/playwright/tests/storyListing.spec.ts#L29

Example results of these tests is attached, from this Playwright run: https://github.com/department-of-veterans-affairs/next-build/actions/runs/11796101256

playwright-report.zip