盲人站長深惡痛絕的onfocus=”this.blur()”

杭州最美的季節裡，淘寶無障礙訪問改善小組有幸邀請到盲人線上站長——爭渡讀屏團隊成員——楊永全同學和我們一起面對面交流網站無障礙訪問方面的問題。楊同學使用電腦必須使用讀屏軟體，就像他看不到我們的臉必須靠聲音識別我們一樣。在談到讀屏軟體操作頁面時，他對我們前端的同學特別的強調：他最深惡痛絕的就是頁面連結上有 onfocus=”this.blur()” 這句代碼，這從何說起呢？

(圖一)

各位同學，看到這句代碼有沒有覺得眼熟，對的，你懂的，我們常用它來去除連結取得焦點時外圍出現的虛線框（如上圖一），google一下，前面幾十頁談的都是這個去除虛線框的技巧。但我們也許以前從未想過：我們的這行代碼給盲人使用者們帶來了巨大的困擾：這中斷了盲人使用者的Tab鍵路徑，導致Tab游標無法聚焦頁面的下一個控制器（連結、表單域、object、image map等）。測試如下：

<body>
<a href=”#” >第一個連結</a>
<a href=”#” >第二個連結</a>
<a href=”#” onfocus=”this.blur();”>第三個連結</a>
<a href=”#” >第四個連結</a>
<a href=”#” >第五個連結</a>
<a href=”#” >第六個連結</a>
</body>

按下Tab鍵，第一和第二個連結都可以正常擷取焦點，繼續Tab到第三個連結時，悲劇出現了：此時焦點會回到第一個連結，而無法Focus到第四個連結，原因是當Focus到第三個連結時，onfocus=”this.blur()” 事件處理強制觸發了失焦，焦點重新回到文檔的最開始。於是不停按Tab的結果就是焦點在前面三個連結輪流轉，後面的內容通過Tab鍵無法訪問[1]。

（圖二）

那麼，有更好的方式嗎？從根源上看，加onfocus=”this.blur()”是為了去除連結擷取焦點後外圍的虛線框（當然chrome、safari、opera下的focus效果各異，這裡姑且就這麼叫吧 ）。W3C關於Outline的文章裡說明這個虛線框用來告訴使用者當前頁面擷取焦點的元素。我覺得，虛線框的存在有它的合理性，但有時你也許無法迴避某些”視覺潔癖”需求（如圖二：虛線框使“商品”背景和下面的紅色色塊分隔開了），以下總結了去掉虛線框的幾種常用方法：

去除虛線框的方法	優劣	相容性	是否中斷tab
<a href=”#” onfocus=”this.blur()”>this blur</a>	連結聚焦觸發時失去焦點，js和html耦合在一起	沒有相容性問題	是
a:focus {outline:none}或 a{outline:none}	outline由css2.1引入，去除虛線框視覺上的問題正是css的職責	ie6/ie7不支援,ie8+/ff /safari/opera[2]支援	否
<a href=”#” hidefocus=”true” >hidefocus</a>	該屬性是ie的私人屬性[3]	ie5+支援	否
a { noFocusLine: expression(this.onFocus = this.blur())}	可批量處理，但expression的效能問題不能忽視	expression ie6/7支援，ie8+、非ie不支援	是

綜合以上，去除連結虛線框的推薦方法是：ie下用hidefocus屬性，ff/chorme/opera/safari下用outline:none。即:

<a href=”#” hidefocus=”true” >連結</a>
a:focus {
    outline:none;
}

楊永全同學無奈地說，如果頁面因為onfocus=”this.blur()”導致tab無法訪問頁面全部內容，爭渡讀屏軟體在讀取頁面之前會強制過濾掉這個屬性，但是如果使用者是在js裡面動態觸發this.blur(),讀屏軟體又要出新招來克制了。這無疑增加了讀屏軟體的開發工作量，為了讓盲人使用者們能更順暢的訪問我們的網站，盡量避免使用onfocus=”this.blur()”哦。

注釋

[1]Safari預設情況下，按tab鍵是不會focus連結的，但會focus表單域，在喜好設定-進階勾選“按下tab以高亮顯示網頁上的每一項”可開啟該功能。Opera比較特殊，它通過shift+上下左右方向鍵可以向上下左右focus頁面焦點。

[2]在Opera下點選連結（focus和active狀態）時都不會出現所謂的虛線框，所以Opera下連結的虛線框問題可以不計。 Opera 通過shift+上下左右鍵產生的線框通過outline:none並不能去除，但是Opera支援outline這個屬性。

[3]hidefocus屬性是ie的私人屬性，雖然hidefocus屬性有true or false兩個值，但測試結果是ie5-ie9不管其值為true or false, 只要添加hidefocus屬性，該連結都會失去虛線框。