У тега изображения аватара отсутствует атрибут alt

Внести вклад UX
1

Я расследую проблему пользователя, который не видит главную страницу сайта (это другая проблема).

В ходе расследования я прогнал исходный код своего сайта через валидатор W3C. Это вернуло множество ошибок следующего вида:

Элемент img без атрибута alt не должен иметь никаких атрибутов aria-*, кроме aria-hidden.

Хотя это, очевидно, не ломает сайт, я считаю, что это стоит поправить в ближайшее время.

Извините, но сейчас я не могу подготовить pull request.

3 лайка
2

Мне интересно, вызовет ли текущая разметка проблемы для программ чтения с экрана или они извлекут необходимую информацию из тега aria-label аватара?

Кажется, что добавление alt="" к изображению уберет сообщение об ошибке из валидатора.

2 лайка
3

Это, я полагаю, для аватаров в списке тем? Именно они отображаются с пустым атрибутом alt и заполненным aria-label.

Согласно этой статье,

современные программы чтения с экрана читают содержимое атрибута aria-label, что, как я понимаю, и является нашей целью. Однако нам следует использовать alt вместо aria-label, так как это обеспечит поддержку старых программ чтения с экрана и будет технически корректным.

3 лайка
4

Для SEO, особенно для Google, было бы очень полезно, если бы атрибут alt для аватаров заполнялся тем же текстом, который сейчас используется для атрибута title.

Можно ли сделать это самостоятельно?

Я пытаюсь сделать это следующим образом, редактируя {{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>

Но, похоже, нет способа добавить тег к изображению, редактируя только Handlebars.

Есть какие-нибудь идеи?

3 лайка