Tag de Imagem do Avatar sem atributo alt

Contribuir Experiência do Usuário
1

Estou investigando um usuário que não consegue ver a página inicial do site (um problema diferente).

Ao fazer isso, executei o código-fonte do meu site no validador do W3. Isso retornou vários erros no seguinte formato:

Um elemento img sem atributo alt não deve ter nenhum atributo aria-* além de aria-hidden.

Embora, obviamente, não quebre o site, achei que deveria ser organizado em algum momento.

Desculpe, não estou em condições de produzir um PR no momento.

3 curtidas
2

Tenho curiosidade se a marcação atual causará algum problema para leitores de tela ou se eles obterão as informações necessárias da tag aria-label do avatar?

Parece que adicionar alt="" à imagem removeria a mensagem de erro do validador.

2 curtidas
3

Isso é para os avatares na lista de tópicos, suponho? São aqueles que vejo com alt vazio e aria-label preenchido.

De acordo com este `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

Os leitores de tela mais recentes lerão o aria-label, o que acredito ser nossa intenção ali. No entanto, devemos usar alt em vez de aria-label, pois isso cobrirá leitores de tela mais antigos e será tecnicamente válido.

3 curtidas
4

Para SEO, especialmente o Google, seria muito bem-vindo se o atributo alt dos avatares pudesse ser preenchido com o mesmo texto usado atualmente no atributo title.

É possível fazer isso por conta própria de alguma forma?

Estou tentando fazer assim, editando o {{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>

Mas parece não haver como adicionar uma tag à imagem editando o Handlebars.

Alguma ideia?

3 curtidas