alt属性必须直接写在标签内，仅当图片纯装饰或相邻文本已完整覆盖图意时可用alt=""，svg需用并加role="img"，动态渲染须防undefined导致alt失效。

alt 属性必须写在 <img> 标签里，不能靠外部包裹元素补

很多人误以为给 @#@#@#@#@#@#@#@#@#@0 —— 没写 alt，读屏器会朗读“链接，图片”，用户完全不知道是什么
@#@#@#@#@#@#@#@#@#@1 —— alt 被加在 <a></a> 上，对图片无效

• 正确写法只有一种：<img>
• 如果图片是链接，alt 应说明链接目的，比如 alt="返回首页"，而不是仅描述图像
• 服务端渲染或静态 HTML 中漏写 alt 很容易被发现；JS 动态插入时更易出错，需确保每个 new Image() 或 createElement('img') 都显式设置 alt

空字符串 alt="" 不是“省事”，而是有严格前提

alt="" 合法，但只适用于两类情况：图片纯装饰（如分隔线、背景花边），或已有相邻文本完整覆盖图意（比如图紧跟一段含所有关键信息的段落）。其他任何情况都算违规。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 错误：<img src="logo.png"> —— 图表含数据，哪怕旁边有标题“Q2销售趋势”，也得在 alt 里简述核心结论，如 alt="Q2销售额达120万元，环比增长8%"
• 错误：<img src="logo.png"> —— 搜索图标功能明确，应写 alt="搜索" 或 alt="输入关键词进行搜索"
• SVG 内嵌图不支持 alt 属性，得用 <title></title> + <desc></desc>，且父容器要加 role="img" 才能被读屏器识别

动态渲染场景下，alt 容易变成 undefined 或空字符串

React、Vue 或原生 JS 渲染列表图片时，alt 常因状态未就绪、条件分支遗漏或变量未定义而失效。例如 Vue 模板中写 <img src="logo.png" alt="公司名称">，一旦 item.desc 是 null 或 undefined，最终生成的就是 alt="undefined" 或 alt=""，比没写还糟。

• 建议 fallback：Vue 中用 :alt="item.desc || '图片描述缺失'"，React 中用 alt={item.desc ?? '图片描述缺失'}
• 服务端渲染（SSR）时，确保模板引擎传入的 alt 字段非空，必要时后端做兜底
• 检查 DevTools 的 Elements 面板，直接看生成的 <img src="chart.png" alt=""> 标签是否真有 alt 属性及其值，别只信 JS 变量名

含文字的截图、海报类图片，alt 必须完整转录可读内容

如果图片里有文字（比如错误提示截图、活动海报、产品参数表），alt 文本就得把所有关键文字抄进去，一个字都不能省——这不是“重复”，而是让无法看图的人获得同等信息。

• 示例：<img src="icon-search.png" alt="">
• 避免堆砌关键词：alt="404 error not found page website broken" 违反 WCAG，读屏器念出来毫无逻辑
• 不要用文件名替代描述：alt="error-404-screenshot-v2.png" 对用户毫无意义

真正难的不是写 alt，而是判断这张图对当前上下文到底承载什么信息——是功能按钮？数据呈现？情绪传达？还是纯粹视觉装饰？这个判断错了，后面所有操作都是徒劳。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！