search

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

[a11y-defect-3]: Improper use of fieldset and duplicative <legend> #64361

Open coforma-jamie opened 1 year ago

coforma-jamie commented 1 year ago

Point of contact

Jamie Klenetsky Fay @coforma-jamie

Severity level

3, Moderate. Should be fixed in 1-3 sprints post-launch.

Details

On step 2 of the form, the "What's your level of education?" and "Are you moving in the next 30 days?" fields are contained within a <fieldset> with the <legend> "Additional information": image

There are two issues with this:

  1. These fields don't need to be within a <fieldset>. There's only 1 "Additional information" page on this form, and these two questions aren't related to each other, so this extra layer of grouping is superfluous and leads to the second issue:
  2. <legend>Additional Information</legend> is duplicative of the "Step 2 of 4: Additional Information" heading. A screen reader user would hear something like this: Heading level 2, Step 2 of 4: Additional information. ... Additional information, group. This adds more for the SR user to have to parse through unnecessarily. image

Reproduction steps

  1. Go to the form
  2. Click "Apply for Veteran Readiness and Employment with VA Form 28-19003" and sign in
  3. Fill out the form until you get to this page
  4. Inspect the "Additional Information" <legend> above the "What's your level of education?" field. You can also use a screen reader like VoiceOver or NVDA to hear what it sounds like.

Proposed solution or next steps

Take the "education" and "moving" fields out of their grouping <fieldset>; remove the <legend>. The page will look like this, in pseudocode:

<heading>
Step 2 of 4: Additional information
</heading>
....

<select component>
What's your level of education?
..... 
</select>

<radio button component>
Are you moving in the next 30 days?
..... 
</radio>

References, articles, or WCAG support

When to use a fieldset and legend, from gov.uk

Type of issue

Reproduction steps

  1. Go to the form
  2. Click "Apply for Veteran Readiness and Employment with VA Form 28-19003" and sign in
  3. Fill out the form until you get to this page
  4. Inspect the "Additional Information" <legend> above the "What's your level of education?" field. You can also use a screen reader like VoiceOver or NVDA to hear what it sounds like.

Proposed solution or next steps

Take the "education" and "moving" fields out of their grouping <fieldset>; remove the <legend>. The page will look like this, in pseudocode:

<heading>
Step 2 of 4: Additional information
</heading>
....

<select component>
What's your level of education?
..... 
</select>

<radio button component>
Are you moving in the next 30 days?
..... 
</radio>

References, articles, or WCAG support

When to use a fieldset and legend, from gov.uk

Type of issue

Midge-dev commented 10 months ago

@coforma-jamie We might have to open a ticket with Platform to address this. When building a form, we write our content in a schema / uiSchema which tells the Platform Forms Library which components to render in our form.

Based on how the form was built, the Forms Library is rendering ObjectField.jsx (component renders content inside <fieldset />) and TitleField.jsx (component renders title inside <legend />) on step 2 of the form. The result is what we see here.

cc: @tblackwe @steele-lm