HTML图片alt属性怎么设置无障碍？

HTML图片的alt属性是网页无障碍访问的基石，必须为每个img标签正确设置：空alt=""明确标识装饰性图片以避免干扰，而承载信息的图片则需提供简明准确、上下文相关的替代文本（建议≤125字符）；srcset不影响alt逻辑，但CSS背景图、SVG和JS插入图片等非标准用法需通过aria属性或结构优化另行保障可访问性——真正关键的不是技术实现，而是始终以用户为中心发问：关掉图片，用户还能完整理解内容、顺利执行操作吗？

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 支持度有限，更推荐用

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

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

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

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

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

• CSS 背景图：无法加 alt，只能转为 或用 aria-label/aria-labelledby 补充语义（但不如原生 alt 可靠）
• 内联 SVG：需添加