95.9%网页栽在这件事上：4个查图片隐藏属性的野路子

WebAIM刚发布的2025年度报告有个数字挺扎眼——95.9%的首页存在可检测的WCAG（网页内容无障碍指南）违规。其中最猖獗的罪名？图片缺失替代文本。这玩意叫alt text，平时看不见，却是视障用户"听"网页的唯一通道，也是搜索引擎理解你图片内容的翻译官。

问题是它藏得太深。普通用户盯着一张图看半天，根本不知道自己看到的是"金毛幼犬在秋叶中玩耍"还是"IMG_4823.jpg"。今天聊四种把它揪出来的方法，从徒手拆代码到批量自动化，按你的耐心值自选。

方法一：直接扒HTML源码，最笨也最准

右键图片→"检查"或"查看页面源代码"，找到标签。如果看到alt="A woman reading a book in a library"，说明有人认真写过描述。如果alt=""，这是故意留空给装饰性图片，符合规范。但如果alt属性整个消失，或者填的是文件名，那就是实打实的违规。

这个方法的优势是零成本、零误判。劣势也很明显：你得在代码堆里翻找，检查一张图要30秒，一百张图就是一场马拉松。

方法二：浏览器插件WAVE，所见即所得

WebAIM自家出的WAVE扩展，装上后点一下图标，页面所有图片会被标注类型。有替代文本的显示绿色图标，缺失的标红色，装饰性留空的标灰色。顶部还会汇总错误数量，"本页有7张图没写alt"一目了然。

适合快速抽查单个页面，尤其是你想向老板证明"咱们网站确实有问题"的时候。截图发过去，比写十页报告管用。

方法三：开发者工具的Accessibility面板，深度诊断

Chrome和Edge的DevTools里藏着更细粒度的信息。按F12打开开发者工具，切到Accessibility（无障碍）标签，选中任意图片元素，能看到浏览器计算出的可访问性属性。这里会暴露一些隐藏问题：比如alt文本存在，但被CSS隐藏了；或者图片套在按钮里，却没有可访问性名称。

这个面板还能模拟屏幕阅读器的播报顺序，帮你理解视障用户实际听到的内容。对前端开发者来说，这是调试阶段的必备工具。

方法四：Alt Audit这类自动化工具，批量收割

当网站规模上到几百上千张图，人工检查就成了行为艺术。Alt Audit这类工具能爬取整个站点，输出CSV报告：每张图的URL、alt文本内容、字符数、是否违规。原本一周的工作量，压缩到几小时。

自动化工具的额外价值是发现"隐形雷区"：比如CMS批量上传时默认留空、第三方插件注入的图片、响应式图片不同尺寸版本alt不一致。这些人工抽查很难覆盖的角落，爬虫不会放过。

写alt text的五个土规矩

查到问题只是开始，写好替代文本有套粗糙但实用的标准：

具体比抽象重要。"金毛幼犬在秋叶中玩耍"和"狗"，对看不见图片的人完全是两回事。控制在125字符以内，这是JAWS等主流屏幕阅读器的截断阈值。别写"图片："开头，屏幕阅读器自己会播报。同一张图在不同场景可能需要不同描述——产品页的"红色连衣裙"和时尚博客的"90年代复古廓形，模特于巴黎街头"是两种写法。纯装饰性的分割线、背景图果断留空alt=""，别让视障用户浪费时间听"灰色横线重复二十次"。

常见翻车现场包括：用文件名凑数（"IMG_4823.jpg"）、关键词堆砌（"best cheap shoes buy shoes online"）、不同图片复制粘贴同一句话、或者写得像短篇小说。

Alt Audit的工程师在博客里提过一组对比数据：修复图片替代文本后，某电商站的有机搜索流量在三个月内提升12%。这不算因果确凿的实验，但至少说明搜索引擎确实在读这行隐藏代码。对25-40岁这批经历过SEO野蛮生长的人来说，这种"看不见的技术债"再熟悉不过——当年为了排名堆关键词，现在为了合规补描述，轮回而已。