alt=""是合法且有明确语义的写法，表示图片纯装饰、无信息量，屏幕阅读器静音跳过；省略alt属性则导致验证报错、读屏误读文件名、Lighthouse评分归零等问题。
alt="" 是合法且有明确语义的写法
空字符串 alt="" 不是“没写”，而是主动声明：这张图不传递信息，纯属装饰。屏幕阅读器会静音跳过，不会读出文件名或“图像”之类冗余词——前提是它真的不承载语义。
常见误判场景包括：
- 用
alt=" "（带空格）代替alt=""→ 屏幕阅读器可能读作“空白”，干扰用户 - CMS 后台填了标题但模板没把值注入
alt→ 渲染结果仍是缺失或空格，等于没写 - 把图标按钮（如搜索放大镜、删除叉号）设为
alt=""→ 用户无法获知操作意图，违反 WCAG 1.1.1
省略 alt 属性会触发真实兼容性问题
不写 alt 属性 ≠ 默认为空。HTML5 规范要求它必须存在，省略会导致：
- W3C 验证器报错：
Bad value “” for attribute “alt”（哪怕你写了空字符串但拼错了） - Chrome/Firefox 的 Accessibility 面板标为
Missing alternative text - Lighthouse 可访问性得分直接归零，影响 SEO 报告评级
- 某些旧版读屏软件（如 JAWS 早期版本）会退而求其次，读出
src路径或文件名，造成严重语义污染
哪些图真能用 alt=""？判断标准很具体
核心判断依据只有一条：移除这张图，页面的信息完整性、功能可用性、交互逻辑是否完全不受影响？
能用 alt="" 的典型例子：
- CSS 已实现分割线，
<img src="dot.png">仅作老浏览器兜底 - 列表项前缀小圆点，语义由
<ul>和 CSSlist-style承担 - 标题旁纯装饰性花纹图，无点击、无 hover、无上下文绑定
不能用 alt="" 的反例：
立即学习“前端免费学习笔记（深入）”；
- 按钮图标（
alt="删除"或alt="展开详情"才对） - 数据图表中的柱状图、折线图（需描述趋势与关键数值）
- 商品主图、头像、带文字的截图（哪怕只有一行字，也得概括其作用）
alt="" 和 title 完全不是一回事
title 是鼠标悬停时的提示，对屏幕阅读器默认不读，搜索引擎也不用于理解图片内容。把它当 alt 用，等于放弃无障碍和 SEO 基础。
更隐蔽的问题是：某些构建工具（如 ESLint + eslint-plugin-jsx-a11y）会直接禁止 title 出现在 <img> 上，认为这是误导性写法。
真正需要工具提示时，应包裹一层 <figure> 或用 aria-describedby 关联外部描述节点，而不是依赖 title。
复杂点在于：很多“看起来只是装饰”的图，其实悄悄参与了信息传达——比如品牌 logo 图标、流程图里的连接箭头、甚至 loading 动画中的状态指示符。这类图一旦设成 alt=""，就等于在可访问性上开了个口子，而且很难被自动化工具发现。
