alt属性是html强制必需属性，缺失会导致语义“消失”：屏幕阅读器误读为“图像”或乱码，而alt=""明确声明装饰性并静默跳过；功能性图片需用动词+宾语描述动作，信息型图片须提炼关键趋势，svg图标须加aria-hidden="true"防重复播报。
alt 属性没写对，图片就等于“消失”——不是视觉上，是语义上彻底不可读。屏幕阅读器根本不会跳过它，而是读成“图片”或静默跳过，用户完全不知道页面里有张图、图是干什么的。
img 的 alt 值怎么写才不丢信息
空字符串 alt="" 和不写 alt 是两回事：前者明确告诉读屏器“这是纯装饰，忽略”；后者直接触发警告，部分工具会报错，NVDA 可能读成“图像”加一堆乱码路径。
- 功能型图片（如提交按钮里的图标）：
alt="搜索"或alt="删除该条记录"，动词+宾语，不说“图标” - 信息型图片（如数据折线图）：
alt="Q1至Q3用户活跃数持续上升，Q4回落5%；横轴为季度，纵轴为万人"，描述关键趋势和坐标含义 - 纯装饰图（背景分隔线、花边）：
alt=""，必须显式写，不能省略 - 带
figcaption的figure图：alt仍要写，但只答“图里有什么”，别和figcaption写重复内容
figure + figcaption 的 DOM 顺序不能靠 CSS 修正
很多开发者用 flex-direction: column-reverse 把 figcaption 视觉上提到图上面，但屏幕阅读器仍按 DOM 顺序先读图再读标题——用户听到“一张流程图”，然后才听到“图2：权限管理流程”，上下文全乱了。
- 正确结构必须是：
<figure><figcaption>图2：权限管理流程</figcaption><img src="..." alt="管理员、编辑、访客三级权限操作路径"></figure> -
figcaption必须是figure的第一个子元素，不能用order、grid-row或 JS 移动位置 - 如果设计强制标题在图上方，用 CSS
margin-bottom或grid-template-areas调整视觉布局，但不动 DOM 顺序
SVG 图标不加 aria-hidden="true" 会被读两遍
在按钮里嵌 SVG 时，常见错误是只加 aria-label，却忘了给 <svg></svg> 本身加 aria-hidden="true"。结果 NVDA 先读“删除”，再读一遍 SVG 的 title 或路径描述，用户听到“删除 删除”或更糟的“删除 M10 20 L30 40”。
- 所有仅作图形展示、无独立语义的 SVG，都必须加
aria-hidden="true" - 如果 SVG 本身承载信息（比如带
<title>状态异常</title>），那就别用aria-hidden，改用role="img"+aria-label统一声明 - 用
<use href="#icon-delete"></use>复用符号时，aria-hidden要加在<use></use>上，不是定义处
lang 属性漏写或写错，中文直接变“外语”
即使 alt 写得再准，如果 或 这种非标准值存在，VoiceOver 就会把“提交”读成“tí jiāo”拼音，NVDA 可能切到日文引擎读成“ていしゅつ”。这不是 bug，是 IETF 标准强制要求。
- 根语言必须写在
标签上，<meta>或局部lang无效 - 简体中文唯一有效值是
lang="zh-CN"；繁体用lang="zh-TW"，港澳用lang="zh-HK" - React/Vue SSR 输出 HTML 时，必须确保首屏
带对lang；JS 动态切换 locale 时，只更新document.documentElement.lang即可
最容易被忽略的点：alt 文本长度没有上限，但信息密度必须高；图是否该进 figure 不看大小，而看它能不能被抽离出正文逻辑——这点连 axe 插件都验不出来，得人眼判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
