alt属性是html5强制必需属性，非可选补充；缺失会导致屏幕阅读器误读或跳过，alt=""仅适用于纯装饰图，信息图须用简洁准确的描述性文字，长度宜控于125字符内。
alt 属性不是“可选描述”，而是必须提供的语义信息
不写 alt 或留空（alt=""）会直接导致屏幕阅读器跳过图片，对视障用户等于丢失内容。关键判断标准只有一条：这张图在页面中承担的是「信息性」还是「装饰性」功能。
什么时候该用 alt="描述性文字"？
只要图片传递了不可被周围文字替代的信息，就必须写有意义的 alt。常见场景包括：
- 商品主图：
alt="黑色棉质圆领T恤，胸前印有白色几何线条图案" - 数据图表截图：
alt="2025年Q2各地区销售额柱状图：华东最高（¥247万），西北最低（¥89万）" - 带操作含义的图标按钮：
alt="删除此收货地址"（不能只写“垃圾桶图标”） - 头像图（非纯装饰）：
alt="张伟，前端工程师，上海办公室"
注意：避免堆砌关键词、不写“图片”“图标”等冗余词，不使用句号结尾（除非是完整句子且上下文需要）。
什么时候该用 alt=""？
仅当图片纯粹用于排版、视觉分隔或已有相同语义的文字说明时，才可为空。例如：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 纯装饰性分割线（
<img src="divider.png" alt="">） - 重复展示的 logo，且旁边已有
<h1>公司名称</h1> - 背景图已用 CSS 实现，HTML 中仅为占位（但更推荐直接用 CSS 背景，不用
<img>）
容易踩的坑：把带链接的 icon 写成 alt="" 却没给父 <a></a> 加 aria-label，结果屏幕阅读器完全读不出链接意图。
alt 文字长度和语义优先级怎么平衡？
没有硬性字数限制，但需服从「用户能快速理解用途」原则。实操建议：
- 普通内容图控制在 125 字符内（多数屏幕阅读器在此截断）
- 复杂图表优先概括结论，再补充关键数据点，而非复述全部坐标轴细节
- 避免用「点击此处查看大图」这类行为提示——交互方式应由元素本身（如
<a></a>或<button></button>）表达，不是alt的职责 - 中文无需空格分词，但标点要准确；英文单词间必须有空格
最常被忽略的一点：SVG 内嵌图标如果用 <img> 引入，alt 有效；但如果用 <svg><use></use></svg> 方式，则必须用 <title></title> + aria-hidden="false" 组合来实现等效替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
