alt属性是无障碍与基础可用性的硬门槛，必须根据图像是否承载有意义的信息决定：信息图等需具体描述，装饰图用alt=””，图标按钮按功能写，同一图片在不同上下文需不同alt，文本宜简明扼要、核心前置，避免冗余和关键词堆砌。
图像没有 alt 属性，屏幕阅读器就读不出内容，搜索引擎也基本忽略这张图——这不是“可选优化”，而是无障碍与基础可用性的硬门槛。
什么时候必须写 alt，什么时候可以为空
关键看图像是否承载**有意义的信息**：
- 信息图、产品截图、带文字的 banner：必须写具体描述，比如
alt="iphone 15 Pro 钛金属边框特写，右侧显示A17芯片性能对比柱状图" - 纯装饰性图片（如分隔线、背景花纹）：用
alt=""（空字符串），不是删掉属性，也不是写alt="装饰图" - 图标按钮（如放大镜、购物车）：按功能写，不是按形状，比如搜索按钮用
alt="搜索"，不是alt="放大镜图标" - 同一张图在不同上下文出现多次？每次都要重写，不能复用。首页轮播图里的“新品上市”和商品详情页里的同一张图，
alt应该不同。
alt 文本写多长才合适
没固定字数上限，但有实际约束：
- 屏幕阅读器通常只读前 125 个字符左右，超过可能被截断，优先把核心信息放前面
- 避免堆砌关键词，比如
alt="苹果 iPhone 手机 苹果手机 旗舰手机 苹果官网 正品行货"—— 这会让视障用户困惑，也被搜索引擎视为作弊 - 含文字的图，要转述文字内容，但别加“图中显示”这类冗余前缀；直接写“夏季促销：满300减50”就行
- 复杂图表？
alt只写结论性描述（如“2023年华东区销售额同比增长22%”），详细数据放longdesc或邻近段落，现代实践中更推荐用<figure><figcaption></figcaption></figure>配合 ARIA。
常见错误：alt 写错位置或被覆盖
这些情况会让 alt 失效或起反作用：
立即学习“前端免费学习笔记（深入）”；
- 把
alt写在<img alt="html怎么设置图像替代文本_HTML alt属性规范教程【可访】" >外层容器上（如<div alt="xxx"><img src="..." alt="HTML怎么设置图像替代文本_HTML alt属性规范教程【可访】" ></div>）——无效，浏览器只认<img alt="HTML怎么设置图像替代文本_HTML alt属性规范教程【可访】" >自身的alt - 用了
title属性代替alt（<img src="x.jpg" title="点开看大图" alt="HTML怎么设置图像替代文本_HTML alt属性规范教程【可访】" >）——title是悬停提示，不替代无障碍需求 - 动态插入图片时漏掉
alt：js 创建img元素后，必须显式设置el.alt = "描述"，不能依赖默认值 - 使用 CSS 背景图（
background-image）展示关键内容——背景图无法加alt，必须改用<img alt="HTML怎么设置图像替代文本_HTML alt属性规范教程【可访】" >标签或补充 ARIA。
最常被忽略的一点：CMS 或富文本编辑器里上传图片时，“替代文本”字段经常被留空或填成文件名（IMG_20240512_1023.jpg）。这不算写了 alt，等于没写。