HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】

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 图像的可访问性处理更麻烦

内联 SVG（<svg></svg> 直接写在 HTML 里）不像 <img src="x.svg" alt="HTML怎么设置图像ARIA标签_HTML accessibility增强教程【可访】" > 那样能用 alt，必须靠 <title></title> 和 <desc></desc> 元素，且顺序、位置、父容器 role 都影响读取效果。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 内联 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>，上线前务必用屏幕阅读器实测关键图表

测试时别只信 Lighthouse 或 axe 插件

自动化工具能抓 alt 缺失、role 滥用等硬性错误，但判断不了描述是否准确、冗余或偏离上下文。比如一张“提交按钮”的图标写 alt="箭头"，工具不会报错，但用户完全不知道功能。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用 VoiceOver（macos/ios）或 NVDA（windows）手动 tab 导航 + 听读，重点检查图像出现在链接、表单、数据可视化中的实际播报内容
• 禁用 CSS 后看页面是否仍保有图像语义（比如背景图消失后，关键信息是否还在）
• 团队内做“盲听测试”：让同事闭眼操作，只靠语音反馈判断能否完成核心任务
• 特别注意响应式场景：小屏隐藏的图片，如果用 display: none 会自动被排除；但用 visibility: hidden 或 opacity: 0 仍会被读出，需加 aria-hidden="true"

图像可访问性最难的不是语法，而是每次加图前多问一句：“如果看不见，用户还能知道这是什么、为什么在这儿、接下来该做什么吗？”——这个判断没法交给工具，只能人来把关。