SC 135 -- Autocomplete is required on common form elements

[damiansian]

URL

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

Issue

To come.

Screen shot

Video walkthrough

auto-complete.mov

WCAG Success Criterion

SC 1.3.5: Identify Input Purpose (Level AA)

Impacted users

To come.

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>

[damiansian]

Looks good