[Medium] Chrome+JAWS: Form fields are not associated with their visible label.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Payments > Add payment method > Debit card.
3. Navigate to the "Name on card", "Debit card number", "Expiration date", etc. form fields using the screen reader.
4. Observe the screen reader announcement.

Expected Result:

The visible label of a form field is programmatically associated with its form field so that assistive technology announces the label with the form field.

Actual Result:

The "Name on card", "Debit card number", "Expiration date", etc form fields are not announced with their visible labels. Screen reader only read the value of the form fields, not reading the label along with the value.

Other occurrences

Same issue repro on PR #9207

Workaround:

Yes

Area issue was found in:

Add a debit card

Failed WCAG checkpoints

1.3.1

User impact:

Users may not be able to fill out form fields and use the functionality correctly, if there is no label associated with its field.

Suggested resolution:

Provide unique and descriptive label for each form control using element. This will help screen reader users to understand the purpose of each form control and input the details accordingly. Web pages that lack label for form controls make it difficult for screen reader users to complete the form successfully.
In addition, associate the label explicitly with the form control using the “for” and “id” attribute to ensure that assistive technologies identify the label for each form control correctly.

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/tutorials/forms/labels/
Issue reported by: Sumit

[melvin-bot]

@SumitDiyora, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.