img 元素不能加 aria-label，因其非原生支持，行为不可靠：部分读屏器跳过图像、重复朗读或忽略，W3C 明确禁止，Lighthouse 会报错；alt 才是 HTML5 强制要求的语义化替代文本机制，缺失时退化为读取无意义文件名。
img 元素上**不能用 aria-label**——它在这里无效、不可靠，且会破坏可访问性。必须用 alt 属性替代。
为什么 img 不能加 aria-label？
浏览器和屏幕阅读器对 img 的语义处理是固定的：alt 是它的原生替代文本机制，aria-label 在此场景下不被规范支持，行为因读屏器而异：有的跳过图像，有的重复朗读（先读 aria-label，再读文件名），有的直接忽略。W3C 明确指出，aria-label 不应用于 img；Lighthouse 和 Nu HTML Checker 也会报 “ARIA attribute aria-label is not allowed on this element” 错误。
-
alt是 HTML5 强制要求的属性，缺失时屏幕阅读器会退化为读取src文件名（如banner-2024.jpg），完全无意义 -
aria-label作用于“元素角色”，而img的角色就是“图像”，其可访问名称应由alt提供，不是靠覆盖角色来补救 - 若同时写
alt="公司Logo"和aria-label="首页"，部分读屏器可能只读后者，导致信息错位
img 的 alt 怎么写才真正有效？
不是“填上就行”，而是要匹配图像在上下文中的功能和目的：
- 纯装饰图（如分隔线、背景花边）→ 必须用
alt=""（空字符串），且确保该img不是链接、无title、不参与 tab 导航 - 内容图（如数据图表、产品照片）→ 用简明、信息等价的描述，例如
<img src="sales-q2.png" alt="2024年Q2销售额达¥1,280万，环比增长7%"> - 带链接的图（如 logo 跳转首页）→
alt描述链接目的，不是图像本身：<img src="logo.svg" alt="返回博客首页"> - 避免无效占位符：
alt="图片"、alt="图标"、alt="此处为图片"对视障用户毫无帮助
非 img 元素怎么模拟图像并加无障碍标签？
当不得不使用 div + CSS 背景图（比如 banner）、或内联 svg 作为图像时，才需考虑 aria-label 或 aria-labelledby：
立即学习“前端免费学习笔记（深入）”；
- 用
div贴背景图 → 加role="img"+aria-label（简单文案）或aria-labelledby（复用页面已有标题），例如：<div role="img" aria-label="欢迎来到用户控制台"></div> - 内联
svg→ 不要用aria-label，优先用<title>和<desc>（它们是 SVG 原生无障碍机制），例如：<svg><title>关闭按钮</title><path d="..." /></svg> - 绝对不要写：
<div role="img" aria-label="关闭" aria-hidden="true">——aria-hidden="true"会让整个元素对读屏器不可见，包括aria-label
验证是否真起作用？别只看代码
写了 alt 或 aria-label 不等于可访问。必须人工验证：
- 禁用 CSS 后，检查
img是否仍显示替代文本（或至少有明确视觉 fallback） - 用键盘 Tab 进入含
role="img"的容器，听 NVDA/VoiceOver 是否准确朗读aria-label内容 - 在 Chrome DevTools 的 Accessibility 面板中，选中元素，确认 “Name” 字段显示的是你设的值，而非 “null” 或 “image”
- 特别注意多语言环境：
aria-label是静态字符串，无法被 i18n 系统提取翻译；而aria-labelledby指向的 DOM 文本可随 locale 动态更新
最常被忽略的点：可访问性失效往往不是因为没加属性，而是加在了错误元素上、覆盖了已有语义、或值本身缺乏操作意图。对 img 来说，alt 是唯一正解，其他都是绕路甚至倒退。
