出现Images must have alternate text: Element has no title attribute警告是什么意思？

该警告是浏览器/开发工具内置的无障碍校验规则触发的提示，要求所有<img>标签必须配置替代文本。这类替代文本的作用有两个：

• 供屏幕阅读器等无障碍辅助设备识别图片内容，给视障用户正常传递信息
• 当图片资源加载失败时，页面上会展示替代文本，让普通用户也能了解图片对应的功能/内容

你提供的代码<img src="./img/twitter.png">仅配置了图片资源地址，缺少alt属性，因此触发了警告。

根据图片的实际用途选择对应方案即可：

• 图片有实际业务含义（比如你这个是Twitter跳转图标）
  给标签增加alt属性，填入和图片功能匹配的描述即可，这是符合W3C规范的最优方案：

<img src="./img/twitter.png" alt="Twitter跳转图标">

如果需要鼠标悬浮在图片上时展示额外提示，可以同时配置title属性：

<img src="./img/twitter.png" alt="Twitter跳转图标" title="点击访问官方Twitter主页">

• 图片是纯装饰性元素，没有实际信息传递价值
  直接将alt属性设为空值即可，会被辅助设备自动忽略，不会影响无障碍评分：

<img src="./img/twitter.png" alt="">

注意：不要给有实际意义的图片填写无意义的alt值（如“图片”“占位图”等），这类填写方式反而会降低无障碍体验。

内容的提问来源于stack exchange，提问作者m-naeem66622