Accessibility Testing for [Team TEST, Product TEST, Feature TEST]

[sterkenburgsara]

Product information

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

Who completed the use of color and color contrast test?

@sterkenburgsara

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)
• [ ] 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?

TEST TEST: Our team didn't design the icons on our page and have no control over them, but the contrast within the icon is not 3:1 (dark gray circle with black icon at center). It does meet contrast requirements to adjacent background. Do you have advice?

Who completed the axe scans?

@sterkenburgsara

axe checks

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

axe DevTools scan results

TEST: Axe reports that 67 instances of "element must have sufficient color contrast." The expansion on this issue states "the element's background color could not be determined due to a background image." Test done on this page: (https://www.va.gov/education/)

How did axe testing go?

This meets our expectations, but a few issues did show up. I am confident that the color contrast meets the requirements listed above, but axe couldn't read it. Should I do anything about this? How do I know if any of this will be designated as launch blocking?

Who completed the content zoom and reflow test?

@sterkenburgsara

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?

Great! No issues.

Who completed the keyboard navigation test?

@sterkenburgsara

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?

Great!

Do you have any other results to share?

• I wasn't able to add additional labels to this ticket (probably while its in your personal repo?)

• If someone wanted to do additional testing using JAWS or a device, should we provide a link to advanced accessibility testing documentation/guidance within this ticket?

[briandeconinck]

I wasn't able to add additional labels to this ticket (probably while its in your personal repo?)

Yep, my guess is that's because it's in a personal repo.

If someone wanted to do additional testing using JAWS or a device, should we provide a link to advanced accessibility testing documentation/guidance within this ticket?

Good suggestion. I'll add a link to the advanced testing section on the page in Platform website down in the "other results" section.