La balise img Avatar manque l'attribut alt

Contribuer UX
1

Je suis en train d’enquêter sur un utilisateur qui ne peut pas voir la page d’accueil du site (un problème différent).

En faisant cela, j’ai soumis le code source de mon site au validateur du W3C. Cela a renvoyé de nombreuses erreurs de la forme suivante :

Un élément img sans attribut alt ne doit avoir aucun attribut aria-* autre que aria-hidden.

Bien que cela ne rompe évidemment pas le site, je pense que cela devrait être nettoyé à un moment donné.

Désolé, je ne suis pas en mesure de produire une PR pour le moment.

3 « J'aime »
2

Je me demande si le balisage actuel posera un problème pour les lecteurs d’écran, ou s’ils récupéreront les informations nécessaires depuis l’attribut aria-label de l’avatar ?

Il semble que l’ajout de alt="" à l’image supprimerait le message d’erreur du validateur.

2 « J'aime »
3

Ceci concerne les avatars dans la liste des sujets, je suppose ? Ce sont ceux que je vois avec un attribut alt vide et un attribut aria-label rempli.

Selon cette source `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

Les derniers lecteurs d’écran liront l’attribut aria-label, ce qui, je pense, correspond à notre intention. Cependant, nous devrions utiliser alt plutôt que aria-label, car cela couvrira les lecteurs d’écran plus anciens et sera techniquement valide.

3 « J'aime »
4

Pour le référencement, en particulier Google, ce serait très bienvenu si l’attribut alt des avatars pouvait être rempli avec le même texte que celui actuellement utilisé pour l’attribut title.

Est-il possible de le faire soi-même ?

J’essaie de procéder ainsi en modifiant {{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>

Mais il semble impossible d’ajouter une balise à l’image en modifiant simplement le Handlebars.

Une idée ?

3 « J'aime »