最近找碧蓝攻略的时候发现的一个 wiki 站的情况，就是虽然鼠标悬浮在标题页面上显示为指针，点击也可以回到主页，但是右键的时候没有“在新标签页中打开”的选项。

看到这种情况，我悟了：八成是拿 <span> 标签加上 @click 事件和 cursor: pointer 当作超链接的 <a> 标签用了。打开开发者工具看了一眼果不其然。

其实把 span 标签当作 a 标签来用还是挺常见的，现在整体的两大框架一把梭的前端环境下也不太重视无障碍这块，顺手提一提。

怎么理解无障碍

无障碍，是残障人士的专属功能吗

这里给出一个很明确的回答：我们每个人在某种环境下都有可能是“残障人士”。

举个最常见的场景：微信和QQ的语音转文字。

相信虽然大家的听力可能被耳机摧残过，但是不至于完全听不见，那么理论上语音转文字功能是不是一个无障碍功能呢？是也不是。

想象一下你在教室里上课，突然你的导员给你发来了十段甚至九段的120秒长语音，但是因为在上课，所以你的手机是静音的，或者也没有耐心去听完一整段思维抽搐逻辑破裂充满了嗯嗯啊啊的语音。

在这种情况下，每个人都是某种意义上的听障人士。

把场景扩展开来，我在做菜的时候想看小说，那么这时的我就是双目失明并且没有双手的一级残障人士；在拥挤且颠簸还没有座位的公交车上，我们每个人都是只有一只手的行动不便人士 (fat finger syndrome，比如在摇晃的公交上尝试点击一个广告的叉号)。

……

而在我开头举的这个例子中，虽然视障用户大概率不会玩需要重度视觉交互的游戏，但是这个设计确确实实给我带来了不便（失去了“在新标签页中打开链接”的功能）。

类似的情况也会出现在不出现交互的纯视觉场景，例如文字和背景对比度过低的场合下，一旦用户走到室外，那么ta将会什么都看不清。

WCAG规范

Web Content Accessibility Guidelines, 又称WCAG，针对残障人士制定了一系列规范。比如用 span 来代替 link 的话，违反了 link purpose 这一规范：

不说浏览器，如果前端更恶劣一点，不给 cursor: pointer 的声明，可能除了开发人员自己不会有第二个人知道这是一个链接。

WCAG规范的链接给出在下面：

https://www.w3.org/TR/WCAG21/

尊称国服第一切图仔的coco给出了部分实践，可以参考一下，重复的东西就不写了。

https://juejin.cn/post/6932647134944886797