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

在談到讀屏軟件操作頁面時,他對我們前端的同學特別的強調(diào):他最深惡痛絕的就是頁面鏈接上有 onfocus=”this.blur()” 這句代碼,這從何說起呢?
(圖一)
各位同學,看到這句代碼有沒有覺得眼熟,對的,你懂的,我們常用它來去除鏈接取得焦點時外圍出現(xiàn)的虛線框(如上圖一),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鍵,第一和第二個鏈接都可以正常獲取焦點,繼續(xù)Tab到第三個鏈接時,悲劇出現(xiàn)了:此時焦點會回到第一個鏈接,而無法Focus到第四個鏈接,原因是當Focus到第三個鏈接時,onfocus=”this.blur()” 事件處理強制觸發(fā)了失焦,焦點重新回到文檔的最開始。于是不停按Tab的結果就是焦點在前面三個鏈接輪流轉(zhuǎn),后面的內(nèi)容通過Tab鍵無法訪問[1]。

那么,有更好的方式嗎?從根源上看,加onfocus=”this.blur()”是為了去除鏈接獲取焦點后外圍的虛線框(當然chrome、safari、opera下的focus效果各異,這里姑且就這么叫吧 )。W3C關于Outline的文章里說明這個虛線框用來告訴用戶當前頁面獲取焦點的元素。我覺得,虛線框的存在有它的合理性,但有時你也許無法回避某些”視覺潔癖”需求(如圖二:虛線框使“商品”背景和下面的紅色色塊分隔開了),以下總結了去掉虛線框的幾種常用方法:
去除虛線框的方法 | 優(yōu)劣 | 兼容性 | 是否中斷tab |
---|---|---|---|
<a href=”#” onfocus=”this.blur()”>this blur</a> | 鏈接聚焦觸發(fā)時失去焦點,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無法訪問頁面全部內(nèi)容,爭渡讀屏軟件在讀取頁面之前會強制過濾掉這個屬性,但是如果用戶是在js里面動態(tài)觸發(fā)this.blur(),讀屏軟件又要出新招來克制了。這無疑增加了讀屏軟件的開發(fā)工作量,為了讓盲人用戶們能更順暢的訪問我們的網(wǎng)站,盡量避免使用onfocus="this.blur()"哦。
注釋
[1]Safari默認情況下,按tab鍵是不會focus鏈接的,但會focus表單域,在偏好設置-高級勾選“按下tab以高亮顯示網(wǎng)頁上的每一項”可開啟該功能。Opera比較特殊,它通過shift+上下左右方向鍵可以向上下左右focus頁面焦點。
[2]在Opera下點擊鏈接(focus和active狀態(tài))時都不會出現(xiàn)所謂的虛線框,所以 Opera下鏈接的虛線框問題可以不計。 Opera 通過shift+上下左右鍵產(chǎn)生的線框通過outline:none并不能去除,但是Opera支持outline這個屬性。
[3]hidefocus屬性是ie的私有屬性,雖然hidefocus屬性有true or false兩個值,但測試結果是ie5-ie9不管其值為true or false, 只要添加hidefocus屬性,該鏈接都會失去虛線框。
相關文章
15 個為編程初學者準備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章,我們將分享15個可以學習編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習,希望對你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對單位,一般用于pc端網(wǎng)頁開發(fā),因為是絕對單位所以在移動端上的使用體驗并不是很好,rem它是描述相對于當前根元素字體尺寸,是相對單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點,選擇適合的壓縮工具為將來做項目開發(fā)使用是一件很重要的事情??!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進程的,有瀏覽器主進程,網(wǎng)絡進程,渲染進程,插件進程等,在將html,css,javascript解析成一個頁面的時候,就需要多個進程的分工合作2023-05-01
- 本文為大家整理了常用的文件對應的MIME類型,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語言、跨平臺進行文本轉(zhuǎn)換、處理的要求2021-11-27前端實現(xiàn)字符串GBK與GB2312的編解碼(小結)
這篇文章主要介紹了前端實現(xiàn)字符串GBK與GB2312的編解碼(小結),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-12-02- 這篇文章主要介紹了告別硬編碼讓你的前端表格自動計算,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-27