Fix: Add missing alt text to avatar images (#12707)#12721
Conversation
There was a problem hiding this comment.
Pull request overview
Adds missing alt attributes to profile avatar <img> elements in account templates to address WCAG/WAVE accessibility violations on bookshelf and follows pages.
Changes:
account/view.html: Addsalt="$mb.username"to the avatar image used as the sole content of an<a>(avoids an “empty link” / missing alt issue).account/follows.html: Addsalt=""to avatar images when the username text is already present in the same link (treats the image as decorative to avoid redundant announcements).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| openlibrary/templates/account/view.html | Adds meaningful alt text to the linked avatar image in the account breadcrumb/header. |
| openlibrary/templates/account/follows.html | Marks follower/following avatar images as decorative via empty alt where adjacent link text already provides the label. |
|
Thanks for the contribution! @lokesh is assigned to this PR and currently has:
PR triage checklist (maintainers / Pam)
Note This comment was automatically generated by Pam, Open Library's Project AI Manager, on behalf of @mekarpeles. Pam is designed to provide status visibility, perform basic project management functions and relevant codebase research, and provide actionable feedback so contributors aren't left waiting. |
| $# Only show breadcrumbs when we're not on mybooks | ||
| <div class="account-breadcrumb"> | ||
| <a href="$mb.user.key" class="username-avatar"><img src="$(mb.user.key)/avatar" class="account-avatar"></a> | ||
| <a href="$mb.user.key" class="username-avatar"><img src="$(mb.user.key)/avatar" class="account-avatar" alt="$mb.username"></a> |
There was a problem hiding this comment.
The avatar is decorative here. The name is already accessible in the link. Let's avoid a duplicate announcement by doing an empty alt="" here.
There was a problem hiding this comment.
@lokesh So, I tried that approach as well before using wave tool this is the case:
so adding alt with username :
getting a redundent text alert, if using alt="" the case is again error missing alternative text :
Update account avatar image alt attribute to be empty as avatar is decorative
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
| $# Only show breadcrumbs when we're not on mybooks | ||
| <div class="account-breadcrumb"> | ||
| <a href="$mb.user.key" class="username-avatar"><img src="$(mb.user.key)/avatar" class="account-avatar"></a> | ||
| <a href="$mb.user.key" class="username-avatar"><img src="$(mb.user.key)/avatar" class="account-avatar" alt=""></a> |
There was a problem hiding this comment.
WCAG 2.4.4, WCAG 4.1.2: Link has no discernible text.
Links must have discernible text via content, aria-label, or aria-labelledby.
Details
href: $mb.user.key
Parent text: $mb.username ›
Screen reader users need to know where a link goes. Add descriptive text content, aria-label, or use aria-labelledby. For image links, ensure the image has alt text describing the link destination. Avoid generic text like 'click here' or 'read more'—link text should make sense out of context.
|
@lokesh can you please review this once |
github-actions
Bot
added
the
Needs: Response
lokesh
left a comment
lokesh
left a comment
There was a problem hiding this comment.
Suggesting one tweak — see inline comment.
Closes #
Closes #12707
[fix] Adds missing alt text to avatar images on account/bookshelf pages to improve accessibility and resolve WCAG validation errors.
Technical
As discussed in the issue comments, I applied two different accessibility treatments based on the HTML context:
account/view.html: The avatar image is the only content inside its<a>tag. To prevent an "Empty Link" / missingaltattribute error, I added a descriptive alt attribute (alt="$mb.username").account/follows.html: The avatar image is adjacent to the username text inside the exact same link. To prevent redundant screen reader announcements (reading the username twice), I marked the image as decorative by adding an empty alt attribute (alt=""). This answers Pam's question from the issue thread.Testing
http://localhost:8080/people/openlibrary/books).alt="[username]".http://localhost:8080/people/openlibrary/following).alt="".Screenshot
works fine and removes the violation:
Stakeholders
@lokesh