Il tag Img di Avatar non ha l'attributo alt

Contribuisci UX
1

Sto indagando su un utente che non riesce a visualizzare la pagina principale del sito (un problema diverso).

Nel farlo, ho sottoposto il codice sorgente del mio sito al validatore del W3C. Questo ha restituito molti errori del tipo:

Un elemento img senza l'attributo alt non deve avere attributi aria-* diversi da aria-hidden.

Sebbene ovviamente non sia un problema che blocca il sito, ho pensato che andrebbe sistemato prima o poi.

Mi dispiace, al momento non sono nella posizione di creare una PR.

3 Mi Piace
2

Sono curioso di sapere se il markup attuale causerà problemi agli screen reader o se questi estrarranno le informazioni necessarie dall’attributo aria-label dell’avatar.

Sembra che aggiungere alt="" all’immagine rimuova il messaggio di errore dal validatore.

2 Mi Piace
3

Questo è per gli avatar nell’elenco degli argomenti, immagino? Quelli che vedo con un alt vuoto e un aria-label compilato.

Secondo quanto riportato su `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

I lettori di schermo più recenti leggeranno l’aria-label, il che, a mio avviso, è proprio l’intenzione. Dovremmo però utilizzare alt invece di aria-label, poiché ciò coprirà anche i lettori di schermo più datati e sarà tecnicamente valido.

3 Mi Piace
4

Per la SEO, specialmente per Google, sarebbe molto positivo se l’attributo alt per gli avatar potesse essere compilato con lo stesso testo utilizzato attualmente per l’attributo title.

È possibile farlo autonomamente in qualche modo?

Sto cercando di farlo modificando questo codice:
{{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>

Ma sembra non esserci modo di aggiungere un tag all’immagine modificando solo il template Handlebars.

Qualche idea?

3 Mi Piace