做企业官网的人常把「无障碍」当成公益话题——似乎是给视障用户准备的，和自己的生意没什么关系。但真正做过一次完整自查就会发现：无障碍要动的东西，和搜索引擎要读懂的东西，是同一套结构。这篇文章讲我给自己官网做体检时发现的三个真问题，以及你可以照着做的判断标准。
一、为什么无障碍和 SEO 是同一件事
搜索引擎的爬虫和读屏软件，本质上都在做同一件事：在看不到页面的前提下理解这个页面。区别只是一个把结果用于排序，一个把结果念给用户听。所以它们依赖的东西高度重合：
| 要素 | 读屏软件靠它做什么 | 爬虫靠它做什么 |
|---|---|---|
| 标题层级 | 按标题跳读，快速定位章节 | 判断页面主题和各段落的从属关系 |
| 表单标签 | 念出「这里要填什么」 | 理解表单用途，判断页面功能 |
| 图片替代文本 | 描述图片内容 | 图片搜索的主要文字依据 |
| 链接文字 | 决定要不要点 | 判断链接指向什么内容 |
也就是说：你为无障碍做的改造，几乎全部会被搜索引擎读到。这不是巧合，而是两者都建立在同一套语义化 HTML 之上。
二、我给自己官网做体检，发现的三个真问题
我用脚本把官网所有页面爬了一遍，逐页检查表单控件、标题层级和图片属性。三个发现值得说。
1. 搜索框只有 placeholder，没有可访问名称
这是常见、也容易被忽略的一个。页头搜索框写成了这样：
<input name="q" type="search" placeholder="搜索新闻、案例、服务...">看起来没问题——用户能看到提示文字。但 placeholder 不能当作可访问名称：读屏软件读不出它，而且用户一开始输入，提示文字就消失了，等于什么标签都没有。
检测结果：全站有 10 个搜索框是这种写法。修法很简单，加一个 aria-label：
<input name="q" type="search" aria-label="站内搜索" placeholder="搜索新闻、案例、服务...">2. 标题层级跳级
页面用 h1 到 h6 表达层级。如果中间跳过一级（比如 h1 之后直接是 h4），读屏用户按标题跳读时会迷失；爬虫也会困惑于「这一段到底从属于谁」。
我这次检查出 7 个页面存在跳级，集中在两处：
- 页脚：「服务项目 / 快速导航 / 联系方式」三个栏目标题写成了 h4，而页面上只有 h1 —— 直接跳了两级
- 列表页：每条内容的卡片标题用了 h3，但 h1 和它之间没有 h2
修法：页脚标签改成 h2，列表卡片标题也改成 h2。关键是只换标签、不改样式——这些标题本来就带独立的 CSS 类控制外观，换标签对视觉没有任何影响。
3. 图片的替代文本（这一项本来就是好的）
同一个脚本也检查了所有 <img> 的 alt 属性。结果是没有缺失——每张图都有描述性文字。这一项是站内一直做得好的地方，写出来是想说明：自查的意义在于知道哪里好、哪里不好，而不是每次都要改点什么。
三、三个可以照着做的判断标准
不用记标准条文，用下面三条就能判断得差不多：
- 把鼠标移开、只看文字，还能不能看懂这个页面？ 如果去掉图片、去掉颜色之后，结构依然清晰，说明语义化是到位的。
- 每个输入框，能不能用一句话说清「这里要填什么」，而这句写在一个随时可见的地方？ 只靠 placeholder 不算——输入后它就消失了。
- 把所有标题抽出来单独看，像不像一份目录？ 如果层级不跳级、每级都能自解释，读屏用户和爬虫都能顺畅地理解页面。
四、遂宁本地企业该从哪开始
如果你手上有官网，我建议按这个顺序来，投入产出比较合理：
- 先修表单。联系表单、搜索框、留言框是用户真正要用的东西，加了可访问名称，视障用户能用、爬虫也更容易理解页面功能。
- 再理标题层级。这件事几乎不影响视觉，改的是标签，属于「改了只有好处」的类型。
- 然后补图片描述。如果网站图片较多（产品图、案例图），给每张图写一句准确的 alt，顺带也是图片搜索的入口。
需要提醒的是：无障碍不是一次性任务。上新品、加新页面时如果又用了「只有 placeholder 的输入框」，问题会重新长出来。把这三条写进上线的检查清单，比事后返工省事得多。
五、小结
无障碍改造在企业官网里长期被当成「可有可无的加分项」。但从实际效果看，它同时作用于两类读者：使用读屏软件的人，和代表搜索引擎的爬虫。一次改造，两边受益——这大概是企业官网里少数几件「做了就有明确回报」的事。
