508-defect-2 [SEMANTIC MARKUP, COGNITION]: Groups of form elements MUST have group labels (e.g. <fieldset> and <legend>)

[joshkimux]

508-defect-2

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

---

Point of Contact

VFS Point of Contact: Josh Kim

User Story or Problem Statement

As a screen reader user, I need to know that a range of form inputs are grouped together, so that I may understand the scope of the use case. As a user with cognitive considerations, I want to know which page of the form I am editing so that I can update the right information.

Details

Upon clicking "edit" on any of the pages within the applicant information accordion, the heading element that indicates the page disappears leaving only the form inputs behind. This may cause several issues:

1. Screen reader users will struggle to navigate through the forms as heading elements are actively inserted and removed from the page. It is also not announced to the user
2. Sighted users with cognitive considerations may lost track of their place within the multiple forms nested in an accordion, particularly on mobile.
3. Missing heading elements eliminates the opportunity to make use of aria-describedby to provide unique accessible names to the "update page" buttons.

These issues are further compounded by a lack of groupings for the form itself. Groups of form elements MUST have group labels to meet Section 508 requirements.

Acceptance Criteria

• [ ] Forms belong to logical groupings using fieldsets and legends.
• [ ] Headings do not disappear after clicking "edit."
• [ ] Update page buttons point to headings using aria-describedby.

Environment

• Operating System: all
• Browser: any
• Screenreading device: any
• Server destination: staging, production

Steps to Recreate

1. Fill out Form 28-8832 as a spouse/child and reach the Step 2 of 2: Review Application page.
2. Open the "Application Information" accordion.
3. Click "edit" next to Applicant Information.
4. Verify the heading "Application Information" has been removed.
5. Open dev tools and verify no fieldsets and legends exist.
6. Open the "Your sponsoring..." accordion.
7. Verify no heading exists.

Solution

Add a fieldset around each group along with a legend that contains the formerly deleted heading. This enhancement will provide multiple methods of navigation to screen reader users through headings and form groupings. It will also help sighted users on mobile understand which pages they are editing as they scroll.

It should be noted that this may be a sitewide issue that may need to be addressed in the form/design system itself. Alternative, more optimal patterns should be explored. I strongly recommend considering gov.uk's check answers pattern which would alleviate many of the technical issues the existing pattern creates.

❗️ Please reference the ticket on headings for this page before addressing this. This ticket requests that headings be added to the accordions, which consequentially bumps down headings for the rest of the page.

Before

<!-- Fields -->
<div>...</div>
<button type="submit" class="usa-button-primary null" id="9-continueButton">
  Update page
</button>

<!-- Fields -->
<div>...</div>
<button type="submit" class="usa-button-primary null" id="9-continueButton">
  Update page
</button>

<!-- Fields -->
<div>...</div>
<button type="submit" class="usa-button-primary null" id="9-continueButton">
  Update page
</button>

After

+ <fieldset>
+  <legend id="id-1">
+    <h4 class="vads-u-font-size--h5 vads-u-margin--0">
+      Applicant Information 
+    </h4>
+   </legend>
  <!-- Fields -->
  <div>...</div>
+  <!-- Add aria-describedby to this button-->
  <button type="submit" class="usa-button-primary null" id="9-continueButton" aria-describedby="id-1">
    Update page
  </button>
+ </fieldset>

<!-- Repeat changes down the page -->

WCAG or Vendor Guidance (optional)

• Grouping controls
• WCAG 2.0 1.3.1 Info and Relationships A

Screenshots or Trace Logs

Before

Note the missing title for this form group.

After

Note the reinstated heading.

[1Copenut]

@joshkimux I'd like to downstep this one to a severity 2 from a 1. There's room for improvement as you've outlined, but the critical path functionality is working. LMK if you'd like to chat more about this.

[joshkimux]

@1Copenut I've updated it accordingly! ✌️

[jason-gcio]

We see that this would be an improvement but we are not able to adjust these at this time since this is a Form System issue. Leaving in Icebox for now.

[taylorkaren]

Info from @k80bowman: This sounds like a review page issue. I know there are review page re-design things going on, so I'm not sure if we want to tackle this or not. I did not re-test myself, but I'm pretty confident this is still an issue. - Katy

[caw310]

@taylorkaren , this was another item we discussed as belonging in the FLT backlog.

[obliviga]

The only thing we can feasibly update here IMO is the aria-describedby attribute on the Continue button, which I have created a PR for here: https://github.com/department-of-veterans-affairs/vets-website/pull/21490

The reason we cannot add a legend is because we already have a heading outside of the form that is associated with the form elements:

Adding fieldset and legend elements will change how the form looks. cc @taylorkaren

[taylorkaren]

@obliviga: Let's get input from @joshkimux on the fieldset and legend inputs. If those still need to be addressed, let's create a new ticket with the specific details around that request.

[joshkimux]

@obliviga and @taylorkaren , hey folks! Thanks for tagging me here and taking the initiative to work on this.

I agree with @obliviga that fixing the issue at its root will likely require changing how the form looks (adding specific legends and headings to better break up the content and using one thing per page).

Also agree with @k80bowman that it may be wiser to wait for the review page changes to address this.

If we do want to look into immediate, short-term fixes, we may be interested in working with the benefits team to see if there are any IA/content fixes we can do in the meantime like:

• Splitting apart address and contact information into two separate pages (one thing per page)
• Adding specific legend h3 s to contextualize these for the review page (if we're able to work around some things locally)... I think Robin and I have done this before

If we can do the above (or if other possible upstream approaches aren't strictly a form system issue), we could potentially bump this back to the benefits team for review.

[taylorkaren]

Let's go ahead and put through the PR for the aria-describedby attribute on the Continue button. We will move Josh's last comment to a separate ticket and may address it in Q3 2022 if we work with the Benefits team on piloting the VAFSC.

[obliviga]

Just pushed up feedback to the PR. Awaiting review.

[obliviga]

Merged the PR, now waiting for successful deployment to production.

[obliviga]

Verified in production: