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

Add avatar contact img description #36740

Merged
merged 1 commit into from
Mar 3, 2023
Merged

Add avatar contact img description #36740

merged 1 commit into from
Mar 3, 2023

Conversation

Pytal
Copy link
Member

@Pytal Pytal commented Feb 16, 2023

Summary

Add descriptive text to the contacts menu avatar img elements

Checklist

@Pytal
Copy link
Member Author

Pytal commented Feb 16, 2023

/backport to stable25

Copy link
Member

@jotoeri jotoeri left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, isn't that worse, as the screenreader reads the name on the avatar and then once again on the actual full-name text?

@Pytal
Copy link
Member Author

Pytal commented Feb 16, 2023

Hmm, isn't that worse, as the screenreader reads the name on the avatar and then once again on the actual full-name text?

Do you think we should add a separate label for the avatar @michaelnissenbaum?

@michaelnissenbaum
Copy link

@JuliaKirschenheuter From my perspective, Avatar should not be implemented as a link because we already have a 'View Profile' link that provides the same functionality. Avatar should simply be implemented as an img element with an "alt" attribute set to an empty string, so that screen readers will ignore this element. However, if you really want the Avatar element to remain interactive and be displayed, then you can use the aria-label attribute with an "a"-element or the "alt" attribute of the image.

@skjnldsv skjnldsv mentioned this pull request Feb 23, 2023
Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be better to set Avatar of __name__? Or should we through away a link from avatar #36740 (comment)?

@Pytal Pytal force-pushed the enh/a11y-contact-img-alt branch from e37426d to 1748296 Compare March 2, 2023 00:59
@Pytal
Copy link
Member Author

Pytal commented Mar 2, 2023

would be better to set Avatar of __name__? Or should we through away a link from avatar #36740 (comment)?

Makes sense UX-wise to have it clickable so updated the description!

@kesselb
Copy link
Contributor

kesselb commented Mar 2, 2023

image

Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal Pytal force-pushed the enh/a11y-contact-img-alt branch from 1748296 to 9d904b1 Compare March 3, 2023 21:22
@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Mar 3, 2023
@Pytal Pytal merged commit 6c79621 into master Mar 3, 2023
@Pytal Pytal deleted the enh/a11y-contact-img-alt branch March 3, 2023 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility feature: contacts menu
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants