杭州最美的季節(jié)里，淘寶無(wú)障礙訪問(wèn)改善小組有幸邀請(qǐng)到盲人在線站長(zhǎng)——爭(zhēng)渡讀屏團(tuán)隊(duì)成員——楊永全同 學(xué)和我們一起面對(duì)面交流網(wǎng)站無(wú)障礙訪問(wèn)方面的問(wèn)題。楊同學(xué)使用電腦必須使用讀屏軟件，就像他看不到我們的臉必須靠聲音識(shí)別我們一樣。在談到讀屏軟件操作頁(yè) 面時(shí)，他對(duì)我們前端的同學(xué)特別的強(qiáng)調(diào)：他最深?lèi)和唇^的就是頁(yè)面鏈接上有 onfocus=”this.blur()” 這句代碼，這從何說(shuō)起呢？
各位同學(xué)，看到這句代碼有沒(méi)有覺(jué)得眼熟，對(duì)的，你懂的，我們常用它來(lái)去除鏈接取得焦點(diǎn)時(shí)外圍出現(xiàn)的虛線框（如上圖一），google一下，前面幾十頁(yè)談的 都是這個(gè)去除虛線框的技巧。但我們也許以前從未想過(guò)：我們的這行代碼給盲人用戶(hù)們帶來(lái)了巨大的困擾：這中斷了盲人用戶(hù)的Tab鍵路徑，導(dǎo)致Tab光標(biāo)無(wú)法 聚焦頁(yè)面的下一個(gè)控制器（鏈接、表單域、object、image map等）。測(cè)試如下：
按下Tab鍵，第一和第二個(gè)鏈接都可以正常獲取焦點(diǎn)，繼續(xù)Tab到第三個(gè)鏈接時(shí)，悲劇出現(xiàn)了：此時(shí)焦點(diǎn)會(huì)回到第一個(gè)鏈接，而無(wú)法Focus到第四個(gè)鏈接， 原因是當(dāng)Focus到第三個(gè)鏈接時(shí)，onfocus=”this.blur()” 事件處理強(qiáng)制觸發(fā)了失焦，焦點(diǎn)重新回到文檔的最開(kāi)始。于是不停按Tab的結(jié)果就是焦點(diǎn)在前面三個(gè)鏈接輪流轉(zhuǎn)，后面的內(nèi)容通過(guò)Tab鍵無(wú)法訪問(wèn)[1]。
那么，有更好的方式嗎？從根源上看，加onfocus=”this.blur()”是為了去除鏈接獲取焦點(diǎn)后外圍的虛線框（當(dāng)然chrome、safari、opera下的focus效果各異，這里姑且就這么叫吧 ）。W3C關(guān)于Outline的文章里說(shuō)明這個(gè)虛線框用來(lái)告訴用戶(hù)當(dāng)前頁(yè)面獲取焦點(diǎn)的元素。我覺(jué)得，虛線框的存在有它的合理性，但有時(shí)你也許無(wú)法回避某些”視覺(jué)潔癖”需求（如圖二：虛線框使“商品”背景和下面的紅色色塊分隔開(kāi)了），以下總結(jié)了去掉虛線框的幾種常用方法：
| 去除虛線框的方法 | 優(yōu)劣 | 兼容性 | 是否中斷tab |
|---|---|---|---|
| <a href=”#” onfocus=”this.blur()”>this blur</a> | 鏈接聚焦觸發(fā)時(shí)失去焦點(diǎn)，js和html耦合在一起 | 沒(méi)有兼容性問(wèn)題 | 是 |
| a:focus {outline:none}或 a{outline:none} | outline由css2.1引入，去除虛線框視覺(jué)上的問(wèn)題正是css的職責(zé) | ie6/ie7不支持,ie8+/ff /safari/opera[2]支持 | 否 |
| <a href=”#” hidefocus=”true” >hidefocus</a> | 該屬性是ie的私有屬性[3] | ie5+支持 | 否 |
| a { noFocusLine: expression(this.onFocus = this.blur())} | 可批量處理，但expression的性能問(wèn)題不能忽視 | expression ie6/7支持，ie8+、非ie不支持 | 是 |
綜合以上，去除鏈接虛線框的推薦方法是：ie下用hidefocus屬性，ff/chorme/opera/safari下用outline:none。即:
楊永全同學(xué)無(wú)奈地說(shuō)，如果頁(yè)面因?yàn)閛nfocus=”this.blur()”導(dǎo)致tab無(wú)法訪問(wèn)頁(yè)面全部?jī)?nèi)容，爭(zhēng)渡讀屏軟件在讀取頁(yè)面之前會(huì)強(qiáng)制過(guò)濾掉 這個(gè)屬性，但是如果用戶(hù)是在js里面動(dòng)態(tài)觸發(fā)this.blur(),讀屏軟件又要出新招來(lái)克制了。這無(wú)疑增加了讀屏軟件的開(kāi)發(fā)工作量，為了讓盲人用戶(hù)們 能更順暢的訪問(wèn)我們的網(wǎng)站，盡量避免使用onfocus=”this.blur()”哦。
注釋
[1]Safari默認(rèn)情況下，按tab鍵是不會(huì)focus鏈接的，但會(huì)focus表單域，在偏好設(shè)置-高級(jí)勾選“按下tab以高亮顯示網(wǎng)頁(yè)上的每一項(xiàng)”可開(kāi)啟該功能。Opera比較特殊，它通過(guò)shift+上下左右方向鍵可以向上下左右focus頁(yè)面焦點(diǎn)。
[2]在Opera下點(diǎn)擊鏈接（focus和active狀態(tài)）時(shí)都不會(huì)出現(xiàn)所謂的虛線框，所以O(shè)pera 下鏈接的虛線框問(wèn)題可以不計(jì)。 Opera 通過(guò)shift+上下左右鍵產(chǎn)生的線框通過(guò)outline:none并不能去除，但是Opera支持outline這個(gè)屬性。
[3]hidefocus屬性是ie的私有屬性，雖然hidefocus屬性有true or false兩個(gè)值，但測(cè)試結(jié)果是ie5-ie9不管其值為true or false, 只要添加hidefocus屬性，該鏈接都會(huì)失去虛線框。
