浅浅浅浅谈前端无障碍
最近找 BA 攻略的时候发现的一个 wiki 站本应该是链接的地方表现很奇怪，就是虽然鼠标悬浮在标题页面上显示为指针，点击也可以回到主页，但是右键的时候没有“在新标签页中打开”的选项。
于是我大概有了个猜想，八成是拿 <span> 标签加上 @click 事件和 cursor: pointer 声明之后就当作超链接的 <a> 标签用了。打开开发者工具看了一眼果不其然。
<span> 上的 cursor: pointer 声明这种情况也出现在 B 站上。B 站专栏投稿的时候，选择分区的按钮是用 <a> 标签模拟的，也没有 tabindex 属性。在这种情况下，读屏工具不能正确将元素识别成按钮，并且这些元素也无法通过键盘操作选中，只能使用鼠标或者触屏点击。
我能理解前端们的工作量已经相当饱和，并且整个团队可能也没有时间、精力或者意识去关注只有少部分特殊用户才会遇到的无障碍问题。但是换个角度思考，也许我们每个人在某些场合下也会成为所谓的“特殊用户”。
无障碍，是残障人士的专属功能吗
这里给出一个很明确的回答：我们每个人在某种环境下都有可能是“残障人士”。
举个最常见的场景：微信和 QQ 的语音转文字。
相信虽然大家的听力可能被耳机摧残过，但是不至于完全听不见，那么理论上语音转文字功能是不是一个无障碍功能呢？是也不是。
想象一下你在教室里上课/在会议室开会，突然你的导员/ leader 给你发来了十段甚至九段的 120 秒长语音，但是因为在上课/开会，所以你的手机是静音的，或者也没有耐心去听完一整段思维抽搐逻辑破裂充满了嗯嗯啊啊的语音。
在这种情况下，每个人都是某种意义上的听障人士。
把场景扩展开来，我在做菜的时候想看小说，那么这时的我就是双目失明并且没有双手的一级残障人士；在拥挤且颠簸还没有座位的公交车上，我们每个人都是只有一只手的行动不便人士 (fat finger syndrome，比如在拥挤且摇晃的公交上尝试点击一个叉号试图关闭广告)。
……
而在我开头举的这个例子中，虽然视障用户大概率不会玩需要重度视觉交互的游戏，但是这个设计确确实实给我带来了不便（失去了“在新标签页中打开链接”的功能）。
类似的情况甚至会出现在用户根本没有和应用产生交互的纯视觉场景，例如文字和背景对比度过低的场合下，一旦用户走到室外，那么ta将会什么都看不清。
WCAG 规范
Web Content Accessibility Guidelines, 又称 WCAG，针对残障人士制定了一系列规范。比如用 <span> 来代替 <a> 就违反了三条规范：
WCAG 规范
准则 2.2.1 键盘
(等级 A)
内容的所有功能都可以通过键盘接口实现操作并且没有对每次键击做特定时限要求。除非底层功能是依赖用户的移动路径并且不做为端点的输入方法。
准则 3.1.1 网页语言
(等级 A)
每个网页的默认人类语言可以编程式确定。
通用准则 健壮性
内容必须足够健壮，以便能够被各种用户代理（包括辅助技术）可靠地解释。
不说浏览器，如果前端更恶劣一点，不给 cursor: pointer 的声明，可能除了开发人员自己不会有第二个人知道这是一个链接。
WCAG规范的链接在这里。