アバターのImgタグでalt属性が欠落しています

貢献 UX
1

サイト内の別の問題として、ユーザーがサイトのフロントページを表示できない件を調査しています。

その過程で、W3C のバリデーターを使用してサイトのソースコードを検証したところ、以下のような形式のエラーが多数返されました。

alt 属性を持たない img 要素は、aria-hidden 以外の aria-* 属性を持ってはなりません。

明らかにサイト機能を破綻させるものではないものの、いずれ整理すべきだと考えました。

申し訳ありませんが、現時点では PR を作成できる状況にありません。

「いいね！」 3
2

現在のマークアップがスクリーンリーダーに問題を引き起こすのか、それともアバターの aria-label タグから必要な情報を取得するのか、気になります。

画像に alt="" を追加すれば、バリデーターのエラーメッセージがなくなるようです。

「いいね！」 2
3

これはトピック一覧のアバターに関するものですね？空の alt 属性と値が設定された aria-label 属性を持つものが表示されています。

最新のスクリーンリーダーは aria-label を読み上げます。これはおそらく意図した動作です。ただし、古いスクリーンリーダーにも対応し、技術的に妥当な記述とするためには、aria-label の代わりに alt 属性を使用すべきです。

「いいね！」 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