img标签必须设alt属性，空alt=""表示图片无文字等效内容，适用于装饰性图片；承载信息的图片需提供简明准确的替代文本，长度建议≤125字符；srcset不影响alt设置逻辑；CSS背景图、SVG、JS插入图片需额外保障无障碍支持。

img 标签必须设 alt 属性，否则屏幕阅读器无法传达图片信息，这是 WCAG 2.1 最基本的 A 级要求。空 alt="" 不等于没写，而是明确告诉辅助技术“这张图无文字等效内容”，该用还是得用——关键在判断“要不要读”。

什么时候用空 alt=""

装饰性图片、仅起视觉分隔作用的 icon、重复展示相同信息的背景图（如 CSS 伪元素生成的装饰点）都属于“对理解内容或功能无实质贡献”的类型。此时必须写 alt=""，不能省略，也不能填“图片”“图标”这类无意义描述。

• 省略 alt 会让屏幕阅读器强行读出文件名或路径（如 icon-arrow-right.svg），造成干扰
• 写 alt="箭头" 或 alt="装饰线条" 反而增加认知负担，违背无障碍原则
• 如果图片是链接或按钮的一部分，且已有相邻文本说明功能（如“搜索”按钮旁的放大镜图），优先确保按钮本身有可访问的文本标签，图片仍应 alt=""

什么时候要写有意义的 alt 文本

只要图片承载独立信息（非纯装饰）、影响用户理解上下文或操作逻辑，就必须提供简明、准确、上下文相关的替代文本。长度通常控制在 125 字符以内，避免冗长。

• 信息图中的关键数据点需提炼，不是照搬图中所有文字（例如：图中显示“Q3 销售增长 23%”，alt 写“第三季度销售额同比增长 23%”即可）
• 照片类图片强调人物、动作、场景关系，而非“一张人像照片”这种废话（例如：alt="开发者在双屏前调试代码，左侧屏幕显示终端日志，右侧为 React 组件树"）
• 图表若复杂，alt 只做概要，再配合 longdesc 属性或邻近的详细描述段落（注意：longdesc 支持度有限，更推荐用
  + 关联 aria-describedby）

响应式图片和 srcset 下的 alt 怎么处理

srcset 和 sizes 不影响 alt 的设置逻辑——无论浏览器加载哪张源图，语义上它仍是同一张图，所以只需一个 alt 值，写在 标签上即可，不需要为每张候选图单独配 alt。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 错误做法： → “小猫”太模糊，未说明行为或上下文
• 正确做法：
• 如果使用 切换完全不同的图（如桌面版是信息图，移动端换成简化图标），那它们语义不同，应分别设置对应 alt，并确保每个 对应的 都有合理值

容易被忽略的陷阱：CSS 替换图、SVG 和 background-image

alt 只对 HTML 生效。用 CSS background-image 加载的图、内联 、或通过 JS 动态插入的 若没手动加 alt，就等于没有无障碍支持。

• CSS 背景图：无法加 alt，只能转为 或用 aria-label/aria-labelledby 补充语义（但不如原生 alt 可靠）
• 内联 SVG：需添加 （用于图形描述）和 role="img" + aria-labelledby="title-id"，否则多数屏幕阅读器直接跳过
• JS 插入的图片：务必在插入 DOM 同时设置 alt，不要依赖后置脚本补全，否则首屏渲染时已错过无障碍时机

最常出问题的不是不会写 alt，而是凭直觉判断“这图不重要”。实际要问：如果关闭图片，用户能否不丢失关键信息、不误解操作意图、不卡在某个步骤？答案是否定的，就得认真写。

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