Skip to content

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

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

6 participants