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支持度有限，更推荐用<figure><figcaption></figcaption></figure>+ 关联aria-describedby）
响应式图片和 srcset 下的 alt 怎么处理
srcset 和 sizes 不影响 alt 的设置逻辑——无论浏览器加载哪张源图，语义上它仍是同一张图，所以只需一个 alt 值，写在 <img alt="HTML怎么做可访问图片_html img alt属性无障碍设置【汇总】" > 标签上即可，不需要为每张候选图单独配 alt。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
<img src="cat-small.jpg" srcset="cat-small.jpg 480w, cat-large.jpg 1024w" alt="小猫">→ “小猫”太模糊，未说明行为或上下文 - 正确做法：
<img src="cat-sleeping.jpg" srcset="cat-sleeping-sm.jpg 480w, cat-sleeping-lg.jpg 1024w" alt="橘猫蜷在窗台晒太阳，耳朵微抖"> - 如果使用
<picture></picture>切换完全不同的图（如桌面版是信息图，移动端换成简化图标），那它们语义不同，应分别设置对应alt，并确保每个<source></source>对应的<img alt="HTML怎么做可访问图片_html img alt属性无障碍设置【汇总】" >都有合理值
容易被忽略的陷阱：CSS 替换图、SVG 和 background-image
alt 只对 HTML <img alt="HTML怎么做可访问图片_html img alt属性无障碍设置【汇总】" > 生效。用 CSS background-image 加载的图、内联 <svg></svg>、或通过 JS 动态插入的 <img alt="HTML怎么做可访问图片_html img alt属性无障碍设置【汇总】" > 若没手动加 alt，就等于没有无障碍支持。
- CSS 背景图：无法加
alt，只能转为<img alt="HTML怎么做可访问图片_html img alt属性无障碍设置【汇总】" >或用aria-label/aria-labelledby补充语义（但不如原生alt可靠） - 内联 SVG：需添加
<title></title>（用于图形描述）和role="img"+aria-labelledby="title-id"，否则多数屏幕阅读器直接跳过 - JS 插入的图片：务必在插入 DOM 同时设置
alt，不要依赖后置脚本补全，否则首屏渲染时已错过无障碍时机
最常出问题的不是不会写 alt，而是凭直觉判断“这图不重要”。实际要问：如果关闭图片，用户能否不丢失关键信息、不误解操作意图、不卡在某个步骤？答案是否定的，就得认真写。
