最近找碧藍(lán)攻略的時(shí)候發(fā)現(xiàn)的一個(gè) wiki 站的情況，就是雖然鼠標(biāo)懸浮在標(biāo)題頁(yè)面上顯示為指針，點(diǎn)擊也可以回到主頁(yè)，但是右鍵的時(shí)候沒(méi)有“在新標(biāo)簽頁(yè)中打開(kāi)”的選項(xiàng)。

看到這種情況，我悟了：八成是拿 <span> 標(biāo)簽加上 @click 事件和 cursor: pointer 當(dāng)作超鏈接的 <a> 標(biāo)簽用了。打開(kāi)開(kāi)發(fā)者工具看了一眼果不其然。

其實(shí)把 span 標(biāo)簽當(dāng)作 a 標(biāo)簽來(lái)用還是挺常見(jiàn)的，現(xiàn)在整體的兩大框架一把梭的前端環(huán)境下也不太重視無(wú)障礙這塊，順手提一提。

怎么理解無(wú)障礙

無(wú)障礙，是殘障人士的專屬功能嗎

這里給出一個(gè)很明確的回答：我們每個(gè)人在某種環(huán)境下都有可能是“殘障人士”。

舉個(gè)最常見(jiàn)的場(chǎng)景：微信和QQ的語(yǔ)音轉(zhuǎn)文字。

相信雖然大家的聽(tīng)力可能被耳機(jī)摧殘過(guò)，但是不至于完全聽(tīng)不見(jiàn)，那么理論上語(yǔ)音轉(zhuǎn)文字功能是不是一個(gè)無(wú)障礙功能呢？是也不是。

想象一下你在教室里上課，突然你的導(dǎo)員給你發(fā)來(lái)了十段甚至九段的120秒長(zhǎng)語(yǔ)音，但是因?yàn)樵谏险n，所以你的手機(jī)是靜音的，或者也沒(méi)有耐心去聽(tīng)完一整段思維抽搐邏輯破裂充滿了嗯嗯啊啊的語(yǔ)音。

在這種情況下，每個(gè)人都是某種意義上的聽(tīng)障人士。

把場(chǎng)景擴(kuò)展開(kāi)來(lái)，我在做菜的時(shí)候想看小說(shuō)，那么這時(shí)的我就是雙目失明并且沒(méi)有雙手的一級(jí)殘障人士；在擁擠且顛簸還沒(méi)有座位的公交車上，我們每個(gè)人都是只有一只手的行動(dòng)不便人士 (fat finger syndrome，比如在搖晃的公交上嘗試點(diǎn)擊一個(gè)廣告的叉號(hào))。

……

而在我開(kāi)頭舉的這個(gè)例子中，雖然視障用戶大概率不會(huì)玩需要重度視覺(jué)交互的游戲，但是這個(gè)設(shè)計(jì)確確實(shí)實(shí)給我?guī)?lái)了不便（失去了“在新標(biāo)簽頁(yè)中打開(kāi)鏈接”的功能）。

類似的情況也會(huì)出現(xiàn)在不出現(xiàn)交互的純視覺(jué)場(chǎng)景，例如文字和背景對(duì)比度過(guò)低的場(chǎng)合下，一旦用戶走到室外，那么ta將會(huì)什么都看不清。

WCAG規(guī)范

Web Content Accessibility Guidelines, 又稱WCAG，針對(duì)殘障人士制定了一系列規(guī)范。比如用 span 來(lái)代替 link 的話，違反了 link purpose 這一規(guī)范：

不說(shuō)瀏覽器，如果前端更惡劣一點(diǎn)，不給 cursor: pointer 的聲明，可能除了開(kāi)發(fā)人員自己不會(huì)有第二個(gè)人知道這是一個(gè)鏈接。

WCAG規(guī)范的鏈接給出在下面：

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

尊稱國(guó)服第一切圖仔的coco給出了部分實(shí)踐，可以參考一下，重復(fù)的東西就不寫(xiě)了。

https://juejin.cn/post/6932647134944886797