alt 属性是 HTML 规范强制要求的必需属性，缺失会导致验证失败和无障碍访问中断；必须为每个 显式声明 alt=""（装饰性）或语义化描述（功能性），且需适配上下文、控制长度、避免冗余。
alt 属性不是“可选优化”，而是 HTML 规范强制要求的必需属性
不写 alt 会导致浏览器解析时直接报错（HTML5 验证失败），Lighthouse 无障碍审计标红 Image elements do not have [alt] attributes，屏幕阅读器可能跳过该 <img alt="如何设置图像替换文本_IMG标签ALT属性优化访问性" > 或读出“图像”二字——用户完全不知道上下文。这不是体验问题，是基础合规门槛。
必须为每个 <img alt="如何设置图像替换文本_IMG标签ALT属性优化访问性" > 显式声明 alt，哪怕值为空字符串：alt=""。这和“不写”有本质区别：
-
alt缺失 → 辅助技术视为错误，可能中断朗读流 -
alt=""→ 明确声明该图无信息价值（如分隔线、背景花边），辅助工具静默跳过 -
alt="描述"→ 图像含语义时唯一合法写法，文字需紧扣内容与上下文
功能性图片（图标、按钮、链接）的 alt 必须描述行为，不是外观
当 <img alt="如何设置图像替换文本_IMG标签ALT属性优化访问性" > 被用作交互入口时，alt 的职责就从“这是什么图”切换成“点它干什么”。常见错误是照搬视觉特征，比如把购物车图标写成 alt="购物车图标" —— 屏幕阅读器用户听到后仍不知道点击会跳转到哪。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 搜索按钮：
alt="搜索"，不是alt="放大镜" - 首页 logo 链接：
alt="返回首页"，不是alt="公司Logo" - 用户头像：
alt="用户张三的头像"，必须包含“用户”+“姓名”+“头像”三要素 - 带文字的 banner（如“618大促”）：
alt必须逐字复制所有可读文字，不含“图中显示”等冗余前缀
动态插入图片时，alt 容易被漏掉或覆盖
JS 创建 <img alt="如何设置图像替换文本_IMG标签ALT属性优化访问性" > 元素后，alt 不会自动继承或默认填充。常见失效场景：
- 用
document.createElement('img')后没设el.alt = "描述" - 在 Vue/React 中用
v-bind:src或src={...}动态赋值，但忘了同步传入altprop - 把
alt错写在外层容器上，例如<div alt="xxx"><img src="..." alt="如何设置图像替换文本_IMG标签ALT属性优化访问性" ></div>—— 浏览器只认<img alt="如何设置图像替换文本_IMG标签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，关键内容必须改用 <img alt="如何设置图像替换文本_IMG标签ALT属性优化访问性" > 标签实现。
