# Avatar Img tag missing alt attribute

**URL:** https://meta.discourse.org/t/avatar-img-tag-missing-alt-attribute/183507
**Category:** UX
**Created:** [March 17, 2021, 10:39am UTC](https://meta.discourse.org/t/avatar-img-tag-missing-alt-attribute/183507 "2021-03-17T10:39:37Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Alexander\_Wright](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexander_wright/32/119518_2.png) [@Alexander\_Wright](https://meta.discourse.org/u/Alexander_Wright)
#### Post date: [March 17, 2021, 10:39am UTC](https://meta.discourse.org/t/avatar-img-tag-missing-alt-attribute/183507/1 "2021-03-17T10:39:37Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [March 17, 2021, 11:39pm UTC](https://meta.discourse.org/t/avatar-img-tag-missing-alt-attribute/183507/2 "2021-03-17T23:39:02Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 18, 2021, 3:04am UTC](https://meta.discourse.org/t/avatar-img-tag-missing-alt-attribute/183507/3 "2021-03-18T03:04:35Z")

</div>

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](https://www.powermapper.com/tests/screen-readers/labelling/img-null-alt-aria-label/)

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.

---

<div class="post-metadata">

### Author: ![JoshuaH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshuah/32/209433_2.png) [@JoshuaH](https://meta.discourse.org/u/JoshuaH)
#### Post date: [June 30, 2021, 10:12am UTC](https://meta.discourse.org/t/avatar-img-tag-missing-alt-attribute/183507/4 "2021-06-30T10:12:58Z")

</div>

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"}}`:

```plaintext
<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?