SC 324 -- Text and email buttons not identified consistently

[damiansian]

URLs

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

Issue

The "text code" and "email code" action is identified as a link on one page, but as a button on another page. The WCAG specifies that:

Components that have the same functionality within a set of Web pages are identified consistently.

Screen shots

Identification on one page as a link

<a 
    class="button button--wide" href="/en/login/new?contact_method=sms_phone_number">
    Sign in with phone number</a>

Identification on another page as a button

<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>

WCAG Success Criterion

SC 3.2.4: Consistent Identification (Level AA)

Impacted users

People who learn functionality on one page on a site can find the desired functions on other pages if they are present. When non-text content is used in a consistent way to identify components with the same functionality, people who rely on accessible names and the roles of a control, can interact with the interface in a more predictable manner. They can also search for the component if it has a consistent label/role on different pages.

Suggested fix

Consider using button semantics for all class="yes-no-buttons" components. Generally, buttons do things and links go places. It may be useful to make the delineation for cognitive load and apply it consistently throughout the experience.