alt 属性是 HTML 规范强制要求的必需属性，缺失会导致验证失败和无障碍访问中断；必须为每个 显式声明 alt=""（装饰性）或语义化描述（功能性），且需适配上下文、控制长度、避免冗余。
alt 属性不是“可选优化”，而是 HTML 规范强制要求的必需属性
不写 alt 会导致浏览器解析时直接报错（HTML5 验证失败），Lighthouse 无障碍审计标红 Image elements do not have [alt] attributes，屏幕阅读器可能跳过该
必须为每个 alt，哪怕值为空字符串：alt=""。这和“不写”有本质区别：
-
alt缺失 → 辅助技术视为错误，可能中断朗读流 -
alt=""→ 明确声明该图无信息价值（如分隔线、背景花边），辅助工具静默跳过 -
alt="描述"→ 图像含语义时唯一合法写法，文字需紧扣内容与上下文
功能性图片（图标、按钮、链接）的 alt 必须描述行为，不是外观
当 alt 的职责就从“这是什么图”切换成“点它干什么”。常见错误是照搬视觉特征，比如把购物车图标写成 alt="购物车图标" —— 屏幕阅读器用户听到后仍不知道点击会跳转到哪。
- 搜索按钮：
alt="搜索"，不是alt="放大镜" - 首页 logo 链接：
alt="返回首页"，不是alt="公司Logo" - 用户头像：
alt="用户张三的头像"，必须包含“用户”+“姓名”+“头像”三要素 - 带文字的 banner（如“618大促”）：
alt必须逐字复制所有可读文字，不含“图中显示”等冗余前缀
动态插入图片时，alt 容易被漏掉或覆盖
JS 创建 alt 不会自动继承或默认填充。常见失效场景：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
document.createElement('img')后没设el.alt = "描述" - 在 Vue/React 中用
v-bind:src或src={...}动态赋值，但忘了同步传入altprop - 把
alt错写在外层容器上，例如alt - CMS 富文本编辑器上传图片时，“替代文本”字段留空或填成
IMG_20240512.jpg—— 这等于没写
alt 文本长度与关键词处理的真实约束
WCAG 建议控制在 125 字符内，因为多数屏幕阅读器会在该长度后截断。核心信息必须前置，不能靠堆砌关键词补救：
- 正确：
alt="北京中关村Apple Store门店外景,玻璃幕墙与Logo清晰可见"（86 字符） - 错误：
alt="Apple 苹果旗舰店 北京 中关村 门店 外观 图片 照片 实景"（冗余+无动词+干扰朗读） - SEO 方面：Google 自 2021 年起已大幅降低
alt的权重，现在只用于基础语义归类；堆砌关键词不仅无效，还会触发辅助体验降级 - 同一张图在不同页面多次出现（如商品列表页 vs 详情页），
alt必须根据当前上下文重写，不能复用
最常被忽略的是：装饰性图片写 alt="装饰图" 或 alt="分割线" 是错的，必须用 alt=""；而背景图（background-image）根本无法加 alt，关键内容必须改用
