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

[Stutikuls]

Action Performed:

1. Using JAWS+ Chrome, open URL staging.new.expensify.com
2. Navigate to Avatar for #announce and #admins rooms using Tab key.
3. Observe the screen reader behavior on Avatar and check the code as well using developer toolbar.

Expected Result:

Alt should be defined for the Avatar/images.

Actual Result:

Alt is not defined for the Avatar/images. Focus does not land on the avatar/images.

HTML Code -
div class="css-1dbjc4n r-1awozwy r-13awgt0 r-1777fci">

svg id="room_svg__Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 40 40" xml:space="preserve" width="80" height="80" fill="#03d47c"><style>.room_svg__st1{fill:#fff}</style>

This is the beginning of the private #announce room, invite others by @mentioning them./div>/div>

Other occurrences

Same issue repro on PR #9055

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" to the , and use the aria-label="TV Show restricted for signin" 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.46-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

_Alt.is.not.defined.for.the.avatar.mp4

[melvin-bot]

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