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>

[mmazanec22]

Note to self: see also box 14 fields

[mmazanec22]

@damiansian this one is in code review. If you've got time to review it, here's the link: https://statefile.pr-5474.getyourrefund-testing.org/en/nj/landing-page

How to test:

• Check out the contact info screens you flagged
• Choose the O Neal Walker catchall persona
• Click on the w2 editing button when you get to that screen; there were some help text changes
• Put a value above $200 in one of the box 14 fields and try to save (this should cause an error)

[damiansian]

Contact screen flagged has been fixed:

[damiansian]

W2 editing example is good to go:

[damiansian]

Error text is read via aria-describedby.

Note

I would love to hear the word "Error" in the error text. I will create another ticket as to not keep this one open. The red triangle is visible but not announced.

[mmazanec22]

Thanks! I'm moving it back to "in review" because it's not merged yet, as CfA is worried about the risk of changing all of our inputs at once. I did my best to write about the user impact to explain why we prioritized this ticket and proposed these changes: codeforamerica/vita-min#5474 (comment).

Double checking with you @damiansian because I don't want to misrepresent the priority level of this ticket: would it be fair to say that without the p/span tag change, the labels are currently not perceivable at all to some assistive tech users? And that's why you marked it as a severity 2?

[damiansian]

@mmazanec22

Here is the rubric I use for assigning severity...

This is non-conforming to WCAG but not a full blocker (i.e., not Sev 1). There is a workaround available in that I can access the text in "browse mode" reading of the page. It is a core workflow in that I cannot advance to the next screen without inputing text or making a selection. As it's a core workflow, but there is a workaround, I assigned sev 2.

It's important to note that this is my opinion based on my understanding of your product. My views are not intended to be hegemonic, and are instead open for interpretation and overruling by the product team.

[mmazanec22]

@damiansian this one just got merged into staging after some iteration on the implementation. If you have a moment to retest, that would be lovely! https://demo.fileyourstatetaxes.org/en/nj/landing-page