SC 412 -- Text and email buttons have unnecessary aria-describedby

[damiansian]

URL

https://demo.fileyourstatetaxes.org/en/questions/contact-preference

Issue

The buttons for "Text me a code" and "Email me a code" have aria-describedby to associate the adjacent heading. The heading is getting read after each button which is confusing.

Note

If this component had two buttons of "Yes" and "No", having the aria-describedby associate the adjacent heading would add value. In this case, since the accessible name of each control is explicit, this step just adds noise to the system.

WCAG Success Criterion

SC 4.1.2: Name, Role, Value (Level A)

User Impact

A screen reader using these controls is getting additional semantics that offer no real value.

Suggested fixes

Current computed accessible name is:

Text me a code, Next, create your account with a quick code

<button 
    name="state_file_contact_preference_form[contact_preference]" 
    type="submit" id="state_file_contact_preference_form_submit" 
    value="text" class="button" 
    aria-describedby="main-question">
Text me a code
</button>

Should be:

Text me a code

<button 
    name="state_file_contact_preference_form[contact_preference]" 
    type="submit" id="state_file_contact_preference_form_submit" 
    value="text" class="button" 
Text me a code
</button>