Action Performed:
- Using Chrome+JAWS, open URL: staging.new.expensify.com
- Navigate to Settings > Payments > Add payment method > Debit card.
- Navigate to the "Name on card", "Debit card number", "Expiration date", etc. form fields using the screen reader.
- 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
Action Performed:
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
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:
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