无障碍：它到底在检查什么

无障碍常被想成一条无障碍坡道：值得做、花钱、有时间就最后补上。所以它就没被做。

换个角度看会好一些。无障碍检查的是：这个页面是搭出来的，还是画出来的。屏幕阅读器、键盘和搜索爬虫读的是同一样东西：按层级排的标题、有文字的链接、有标签的输入框、合理的焦点顺序。阅读器理不清的东西，爬虫也理不清，而拿着鼠标的人只是运气好。

最常坏掉的四件事

**标题按字号选，而不是按层级选。** 选 `h1` 是因为它大，不是因为它是这一页讲的东西。一份有三个 `h1`、一个 `h2` 都没有的文档，是一份没有目录的文档，读者和搜索都只能摸着走。

**没有文字的链接。** 一个没有标签的箭头图标，读出来就是「链接」。去哪儿，不知道。屏幕阅读器可以列出页面上所有链接，而那份清单里是十二个一模一样的词。

**靠眼睛判断对比度。** 白底上的灰字看着高级，量出来是读不清。这是无障碍里唯一一件可以事先算出来的事，也是最常没被算的一件。

**看不见的焦点。** 活动元素周围那圈描边，是最先因为「破坏视觉」被去掉的东西。去掉之后，这个网站就没法用键盘操作了：人按下 Tab，完全不知道自己在哪。

模板在这件事上做了什么

底色与文字的搭配、按钮上那行字，都是算出来的而不是挑出来的：不达标，检查就不通过。标题按层级放，不按字号放，每一页恰好只有一个一级标题。用逻辑属性代替左右 —— 这也是阿拉伯语版本能整个翻过来、而不是翻一半的原因。

这些本身并不能让一个网站变得无障碍；它替代不了一个拿着键盘的人。但凡是能算的，在页面发出去之前都已经算过了。