空状态插图的alt属性应明确传达状态语义与操作指引，如“暂无收藏内容，请点击加号添加”，需包含可交互提示、控制在125字符内，并避免元描述词；svg需用role="img"、aria-labelledby和协同实现无障碍；多语言场景须服务端注入文案，确保ssr首屏正确。
空状态插图没加载时，alt 属性写什么才不算敷衍
纯文字描述插图内容，不是写“图片”或“图标”，更不能留空。浏览器和读屏工具会直接念出 alt 文本，用户靠它判断当前界面状态。
常见错误现象：alt="" 或 alt="empty-state" —— 这等于告诉用户“这儿有东西，但我懒得说”。实际场景中，用户可能正卡在表单提交失败、列表为空、网络断开等具体环节，需要知道“发生了什么”和“接下来能做什么”。
-
alt必须包含状态语义，比如 “暂无收藏内容，请点击加号添加” - 避免使用“图标”“插图”“图片”等元描述词，聚焦用户可见结果
- 如果插图含操作引导（如按钮、链接），
alt中需体现可交互性，例如 “点击刷新重试” - 长度控制在 125 字符内，过长会被读屏工具截断
用 <picture></picture> + fallback 实现图形降级时的文本兜底
当用 <picture></picture> 加载 SVG 或 WebP 空状态图失败，浏览器不会自动 fallback 到 alt，必须显式提供文本替代路径。
关键点在于：最后一个 <source></source> 后必须紧跟 <img>，且该 <img> 的 src 不能是无效占位符（如 data: 或 404 路径），否则 alt 仍不触发。
- 正确做法：让最终
<img src="about:blank">并设alt，或指向一个极小的透明 GIF（src="/i/px.gif"） - 错误写法：
<img src="" alt="...">—— 多数浏览器视为空src，跳过渲染，alt不显示 - 不要依赖 CSS
background-image做空状态图，它天生无alt，也无法被读屏识别
SVG 内联时如何让屏幕阅读器读出空状态说明
内联 SVG 默认不可访问，即使加了 alt 也没用 —— 因为 <svg></svg> 不支持 alt 属性。必须用 ARIA 和 <title></title> 双保险。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
只加 <title></title> 不够，部分读屏工具（如 NVDA）需配合 role="img" 和 aria-labelledby 才稳定播报。
- 必须包含
<title>暂无通知，所有消息将在此显示</title> - 外层
<svg></svg>加role="img"和aria-labelledby="唯一ID" -
<title></title>的id需与aria-labelledby值一致，例如id="empty-notify-title" - 避免用
aria-label直接写文本，它会覆盖<title></title>，失去语义结构
服务端渲染（SSR）页面中，空状态文案如何随语言环境动态切换
静态 alt 或内联 <title></title> 无法响应 locale 变化，硬编码多语言会导致 DOM 重复或翻译遗漏。
最简方案是把文案抽成 JS 对象，在 HTML 渲染前注入，再由模板填入对应字段。不推荐用 document.documentElement.lang 运行时读取，因为 SSR 页面首屏时 JS 尚未执行，读不到真实语言值。
- 服务端应根据请求头
Accept-Language或用户登录态，决定渲染哪套文案 - 示例：
<title id="empty-title">${t('no_data')}</title>，其中t()是预编译好的翻译函数 - 若用 React/Vue 等框架，确保空状态组件的
alt和<title></title>绑定到响应式 i18n state，而非初始字面量 - 注意：CDN 缓存可能污染多语言输出，需对带语言标识的 URL 或 header 做缓存键分离
真正难的不是写几行替代文本，而是想清楚——当图形消失，用户失去的到底是什么信息？是操作入口？是状态原因？还是下一步提示？这些必须在文字里补全，不能指望用户脑补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
