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

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
281 stars 197 forks source link

Accessibility Testing for Veteran Facing Forms - 21-0966 #67208

Closed tbaker1026 closed 10 months ago

tbaker1026 commented 11 months ago

Product information

Who completed the use of color and color contrast test?

@jeana-adhoc

Use of color and color contrast checks

How did color testing go?

No issues

Who completed the axe scans?

@jeana-adhoc

axe checks

axe DevTools scan results

Axe Results Page
No issues Introduction
No issues Preparer information
No issues 3rd Party Preparer name
No issues 3rd Party Role
No issues Benefit selection (Veteran)
No issues Benefit selection (Survivor)
No issues Name & DOB
No issues Identification information
No issues Mailing address
No issues Phone & Email
No issues Veteran name & dob
No issues Veteran identification information
No issues Relationship to veteran
No issues Review page

All pages now have one new error that is out of the forms team control. But this ticket, https://github.com/department-of-veterans-affairs/va.gov-cms/issues/15568 covers the issue.

How did axe testing go?

The only issue is the one documented here https://github.com/department-of-veterans-affairs/va.gov-cms/issues/15568, but it is on all pages.

Who completed the content zoom and reflow test?

@jeana-adhoc

Content zoom and reflow checks

How did content zoom and reflow testing go?

No issues

Who completed the keyboard navigation test?

@jeana-adhoc

Keyboard navigation checks

How did keyboard testing go?

Some issues were identified.

Introduction page/OMB Component (DST)

The OMB component "View Privacy Act Statement" button (modal) is not behaving as expected.

Focus (Forms-team)

  1. Focus is lost going from the introduction page to the first page in the form. What I observe is that when going from the intro page, to the first page of the form, the page loads at the bottom, and the focus is at the top on the "skip to content" link. Focus is not managed at all here. Focus should go to the h2: "Step 1 of 3: Your identity". There no sound in the video, but you can see the transcript of the screen reader. Note: I thought we had encountered this before in the PMC... And Robert ended up doing this (Now, granted this might not have anything to do with the issue... just trying to provide some help_

https://github.com/department-of-veterans-affairs/va.gov-team/assets/117098918/b1794ed4-c4f5-455d-bc31-73039f041af7



  1. Focus is also lost when navigating to the confirmation page. Focus should go to the H2 "You've submitted your... " or "You've already submitted your.."
image

Review page - Headings & aria-labels (Forms-team)

There were a number of heading issues and aria-label issues with the review pages of all four stories. I've marked up PDFs to indicate what needs to be updated

Here is an example heading structure on the review page (this is wrong): H2. Step 6 of 6 Review Application    H3. Your identity        H4. Your identity        H4. Your name        H4. Your role    H3. Claimant's benefit selection        H4. Claimant's benefit selection    H3. Claimant's personal information        H4. Claimant's personal information        H4. Identification information    H3. Claimant's contact information        H4. Mailing address        H4. Phone and email address    H3. Veteran's personal information        H4. Veteran's name and date of birth        H4. Identification information    H3. Statement of truth

In the PDFs I recommend this

Here is an example heading structure on the review page for story 4 - 3rd party for a survivor claimant:

H2. Step 6 of 6 Review Application    H3. Your identity        H4. Form preparer            Edit aria-label="Edit Form preparer"        H4. Your name            Edit aria-label="Edit Your name"        H4. Your role            Edit aria-label="Edit Your role"    H3. Claimant's benefit selection        H4. Claimant's benefit selection            Edit aria-label="Edit Claimant's benefit selection"    H3. Claimant's personal information        H4. Name and date of birth            Edit aria-label="Edit Claimant's name and date of birth"        H4. Identification information        Edit aria-label="Edit Clamant's identification information"    H3. Claimant's contact information        H4. Mailing address            Edit aria-label="Edit Claimant's mailing address"        H4. Phone and email address            Edit aria-label="Edit Claimant's phone and email address"    H3. Veteran's personal information        H4. Name and date of birth            Edit aria-label="Edit Veteran's name and date of birth"        H4. Identification information            Edit aria-label="Edit Veteran's identification information"        H4. Claimant's relationship to the Veteran            Edit aria-label="Edit Claimant's relationship to the Veteran"    H3. Statement of truth

This reduces redundancy in the heading structure, and structures each group similarly.

Also related to the review page: Also, on the review page, the "Your benefit selection" edit button has an incorrect/incomplete aria-label. The edit button says, "Edit function(e){return Wx({formData:e})}, button" Screenshot 2023-11-04 at 10 45 43 AM

It should say "Edit Your Benefits selection"

Do you have any other results to share?

For Design System

  1. (* Required) on this page /21-0966/pages/veteranBenefitSelection.js is in the wrong font image

Other concerns

  1. I have a concern about a destructive action not being announced: If a user clicks edit to change their selection for "Your identity" the answers to the entire form are cleared out without notice. This was put into place because if they did select the wrong identity, the answers are presumably in the wrong pace throughout the form and we don't want users to submit incorrect data. However, currently, if a user is even curious about what that "edit" button does, there is no "cancel" there is no non-destructive option. Ideally, we should let them make their selection, and once they click "update" provide a modal that announces the destructive change, and puts they back at the start of the form if they approve the change. OR, we could not have a destructive element at all, and the user will need to verify on their own the changes to the form.

  2. I have a concern about authenticated experience not using prefill - we are using their ICN information to determine the ITF status, yet allowing the Veteran to input all new information that we probably already have available from Profile, shouldn't we be showing this information and allowing the Veteran to confirm this information? Can we do prefill on the authenticated experience and use the prefill information to populate "YOUR" fields? What could happen is someone fill out the form while logged in, but change the information to be for a different user, but it won't matter, because it's the profile information that's being submitted, not the information in the form fields that user is typing. Even the confirmation page says it's filled out by the filled out fields, but it's really submitted using the profile data if an ICN is present.

jeana-adhoc commented 11 months ago

This is not complete. There were a lot of tickets filed for the catch-all after I had done some basic testing. I'd like to wait until more of those fixes are on staging before I complete the testing.

jeana-adhoc commented 10 months ago

Restarting this work on 11/2/23

jeana-adhoc commented 10 months ago

Testing complete.

Tickets for CMS related to this testing:

Tickets for the Design system related to this testing:

Tickets for the forms team related to this testing:

Known issues