无障碍不是慈善：目录站该改的六处和它带来的实际收益

先说清楚一件事：无障碍不是直接排名因素，改完不会立刻涨排名。把话说在前面，是因为这个领域里宣传得太厉害，不少人以为做完就能涨流量。

但它确实有用，而且用在一个不太被提起的地方：目录站是密集列表型页面，条目卡片小、图标多、文字灰、吸顶导航高，恰好是无障碍问题的重灾区。这类问题的代价不是「少数人用不了」，是「多数人用着别扭」。

图片来源：网络，版权归原作者所有，侵权请联系删除

一、点击目标做到 24×24 CSS 像素

WCAG 2.2 新增了 2.5.8 Target Size (Minimum)，AA 级，要求交互目标的尺寸至少 24×24 CSS 像素。文字本身可以更小，但可点击区域要够大。

目录站最典型的违规是条目卡片右上角那个收藏图标，做成 16×16，鼠标都难点，手指更别提。改法不是把图标画大，而是给可点击元素加内边距，或者用伪元素把热区撑到 24 像素以上。

二、焦点不要被吸顶元素盖住

2.4.11 Focus Not Obscured (Minimum) 也是 2.2 新增的 AA 级标准：元素获得键盘焦点时必须完整可见，不能被吸顶导航、Cookie 提示条、客服挂件部分或完全遮住。

目录站普遍有吸顶分类栏，高度常在 60 到 80 像素。键盘用户 Tab 到下面的条目时，焦点元素滚到吸顶栏底下就看不见了。解决办法是给滚动容器加 scroll-padding-top，值等于吸顶栏高度，或者在聚焦时手动调整滚动位置。

三、对比度别用浅灰字

1.4.3 Contrast (Minimum) 要求正文与背景的对比度至少 4.5:1，大字号可以放宽到 3:1，这里的大字号指 18pt（约 24px）常规字重，或 14pt（约 18.66px）粗体。非文本元素，比如图标、表单边框、焦点指示，按 1.4.11 要求至少 3:1。

目录站里的条目描述、更新时间、来源标注，习惯用 #999 甚至更浅的灰放在白底上，几乎都过不了 4.5:1。这种「次要信息用浅色」的设计惯例要改，次要信息同样要能读。

四、键盘能走完全流程

所有功能都要能用键盘操作完成，焦点顺序要符合视觉顺序，不能有键盘陷阱。

目录站的筛选器、下拉分类、弹窗提交表单是最容易出问题的三处。尤其是自定义下拉菜单，用 div 加 click 事件实现，键盘完全进不去。要么换成原生 select，要么补齐键盘事件和 ARIA 状态，别只做一半。

五、链接文字要能单独看懂

条目列表里一整片「查看详情」，屏幕阅读器读出来是连续几十个「查看详情」，用户无法区分。链接的可访问名称要包含条目名，比如「查看 XX 的详情」，视觉上仍然可以只显示「查看详情」，其余部分用视觉隐藏处理。

这条对搜索引擎也有意义：链接锚文本带上了具体名称，比一堆「详情」有信息量。

六、求助入口位置要一致

3.2.6 Consistent Help 是 2.2 新增的 A 级标准：如果站点提供了帮助入口，它要在各页面上保持相对一致的位置。用户不该在这一页右上角找到它，在下一页跑到页脚，在第三页藏进汉堡菜单。

开放了用户提交的目录站尤其要注意，提交入口、规则说明、联系方式这三样在分类页、条目页、提交页上的位置最好对齐。

它到底能带来什么

诚实地说，这些改动对排名的直接贡献接近于零。真正会变的是这几件事：

• 可点击区域变大之后，移动端的误点率下降，条目页的无效跳出会少一截，这是能在数据上看出来的；
• 对比度提高之后，中老年用户在小屏上的阅读完成度提高，页面停留时间的分布会往好的方向走；
• 语义结构和链接文字改善之后，机器理解页面的难度下降，这和结构化数据的逻辑是一样的，属于间接但真实的好处；
• 合规风险下降，无障碍要求在多地已经进入法规，早做比被通知了再做便宜。

从哪开始

如果只有半天时间，按这个顺序：先把全站的浅灰文字改成对比度达标的颜色，这是纯 CSS 改动，风险最低；然后给所有图标按钮补热区；再处理吸顶栏的遮挡。剩下的键盘可达和 ARIA 部分可以放到下一次改版里做。

用自动化扫描工具能查出一部分问题，但扫不出全部，对比度和目标尺寸这两类它反而查得准，适合当第一轮工具。