Avatar Img tag missing alt attribute

UX
1

I’m investigating a user who can’t see the site’s front page (a different issue).

In doing so, I ran my site’s source through the w3’s validator. This returned many errors of the form:

An img element with no alt attribute must not have any aria-* attributes other than aria-hidden.

While obviously not site breaking, I thought it should be tidied up at some point.

Sorry, I’m not in a position to produce a PR at this time.

3 Likes
2

I’m curious if the current markup will cause an issue for screenreaders, or if they will pull in the needed information from the avatar’s aria-label tag?

It looks like adding alt="" to the image would remove the error message from the validator.

2 Likes
3

This is for the avatars in the topic list I assume? those are the ones that I see with an empty alt and filled aria-label

According to this `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

The latest screen readers will read the aria-label, which I think is our intention there. We should use alt instead of aria-label though, because that will cover older screen readers and be technically valid.

3 Likes
4

For SEO, especially Google, it will be very welcoming if the alt attribute for the avatars could be filled with the same text that is now used for the title attribute.

Is it somehow possible to do this myself?

I’m trying to do it like this and edit the {{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}:

<script type="text/x-handlebars" data-template-name="list/posters-column.hbr">
<td class='posters'>
{{#each posters as |poster|}}
  {{#if poster.moreCount}}
    <a class="posters-more-count">{{poster.moreCount}}</a>
  {{else}}
    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
  {{/if}}
{{/each}}
</td>
</script>

But there seems to be no way to add a tag to the image with editing the handlebars.

Any idea?

3 Likes