Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Medium] Chrome+JAWS: Many Pages: Error message is not announced by the screen reader. #8579

Closed
SumitDiyora opened this issue Apr 9, 2022 · 1 comment

Comments

@SumitDiyora
Copy link

SumitDiyora commented Apr 9, 2022

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 "Save" button and activate it with empty form fields.
  4. Observe whether the screen reader is announcing the error messages or not.

Expected Result:

When focus lands on all text boxes the screen reader should read the error messages which are displayed on the screen.

Actual Result:

Screen reader is not read anything after select the save and continue button.

HTML Code:
div dir="auto" class="css-901oao" style="color: rgb(252, 56, 38); font-family: GTAmericaExp-Regular; font-size: 13px; line-height: 18px; margin-bottom: 4px; margin-top: 4px; padding-right: 12px; padding-left: 12px; text-align: left;">Please enter a valid name</div

Note:
Same issue repro on all pages / applications which have form fields.

Other occurrences

Same issue repro on PR #8970, #8970, #9133, #9207, #9369, #9056

Workaround:

Yes

Area issue was found in:

Add a debit card

Failed WCAG checkpoints

3.3.1

User impact:

Error messages or validation messages of forms are pointers that enable users identify the mistakes and rectify them. As a result, error messages should be accurate and descriptive so that users are able to provide correct information and submit the form without any problem.

Suggested resolution:

Add role="alert" attribute within 'div' to ensure that the error message is announced by the screen reader.

Refer to:
https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html

Platform:

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

Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Sumit

#8017_Error message is not announced by the screen reader

@melvin-bot
Copy link

melvin-bot bot commented Jun 27, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant