Accessibility Testing for BMT II, Benefit Letters, Download Letter button text

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?

@1Copenut

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?

Color testing went well. All text is meeting minimum color contrast ratio requirements. The non-text focus halo doesn't meet 3:1 contrast ratio with white backgrounds, but this is a known issue being worked on.

Who completed the axe scans?

@1Copenut

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

Axe testing went well. Zero issues were detected in the manual evaluation with all Benefit Letters accordions opened.

How did axe testing go?

The automated tests include axe checks for all accordions open and keyboard-driven interaction.

Who completed the content zoom and reflow test?

@1Copenut

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?

Content zoom and reflow went well. I did have one question regarding the line-height on our VA buttons. The current stylesheet shows it at 0.9, which feels fine for single line labels but crunches the leading a bit when longer labels wrap to two lines. I'm attaching a screenshot of 400% zoom for reference. Is this something we should raise to the DS team?

Who completed the keyboard navigation test?

@1Copenut

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?

No issues in keyboard testing.

Do you have any other results to share?

Buttons do not respond to Microsoft Voice Access commands. I have root-caused this behavior and am tracking work in #96357.
The screen reader experience is much improved now. Windows 11 Chrome wants to download PDFs and Firefox opens them directly in a new tab. Removing the word "Download" and adding "(PDF)" was an excellent decision by @rallencf. The prompt is much clearer now.
I picked up that the buttons announce as unavailable, but are still clickable. Funny enough, the root cause of this behavior is the same one that prevents Voice Access from clicking buttons: an attribute disabled=false". Setting the local disabled prop to undefined as the baseline makes the buttons announce as "clickable" which is what we want. This too will be fixed in #96357.

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