alt是html中唯一被规范强制要求且具备真正降级能力的图片属性，因它在图像加载失败时渲染为占位内容、供屏幕阅读器朗读、被搜索引擎解析语义；其他属性如title、loading等均不承担此核心职责。
alt 是 HTML 中唯一被规范强制要求、且具备明确降级能力的图片属性。其他如 title 或 loading 都不构成真正意义上的“降级”——它们不参与可访问性回退，也不在图像加载失败时替代呈现。
为什么只有 alt 算降级属性？
浏览器加载 <img> 失败（路径错、404、跨域拦截、禁用图片）时，会把 alt 文本直接渲染为占位内容；屏幕阅读器在读图时也会朗读 alt；搜索引擎用它理解图片语义。而 title 仅作为悬停提示，loading="lazy" 只控制加载时机，decoding="async" 影响解码线程——三者都不接管“不可见时该显示什么”这个核心降级职责。
-
alt必须是简短、准确的描述，不是装饰性文字（装饰图应设alt=""） - 空
alt=""表示该图无语义信息，屏幕阅读器会跳过，这是 WCAG 合规写法 - 不要用
alt="图片"或alt="logo"这类无效值；要写alt="公司蓝色鲸鱼 Logo"
<img> 标签常用属性组合与避坑点
实际开发中，单靠 alt 不够，需配合其他属性保障基础可用性：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
src：必须存在，且路径有效；相对路径以当前 HTML 文件为基准，不是以 CSS 或 JS 文件为准 -
width/height：建议显式声明，防止布局偏移（CLS 指标恶化），值可以是数字（像素）或百分比 -
loading="lazy"：对非首屏图启用懒加载，但不要滥用在关键首屏图上（会导致 LCP 延迟） -
referrerpolicy="no-referrer"：跨域请求图片时避免泄露来源 URL，尤其用于第三方 CDN 图片 - 避免使用已废弃的
border、align、hspace/vspace属性，全部交由 CSS 控制
更可靠的降级方案：不只是 alt
当图片承载关键信息（如图表、验证码、教学示意图），单靠 alt 描述仍不够，需结构化补充：
- 用
<figure><figcaption></figcaption></figure>包裹图片 + 详细说明，figcaption会在视觉和语义上成为图片的正式标题/注释 - 对复杂图表，额外提供
<details><summary></summary></details>折叠文本描述，或链接到纯文本版数据 - 服务端可结合
Accept: image/webp请求头做格式协商，但客户端降级仍依赖srcset+sizes+picture元素
真正容易被忽略的是：很多团队把 alt 当作 SEO 关键词堆砌字段，或交给运营填“点击查看详情”这类操作性文字——这会让视障用户完全无法理解图片本身内容。降级不是“有就行”，而是“像原图一样传递同等信息”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
