Open
Description
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.
Root page used for testing
Who completed the use of color and color contrast test?
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?
No issues
Who completed the axe scans?
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
| Axe Results | Page |
|---|---|
| Content not in a landmark (true for all pages of this form) | Introduction |
| Same as intro | Statement Type |
| Same as intro | CST |
| Same as intro | Decision review |
| Same as intro | Lay Witness statement |
| Same as intro | Priority processing |
| Same as intro | Personal Records |
| Same as intro | Name & DOB |
| Same as intro | Identification information |
| Same as intro | Mailing address |
| Same as intro | Contact info |
| Same as intro | Statement |
| Missing h1 & Same as intro | Review |
| Missing H1 & same as intro | Confirmation page |
How did axe testing go?
Axe helped reveal a couple of issues.
- For some reason the "Skip to content" link is being marked as not being in a landmark area. I think this is related to the minimal form layout. We see the same issue in the mock minimal form layout (Nav to name & dob page) but not in the default/current mock form layout (Nav to name & dob page). A ticket has been filed.
- The review page is still missing an H1. A ticket for this was already filed
- The confirmation page is also missing an
H1. The confirmation page layout should be similar to that of the intro page, in that theH1is the plain language name of the form. Ticket has been filed
Who completed the content zoom and reflow test?
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?
Most of the form did just fine under 2, 3, 400% zoom. There were only issues (and a minor one) on pages that used the updated primary action arrow. When zoomed in at larger percentages and there's a lot of text in the updated "primary action link/arrow", the point of the arrow does not expand with the line height.
A ticket was previously filed for this issue However, we've not filed this with the design system yet, and there hasn't been any DST incorporation of the updated styles yet. (See this experimental design ticket)
Who completed the keyboard navigation test?
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?
No issues
Do you have any other results to share?
- When clicking the "submit this application" button on the review page, the button then revealed the back and submit button while the page tried to submit. This seemed odd, and could cause user error if they think they can click on the back button. You can see an example in this video.
https://github.com/user-attachments/assets/2c498a4a-97c5-4d31-a402-4b396377a597
- If I navigate to one of the secondary forms and load its introduction page, and then use the back button in the browser, the standard/desktop breadcrumbs end up displaying on the page as well as the "back to the previous page" breadcrumb. You can see an example in this video.
https://github.com/user-attachments/assets/b71c2d82-a927-4e9b-b706-1f4d360fc4e8
Activity