alt属性是img标签中唯一标准且最有效的替代文字方案，必须显式添加，不可用title或aria-label替代；装饰图写alt=""，内容图需具体描述“图里有什么”和“为什么放这张图”。
替代文字写在 alt 属性里，不是单独加标签
很多人以为要额外插入一个“说明框”或用 title、aria-label 代替，其实标准且最有效的做法就是直接给 <img> 标签加上 alt 属性。HTML 编辑器（比如 VS Code、Sublime、甚至 WordPress 的代码编辑模式）都不需要特殊插件——你只要能编辑 HTML 源码，就能手动补上。
常见错误现象：
– 图片加载失败时一片空白，没有任何提示
– 屏幕阅读器读不出图片内容
– SEO 工具提示“missing alt text”
-
alt值必须是纯文本，不能含 HTML 标签（比如别写alt="<em>一只猫</em>"） - 空字符串
alt=""是合法的，适用于纯装饰性图片（如分隔线、背景花边），但得确认它真不影响语义 - 避免冗余描述，比如
alt="图片：公司logo"—— 屏幕阅读器本身就会读“图像”，不用重复
VS Code 里快速批量补 alt 的实用技巧
如果你有几十张图要处理，一个个手敲效率低还容易漏。VS Code 自带的搜索替换功能就能解决：
- 用正则匹配所有没
alt的<img>：搜索<img([^>]*?)>，替换为<img$1 alt="请描述这张图"> - 再用多光标（Ctrl+Click 或 Ctrl+D）选中所有
"请描述这张图"，一次性输入真实描述 - 注意：如果原标签已含
src、class等属性，正则里的[^>]*?能正确捕获它们，不会破坏原有结构
别依赖“自动补全插件”生成 alt —— 目前没有插件能准确理解图片语义，AI 生成的描述常错位或空泛。
立即学习“前端免费学习笔记（深入）”；
alt 写不好比不写还糟
搜索引擎和辅助技术会严格按你写的字面意思解析，含糊、错误或堆砌关键词都会起反效果。
- 错误示例：
alt="图片"、alt="beautiful photo"、alt="SEO keyword, buy now, discount" - 合格示例：
alt="穿蓝衬衫的工程师正在调试电路板"（具体、客观、无主观形容词） - 如果是链接里的图片，
alt应说明链接目的，比如alt="返回首页"，而不是描述 logo 长什么样 - 图表类图片需提炼关键信息，例如
alt="柱状图：2023年Q1-Q4用户增长率分别为12%、8%、19%、27%"
WordPress 可视化编辑器里怎么加 alt
古腾堡（Gutenberg）或经典编辑器里上传图片后，右侧区块设置面板有明确的“替代文字”字段，填进去就行。但要注意两个坑：
- 上传时没填，插入后又没展开“更多选项”，
alt就是空的 —— 很多人以为“上传完就自动有了” - 用“媒体库”复用旧图时，
alt不会继承上次填写的内容，得重新填（WordPress 不保存每张图的全局alt，只存当前插入实例的值） - 如果主题或插件禁用了媒体库字段，可能需要进
wp-admin/upload.php单独编辑图片详情页补上
真正麻烦的是那些通过短代码或自定义区块插入的图片——它们往往绕过常规流程，alt 必须手动进 HTML 视图补，而且得确认短代码最终渲染出的 <img> 确实接收了你传的参数。
