img的alt属性是规范中的可选属性？如何统一设置img 标签的alt属性

灵扁扁
2,026 阅读2分钟

img的alt属性是规范中的可选属性？如何统一设置img 标签的alt属性

1.需求分析：

一个老项目上线挺久了，leader突然说项目代码中的img标签的没有写alt属性且没附上合理的值，要全部补上，不上值是可以的，但个性化合理性的给每个img标签的alt属性附上不同的合理值就很麻烦了，最终经过一番讨论，需求变为只要给没有写alt值的img标签，统一设置为alt=“图片”即可。

从更规范的角度讲，img标签的alt属性应该是必写属性，因为网速差的情况实际上遇到概率不小，作为一个程序员，我常常关注网速查时，各大程序是什么表现。尤其是在移动端，网络不稳定的情况更加容易出现，因此alt应当作为必写属性来对待。

img标签的alt的作用：

当图像无法正常显示时（网速太慢，src 属性中的值错误，浏览器禁用图像，用户使用的是屏幕阅读器等情况），浏览器将显示alt上的替代文本。这会使得人机交互体验更好，提升用户体验。

注意alt和title的区别：title是在悬浮时展示的提示文字，alt是在图像无法正常显示时展示的提示文字，此外title是许多html标签都有的属性，而alt是img标签的特殊属性。当然在低版本ie浏览器中，鼠标悬浮也会显示alt的文字。

2.实现思路梳理：

1.一种实现方式是，全局检索代码，一个个给还没有alt值的img标签补上。

2.另一种是通过全局捕获img标签，遍历img标签，给没有alt值为空的补上值。

正经img标签写法应该是这样：

<img src="./cover.png" alt="封面.png"/>

注意：

1.在 vue 等单页应用种，应注意此时 img 标签是否已渲染完成，可通过结合监听路由等方式处理，及时获取到 img 标签从而修改不同路由页面的 img 标签 alt 属性。路由不变化的应从变化时机切入处理。

2.由于 img 标签的渲染完成时机不好判断，这里使用了定时器结合 nextTick。

3.实现方案

示例1 vue中使用

  // ...
  Vue.nextTick(() => {
    setTimeout(() => {
      const imgs = document.getElementsByTagName('img')
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].alt = '图片' + i
      }
    }, 2000)
  })
})

示例2 在 html 中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统一设置 image 标签的 alt 属性</title>
</head>
<body>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3310461438,2025055068&fm=179&app=35&f=GIF?w=124&h=32&s=EEE3A256EC4383301C9B9FFA0300D03D">
<img src="favicon.ico" alt="已有图片提示"/>
<img src="http://14.23.44.50:8019/kbase/file/picPreview?id=740&isCompress=true"/>
<img src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"/>

<script>
  window.onload = function () {
    const imgs = document.getElementsByTagName('img')
    for (let i = 0; i < imgs.length; i++) {
      if (!imgs[i].alt) {
        imgs[i].alt = '图片' + i
      }
    }
  }
</script>
</body>
</html>
avatar
文章
阅读
粉丝