SC 331/332 -- Checkbox fieldset legend implementation on contact info page

[damiansian]

URL

https://demo.fileyourstatetaxes.org/en/questions/notification-preferences

Issue

To come.

Screenshot

Video walkthrough

fieldset_legend_checkboxes.mov

WCAG Success Criterion

SC 3.3.1: Error Identification (Level A)
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

This suggestion fixes the issues on Mac and PC screen readers and brings the form element up to full WCAG conformance. There are other issues solved for here that have separate bugs filed.

Here is the CodePen:
https://codepen.io/dsian108/pen/NPKwOMy?authentication_hash=PNkvYxxPJjpA

What changed:

• Added autocomplete (SC 1.3.5)
• Associated helper text (SC 3.3.2)
• Used aria-describedby for helper text AND error text (SC 331 and 332)

 <p>Please select the option(s) that work best for you. </p>
<fieldset aria-describedby="helper">
<legend>I want to receive</legend>
	<div>
		<input type="checkbox" name="Text message" id="check_1">
    <label for="check_1">Text message</label>
	</div>
	<div>
		<input type="checkbox" name="Email" id="check_2">
    <label for="check_2">Email</label>
	</div>
</fieldset>
      
              <div>
    <p>
<span id="helper">At least one preference is required to proceed. </span>
  </div>