SC 332 -- Form input label and helper text

[damiansian]

URL

https://demo.fileyourstatetaxes.org/en/questions/phone-number

Issue

The current label of the text input is not creating a consistent accessible name. There are two p tags in the label tag. This is causing errors on VoiceOver likely due to the fact we're using block level elements inside an inline element.

P tags in the label tag

<label for="state_file_phone_number_form_phone_number">
  <p class="form-question">Your phone number</p>
<p class="text--help">Enter numbers only</p>
</label>

Screen shot

Video walkthrough

form_label_auto_complete_error.mov

Note

The aria-required="true" was added after creating this screen recording.

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

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.

What changed:

• Added autocomplete (SC 1.3.5)
• Associated helper text (SC 3.3.2)
• Added required since skipping entry causes and error (SC 3.3.1 and SC 3.3.2)
• Used aria-describedby for helper text AND error text.

Current

<label for="state_file_phone_number_form_phone_number"><p class="form-question">Your phone number</p>
<p class="text--help">Enter numbers only</p>
</label>
<input 
    autocomplete="off" 
    autocorrect="off" 
    autocapitalize="off" 
    spellcheck="false" 
    type="text" 
    class="form-width--long text-input" 
    id="state_file_phone_number_form_phone_number" 
    name="state_file_phone_number_form[phone_number]">

    </div>

Should be:

<label id="label" for="phone">Your phone number</label>
<input 
  type="text" 
  name="phone" 
  id="phone" 
  autocomplete="tel" 
  aria-describedby="helper"
  aria-required="true">
<p id="helper">Enter numbers only</p>
</div>