SC 332 -- Improperly implemented fieldset legend

[damiansian]

URL

https://demo.fileyourstatetaxes.org/en/questions/w2/1488/edit

Issue

The fieldset is not applied correctly to box 14 fields. Two of the fields are outside the fieldset so the grouping semantics is lost on those items. In addition, the dollar sign added with CSS is using table semantics which gets read aloud by a screen reader (NVDA on Chrome).

Note

I would recommend creating a visual representation of the fieldset in this usage. Visually, it's difficult to understand the three fields are related.

Screen shot

Video walkthrough

income_review.mp4

WCAG Success Criterion

SC 3.3.2: Labels or Instructions (Level A)

Impacted users

Screen reader users rely on labels and instructions to understand how to fill out form elements properly.

Suggested fix

I recommend the following:

• Correctly place the three fields in the fieldset.
• Change how the dollar sign is added to the field.
• Add a visual to indicate the three fields are related.
• Adjust contrast of the placeholder text.

You can reference these solutions on CodePen:
https://codepen.io/dsian108/pen/GgKOwmd?editors=1000