Accessibility Testing for [Transition Experience, tbd, V1 Transition Experience]

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?

@cora-goldston-bah

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?

We only found one color contrast issue, but it is an issue with an existing VA Design System (VADS) component. On our Results page, the light blue Alert – Expandable component for “Time-sensitive benefits” does not sufficiently contrast with the surrounding white page background (the contrast ratio is less than 3:1). We used the standard VADS for this component, so this is not an issue specific to our product.

We used the VADS components for our product. We did not deviate from the standard VADS component colors, so we did not anticipate significant color contrast issues.

We used WhoCanUse to confirm the color contrasts between text/backgrounds and adjacent non-text elements for each of our product’s pages.

As a heads-up, the Colorblindly extension for Google Chrome is blocked on my GFE (but I was able to use it on my contractor company laptop). Several other color contrast testing extensions are also blocked on GFE (ColorBlindClick, Colour Contrast Checker, Digital A11Y Color Contrast Checker, etc.).

Who completed the axe scans?

@cora-goldston-bah

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

We ran the axe DevTools extension for Google Chrome on every page of our product. The only issue that axe DevTools detected was on the Results page (see below for more details).

Below are the axe DevTools results for each page of our product:

Introduction page: no issues detected
Goals questionnaire page: no issues detected
Total length of service questionnaire page: no issues detected
Currently serving questionnaire page: no issues detected
Previous period of service questionnaire page: no issues detected
Time since separation questionnaire page: no issues detected
Character of discharge questionnaire page: no issues detected
Disability rating questionnaire page: no issues detected
GI Bill questionnaire page: no issues detected
Review page: no issues detected
Results page:
- The Select components for “Filter benefits by” and “Sort results by” are missing accessible names.
- This is a Critical issue, so we will need to fix this before release.
- axe DevTools states that we can fix the issue by addressing at least one of the following:
  - Form element does not have an implicit (wrapped)
  - Form element does not have an explicit
  - aria-label attribute does not exist or is empty
  - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  - Element has no title attribute
  - Element's default semantics were not overridden with role="none" or role="presentation"
- Our developers are currently working to add aria-labels to these Select dropdowns.

How did axe testing go?

We do not have any further feedback beyond the detected issues that are listed above.

Who completed the content zoom and reflow test?

@cora-goldston-bah

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?

At 400% zoom on the Results page, the Filter and Sort options are condensed into a “Filter and sort” action link. However, this link currently does not do anything when selected. We will work with our developers to correct this and ensure the filter and sort options are usable at 400% zoom.

We also noticed that on the Results page, the default text in the “Sort results by” Select dropdown cuts off while using 300% or 400% zoom. So by default, the Select dropdown is populated with “Alphabetic” without the last two letters of the word. However, when you expand on the Select dropdown, you can see the entire word “Alphabetical” as a sorting option.

Otherwise, all of the other page elements are readable and usable at 200%, 300%, and 400% zoom for every page of our product.

Who completed the keyboard navigation test?

@cora-goldston-bah

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?

We tested every page of our product and we did not encounter any issues with keyboard navigation. All of the interactive components responded appropriately to the WebAIM expected keys. Every interactive element was able to receive keyboard focus and the order of [Tab] stops was logical.

Do you have any other results to share?

We do not have additional findings to share at this time. We will work with the Governance Team to complete advanced accessibility testing, as we do not have access to some assistive technology.

department-of-veterans-affairs / va.gov-team