[Medium] Chrome+JAWS: Many Pages: Alt is not defined for the Avatars.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL staging.new.expensify.com
2. Navigate to a chatRoom (can be a #announce, #admin, or any policy room) and click on the header to open the report details.
3. Navigate to Avatar using the Tab key.
4. Observe the screen reader behavior on Avatar and check the code as well using the developer toolbar.

Expected Result:

Alt should be defined for the Avatar/images.

Actual Result:

Alt should be defined for the Avatar/images.

Other occurrences

Same issue repro on PR #9002, #8436, #8409, #8852, #9132, #8569

Workaround:

Yes

Area issue was found in:

Avatars on every screen.

Failed WCAG checkpoints

1.1.1

User impact:

Without having a text alternative, the screen reader ignores the images while reading through the page. As a result, the blind users will not get an equal opportunity to perceive the information that has been conveyed to a sighted user.

Suggested resolution:

Provide text alternative to inline SVG by adding role="img", and use the aria-label="crowded_test" as an equivalent for alternative text.

For more information please refer to:
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content

https://www.deque.com/blog/creating-accessible-svgs/

https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

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

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