Avatar Img 标签缺少 alt 属性

贡献 用户体验
1

我正在调查一名无法查看网站首页的用户（这是一个不同的问题）。

在此过程中，我使用 W3C 验证器检查了我网站的源代码。这返回了许多如下形式的错误：

没有 alt 属性的 img 元素不得包含任何 aria-* 属性，aria-hidden 除外。

虽然这显然不会导致网站无法运行，但我认为应该找时间进行整理。

抱歉，我目前无法提交 PR。

3 个赞
2

我想知道当前的标记是否会导致屏幕阅读器出现问题，或者它们是否会从头像的 aria-label 标签中提取所需信息？

看起来给图片添加 alt="" 可以消除验证器中的错误提示。

2 个赞
3

我猜这是针对主题列表中的头像吧？那些头像的 alt 属性为空，而 aria-label 属性有值。

根据 `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility 的信息，最新的屏幕阅读器会朗读 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 个赞