Etiqueta de imagen de Avatar sin atributo alt

Contribuir UX
1

Estoy investigando a un usuario que no puede ver la página principal del sitio (un problema diferente).

Al hacerlo, ejecuté el código fuente de mi sitio en el validador del W3C. Esto devolvió muchos errores de la siguiente forma:

Un elemento img sin el atributo alt no debe tener ningún atributo aria-*, excepto aria-hidden.

Aunque obviamente no rompe el sitio, pensé que debería arreglarse en algún momento.

Lo siento, en este momento no estoy en condiciones de generar un PR.

3 Me gusta
2

Me pregunto si el marcado actual causará problemas para los lectores de pantalla o si extraerán la información necesaria de la etiqueta aria-label del avatar.

Parece que agregar alt="" a la imagen eliminaría el mensaje de error del validador.

2 Me gusta
3

Esto es para los avatares en la lista de temas, ¿verdad? Esos son los que veo con un alt vacío y un aria-label relleno.

Según esto `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

Los lectores de pantalla más recientes leerán el aria-label, lo cual creo que es nuestra intención allí. Sin embargo, deberíamos usar alt en lugar de aria-label, ya que eso cubrirá los lectores de pantalla más antiguos y será técnicamente válido.

3 Me gusta
4

Para el SEO, especialmente para Google, sería muy beneficioso que el atributo alt de los avatares se completara con el mismo texto que se usa actualmente para el atributo title.

¿Es posible hacerlo yo mismo de alguna manera?

Estoy intentando hacerlo editando {{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}} de la siguiente manera:

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

Pero parece que no hay forma de agregar una etiqueta a la imagen editando el Handlebars.

¿Alguna idea?

3 Me gusta