很多站长做 SEO 的时候，眼睛只盯着关键词、外链、收录量，却忽略了一件越来越重要的事：网页到底能不能被"读"到。不只是被搜索引擎的爬虫读到，还包括被屏幕阅读器读到、被键盘读到、被手机上的老年用户读到。这篇文章讲的是可访问性（Accessibility，常缩写为 a11y）中最实际的一块——WCAG 标准里那些真正影响 SEO 和真实用户的条目，以及一个小站在不改版式的前提下，怎么用最少的改动把它做对。
一、为什么无障碍这件事和 SEO 是一回事
先说结论：无障碍和 SEO 在技术层面上有大量重叠，因为它们服务的是同一批"不会用眼睛看页面布局"的消费者。爬虫不理解视觉层级，它看的是语义；屏幕阅读器也不理解视觉层级，它看的也是语义。你在页面里写对的东西，两边同时受益。
具体重叠的地方至少有五处：
第一，alt 属性。图片的替代文本既是屏幕阅读器唯一能念出来的内容，也是搜索引擎判断图片内容的主要依据。图片站、教程站尤其明显，一篇没有 alt 的图文教程，在图片搜索里基本是透明的。
第二，标题层级。WCAG 1.3.1 要求信息与结构可被程序化识别，具体做法是用真实的 h1~h6，而不是用 <div class="title"> 再靠 CSS 调大字号。搜索引擎解析页面大纲也是靠这些标签。一个页面里跳过 h2 直接写 h4，两个消费者都会困惑。
第三，链接文本。WCAG 2.4.4 要求链接目的可从链接文本本身判断。满屏的"点击这里"、"阅读更多"，屏幕阅读器用户用链接列表快速跳转时等于什么也看不到，搜索引擎给这个链接分配的语义权重也同样稀薄。改成"查看 Nginx 配置示例"就好得多。
第四，对比度。WCAG AA 要求正文对比度不低于 4.5:1，大字号（18pt 或 14pt 粗体以上）不低于 3:1。对比度低不只是"看不清"的问题，它直接影响移动端的跳出率——而跳出率、停留时长这些行为信号，是搜索引擎间接会感知到的东西。
第五，可抓取与可聚焦。用 JS 拼出来的内容、没有 href 的假链接（<a onclick="..."> 不带 href），键盘用户 Tab 不到，爬虫也往往不跟。这和"可索引性"是同一件事的两面。
所以要摆正心态：做无障碍不是为了照顾少数人而额外付出，它更像是把页面里本来就该有、但被偷懒省掉的那部分语义结构补回来。补回来之后，SEO 顺带就好了。
二、先做一次自查：三个不用装工具的探针
别急着上自动化工具。很多免费检测工具会给你列出两三百条"问题"，其中大半是误报或者无关痛痒，看完只会让人放弃。更有效率的做法是先手工跑三件事。
探针一：键盘走一遍。关掉鼠标（或者干脆用手把鼠标推到一边），从地址栏按 Tab 进入页面，一路 Tab 到页面底部。你要观察四件事：焦点能不能看得见（有没有明显的聚焦框）、焦点顺序是不是和视觉顺序一致、能不能跳过导航直达正文、有没有焦点卡在某个元素上出不来。我见过不少主题把 outline: none 写进全局 CSS，结果整站键盘用户寸步难行。这一条如果挂了，其他都不用谈，先修。
探针二：把 CSS 关掉看一遍。用浏览器的"禁用 CSS"功能，或者直接把样式表 URL 改成不存在的路径。页面应该仍然能按"先标题后正文"的顺序读下来。如果关掉 CSS 后整个页面变成一团乱麻、顺序颠倒，说明你的结构完全是靠 CSS 的浮动和定位撑起来的，语义层是空的——爬虫看到的也是那团乱麻。
探针三：缩放 200%。WCAG 1.4.4 要求文本能放大到 200% 而不丢失内容或功能。按 Ctrl 加加号放大到 200%，看有没有文字被容器裁掉、有没有按钮被挤出屏幕、有没有横向滚动条让整页变得难用。这一条在固定宽度布局的老主题上特别容易挂。
这三个探针加起来不到十分钟，能筛出八成真正影响用户的问题，而且都是改起来最有价值的那八成。
三、必改项：图片 alt 的四条判断规则
alt 是最容易被敷衍的一项。随手写"图片"、"banner"、"1"的比不写的还糟——不写时屏幕阅读器会念文件名，至少还带点信息；写了"图片"等于告诉用户"这里有个东西但我不告诉你是什么"。
判断规则我总结成四条：
一、有信息量的图必须描述信息，而不是描述图像本身。一张显示磁盘占用 92% 的监控截图，alt 应该是"df -h 输出显示根分区已用 92%"，而不是"一张终端截图"。前者让用户获得了信息，后者只是告知存在。
二、纯装饰图用空 alt。背景花纹、分隔线、纯装饰图标，写成 alt=""，注意是空的而不是省略。写成空字符串屏幕阅读器会跳过；省略 alt 则可能被念出文件名，反而制造噪声。
三、图里有文字就抄进 alt。教程站大量截图是配置界面，关键信息全在图上的文字里。把关键那几行抄进 alt，既服务屏幕阅读器，也服务搜索引擎的图片索引。
四、链接里的图片 alt 要说明链接去哪。如果一张图片被 <a> 包着，它就是这个链接的全部可见文本，此时 alt 应当写"下载 PDF 版手册"这类目的地描述。
改这一项成本极低，一个正则就能把站点里所有 alt="" 的图列出来。我通常先跑一遍：
grep -roE '<img[^>]*>' /var/www/site/ --include=*.html | grep -v 'alt=' | head -50列出来的就是完全没有 alt 的图。全站扫一遍，往往能发现几十处——它们同时在图片搜索里也是零曝光。
四、标题层级：不是字号，是骨架
这一点几乎所有老主题都做错了。为了视觉上好看，很多模板把侧栏模块标题也写成 h2，把正文里的强调写成 h3 再靠 CSS 调回小字。结果是：一个页面里有七八个 h2，其中五个是侧栏的"热门文章"、"标签云"，正文真正的结构反而被淹没了。
正确的做法是把标题标签只用于内容结构，视觉样式一律交给 class。具体三条：
一、每个页面只有一个 h1，内容就是文章标题（首页可以用站点名加一句定位语，但不要多个 h1）。
二、正文从 h2 开始，逐级下降，不跳级。h2 下面要分子节就用 h3，不要为了字号小一点而直接跳到 h4。
三、侧栏、页脚、相关推荐这些"模板区域"的标题，改用 div 或 p 加 class，或者用 h2 但通过 aria-hidden 之外的方式……不，更干脆的做法是直接换成 p class="widget-title"。模板区域本来就不是文章正文的一部分，不应该参与文章大纲。
这一条改完，搜索引擎看到的大纲会干净很多。用浏览器插件看大纲或者直接 grep -oE '<h[1-6][^>]*>' 数一遍，就能看出问题在哪。
五、表单与交互：最容易被忽略的高危区
搜索框、评论框、订阅表单——这些是站里唯一需要用户"操作"的地方，也是无障碍问题最集中的地方。三个必改点：
第一，每个输入框都要有可关联的 label。不是把文字放在输入框旁边就算，要用 <label for="email"> 配上 <input id="email"> 的 id 绑定。这样屏幕阅读器聚焦时会念出字段含义，点文字也能聚焦输入框。最省事的兼容写法是不用 for/id，直接把 input 嵌在 label 里面。
第二，占位符不能替代 label。placeholder="请输入邮箱" 看着简洁，但用户一开始输入，提示就消失了，记性差的用户会忘记这个框是干什么的；屏幕阅读器对 placeholder 的支持也不一致（有的念有的不念）。placeholder 的正确位置是补充说明格式，比如"name@example.com"，而不是替代字段名。
第三，错误提示要能被感知。表单校验失败时，只在输入框变红是不够的——色盲用户看不出红色。要在框旁边加文字说明，并且把 aria-invalid="true" 和 aria-describedby 指向那段说明。同时把焦点移回第一个出错的字段，让键盘和读屏用户知道该改哪里。
另外还有一个常年被忽略的：所有自定义的按钮，如果不是用 <button> 而是用 <div> 加点击事件做的，键盘根本触发不了（回车和空格不会触发 div 的 click）。这种"假按钮"在主题的"展开全文"、"返回顶部"里非常常见，改法很简单——换成 <button type="button">，样式照旧。
六、跳转链接：二十行代码换来的体验提升
WCAG 2.4.1 要求提供"绕过区块"的机制，也就是常说的 skip link。它的作用很简单：让键盘用户一按 Tab 就能跳过几十个导航链接，直接到正文。没有它，用户每进一个页面都要按三十次 Tab 才能读到第一句话。
实现起来只要二十行：
<a href="#main" class="skip-link">跳到正文</a>
...
<main id="main" tabindex="-1">...</main>
<style>
.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 16px;z-index:9999}
.skip-link:focus{left:0}
</style>三个细节别漏：链接必须放在页面最开头、位于所有导航之前；隐藏要用绝对定位移出屏幕，不能用 display:none（那样它永远无法被聚焦）；目标容器要加 tabindex="-1"，否则某些浏览器聚焦后键盘焦点不会落进去，跳转等于没跳。
加完之后用 Tab 试一遍：按第一下 Tab 应该出现一个黑底白字的"跳到正文"，回车后焦点进入正文区，读屏会从正文第一句开始念。就这么点东西，体验提升非常明显，而绝大多数个人站都没有。
七、对比度：算一遍，别凭感觉
个人站最容易踩的对比度坑是"浅灰正文配白底"和"深色底上的深灰字"。设计师觉得这样"高级"，但 60 岁以上用户和户外手机用户基本读不了。
标准是：正文 4.5:1，大字（18pt 或 14pt 粗体以上）3:1，界面控件的边框、图标这类非文本元素 3:1。计算方法是 WCAG 相对亮度公式，手算麻烦，但有几个免费工具可以直接取色值出结果，或者自己写十行 Python：
def lum(c):
c = [x/255 for x in c]
c = [x/12.92 if x <= 0.03928 else ((x+0.055)/1.055)**2.4 for x in c]
return 0.2126*c[0] + 0.7152*c[1] + 0.0722*c[2]
def ratio(a, b):
la, lb = sorted([lum(a), lum(b)], reverse=True)
return (la + 0.05) / (lb + 0.05)
print(ratio((0x77,0x77,0x77), (0xff,0xff,0xff))) # 4.48, 差一点点就不过注意 #777 配白底算出来是 4.48，差 0.02 不达标——这是最常被踩的具体数字。想让灰字舒服又达标，用 #595959（7.0）或 #6b6b6b（5.3）比较稳。
还有个小坑：如果正文放在半透明背景或者渐变上，要按最不利的那个背景点算，别按平均色算。
八、把这套东西固化进流程
做一次修复不算什么，难的是下次别再退回去。小站没有专人盯着无障碍，只能把它写进流程。我的做法是三条：
一、新建或改版模板时，先跑键盘探针和关 CSS 探针，这两条不过不合并。
二、每季度用 Lighthouse 的无障碍维度跑一遍首页加两个典型文章页，分数不是重点（它只测能自动测的部分，大约覆盖 30% 的问题），重点是看有没有从 95 掉到 80 这种突变。
三、把 alt 缺失写成发布前的检查项，跟标题长度、广告位一起查。
最后要说清楚的是：WCAG 合规本身不能直接带来排名。Google 从来没有把无障碍当成排名信号。但从实践上看，做对无障碍的站往往结构更清晰、内容更可读、移动端体验更好，而这些是会反映到行为指标上的。更现实的好处是另一面：它把一个可能存在的法律与投诉风险消掉了（很多地区对公共服务类网站有强制要求），同时真的有人在用——一个能跑通的键盘导航，一个写对的 alt，对那部分用户的差别是从"用不了"到"能用"。这件事本身就值得做。