img标签必须加alt属性，纯装饰图用alt=""，内容图需信息等价描述，带链接图alt应说明链接目的；非img元素用role="img"+aria-label；内联svg用和；须人工测试播报效果。
img 标签必须加 alt 属性，空值不是不写
不加 alt 或写成 alt="" 但没理由省略，是可访问性最常翻车的点。屏幕阅读器遇到无 alt 的 <img alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" >，会读出文件名或路径（比如 banner-2024.jpg），用户完全无法理解上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯装饰图：用
alt=""（空字符串），且确保该图在 DOM 中不传递语义——不能是链接、不能有title、不能参与 tab 键导航 - 内容图：用简明、信息等价的文本描述，比如
<img src="chart.png" alt="2024年Q1销售额同比增长12%"> - 带链接的图：
alt描述链接目的，而非图片本身，例如<a href="/blog"><img src="logo.svg" alt="返回博客首页"></a> - 避免
alt="图片"、alt="图标"这类无效占位符——对视障用户毫无意义
role="img" 和 aria-label / aria-labelledby 怎么选
role="img" 是给非 <img alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" > 元素“伪装”成图像用的，比如用 <div> + CSS 背景图实现 banner。但它本身不解决替代文本问题，必须配合 <code>aria-label 或 aria-labelledby。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用真实
<img alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" >标签，它原生支持alt，语义清晰、兼容性好 - 不得已用
<div> 贴背景图时，加 <code>role="img"+aria-label（简单文本）或aria-labelledby="id"（复用页面已有标题） - 别同时写
role="img"和alt：HTML5 规范里<img alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" >不允许设role，浏览器可能忽略或报错 - 注意：CSS
background-image无法被爬虫和屏幕阅读器识别，纯靠 ARIA 补救是下策 - 内联 SVG 必须包含
<title></title>（短标题）和/或<desc></desc>（补充说明），二者都应放在<svg></svg>开始后、其他图形元素前 - 给
<svg></svg>加aria-hidden="true"仅当它是纯装饰；否则加role="img"并确保<title></title>存在 - 外部 SVG（
<img src="icon.svg" alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" >）可以且应该用alt，跟普通图片一样处理 - 动态生成的 SVG（如 D3 渲染图表）容易漏掉
<title></title>，上线前务必用屏幕阅读器实测关键图表 - 用 VoiceOver（macOS/iOS）或 NVDA（Windows）手动 tab 导航 + 听读，重点检查图像出现在链接、表单、数据可视化中的实际播报内容
- 禁用 CSS 后看页面是否仍保有图像语义（比如背景图消失后，关键信息是否还在）
- 团队内做“盲听测试”：让同事闭眼操作，只靠语音反馈判断能否完成核心任务
- 特别注意响应式场景：小屏隐藏的图片，如果用
display: none会自动被排除；但用visibility: hidden或opacity: 0仍会被读出，需加aria-hidden="true"
SVG 图像的可访问性处理更麻烦
内联 SVG（<svg></svg> 直接写在 HTML 里）不像 <img src="x.svg" alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" > 那样能用 alt，必须靠 <title></title> 和 <desc></desc> 元素，且顺序、位置、父容器 role 都影响读取效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
测试时别只信 Lighthouse 或 axe 插件
自动化工具能抓 alt 缺失、role 滥用等硬性错误，但判断不了描述是否准确、冗余或偏离上下文。比如一张“提交按钮”的图标写 alt="箭头"，工具不会报错，但用户完全不知道功能。
实操建议：
立即学习“前端免费学习笔记（深入）”；
图像可访问性最难的不是语法，而是每次加图前多问一句：“如果看不见，用户还能知道这是什么、为什么在这儿、接下来该做什么吗？”——这个判断没法交给工具，只能人来把关。
