|
上述腳本代碼的效果如下圖所示，通過切換Tab鍵顯示的下拉列表內容：
這里只看圖是體會不出這里可訪問性是如何切實提高的，您可以狠狠地點擊這里：Tab鍵可訪問的下拉菜單demo
無論是Firefox瀏覽器還是IE瀏覽器，不停的切換Tab切換鍵，當導航中的a標簽獲取焦點時（出現(xiàn)虛框，Chrome土橙色框，Safari藍框）（可見outline是可訪問性里面很重要的東西，沒事就設置outline:none;的人都是不明真相的盲從者），就會出現(xiàn)下拉菜單。此時下拉菜單中的列表項也可以通過Tab鍵獲取（如果下拉菜單不顯示，菜單列表是無法通過Tab鍵訪問的）。
于是，對于那些無法或不想使用鼠標的用戶而言，這里導航的可訪問性顯然更高一籌，因為，他們可以輕松使用鍵盤訪問導航里面的每一項內容，Tab切換，回車鍵訪問。
值得一提的是，對于Safari瀏覽器用戶，默認Tab切換元素是不高亮的，您需要在偏好設置里勾選此項，如下圖所示：
六、抓住最后一點尾巴
我知道“站著說話不腰疼”，放眼看看中國互聯(lián)網(wǎng)上的這些網(wǎng)站，絕大多數(shù)網(wǎng)站連個小眾用戶都沒有，更別談考慮到“鍵盤偏好用戶”了，人力有限，財力有限，所謂的這些可訪問性問題都只是些用錢的公司，有錢的網(wǎng)站有資本把玩的東西。成千上萬生死先上掙扎的中小網(wǎng)站，對于他們來講，本文的意義又何在呢？
我想，應該不少同行看過本文，知道了下拉菜單這類東西最好添加鍵盤可訪問的方法。但是多僅局限于只是知道而已，真正去付諸實踐的有多少呢，我是很懷疑的。所以從這點來講，本文的實際價值又似乎打了折扣了。所以，我自己并不奢望每個前端開發(fā)人員日后都開始重視鍵盤用戶的可訪問性問題，要為頁面重要的地方寫鍵盤事件，或者是本文重點演示的focus事件。
然而，雖然，我覺得為少了的鍵盤用戶、屏幕閱讀器用戶額外寫js方法在大多數(shù)網(wǎng)站是行不通的。但是，其實只要舉手之勞，我們也能夠讓自己網(wǎng)站的可訪問性更好，而這些看上去不起眼的操作實際上是更加有實際應用與推廣價值的，到底哪些“舉手之勞”呢？
首先，把網(wǎng)站CSS reset中的outline:0;，痛痛快快，舒舒服服地刪掉。
其次，凡事涉及到事件的元素，例如按鈕，選項卡等。都必須使用（或包含）a標簽或是表單元素（如button）。這不難理解，就拿本文時光網(wǎng)導航舉例，實際上導航中的a標簽去掉，同樣的腳本，已經可以實現(xiàn)下拉菜單的效果了�；蛟S有人反而會認為自己僅僅使用了ul, li標簽就實現(xiàn)下拉菜單效果沾沾自喜，認為自己去掉了榮譽的a標簽，HTML代碼夠簡潔，這就跟《媳婦的美好時代》里面的毛峰一樣，家里這個溫柔賢惠漂亮勤勞的老婆不要，跑去沾惹那個什么龍瑾，不要是看外表風騷，看知道內涵才行。
所以，我要看到只要ul,li標簽的導航覺得苗條性感，實際上只是個花花瓶子，里面需要有點內涵的東西——a標簽。a標簽本身的存在就是提高的頁面的可訪問性了。
所以呢，那些自以為代碼精簡、或是自認為a標簽虛框不好看而使用類似span標簽代替的做法，都是業(yè)余的，是可以輕松改進的。
然后，不要自以為的不要自以為邊緣處理后的文字似乎更好看，就把按鈕，選項卡的文字用圖片代替，連文字也不留兩個。你說屏幕閱讀器認識圖片嗎，還有，你就這么喜歡沒事來兩個圖片鏈接請求來虐待服務器嗎？所以，少用圖片代替文字，即使要代替，也要把文字藏在后面，注意是藏在后面，就是圖片不顯示文字就顯示，而不是隱藏掉。
最后，總結下，就是outline，a標簽，文字。如果您想做真正優(yōu)秀的網(wǎng)站，加一條，鍵盤響應事件。
七、結語加《盜夢空間》電影之旅
本來這篇文章預計9點就可以發(fā)布，結果拖到現(xiàn)在，為什么呢？啊，說來話長，當時我寫文章正進入體驗高峰狀態(tài)，突然外面有人敲窗戶，我以極慢的速度轉過頭，
盯著黑乎乎的窗外看了10秒鐘，眼睛共慢悠悠地眨了3下（1~2~3~），突然，眼前一亮，��！這不是芳芳同學嗎？我故作鎮(zhèn)靜的走過去，打開窗戶，“什么事？”只見其玉手拿出兩張黃黃的票子，說：“我這兒有兩種《盜夢空間》的電影票，多了一張，你要不要去看？”此言一出，我腎上腺素立即升高，“哇靠，這不是電視劇里才有的橋段嗎？”這等美事怎能放過，于是乎，我平生第二次和女生單獨看電影（第一次是和我妹）。不要問我后來怎么樣了，我現(xiàn)在腦子里有的就是：啊，電影很好看；啊，陸家嘴很美；啊，我的心情超好。
呼~~長噓一口氣，回到本文，關于本文……果然，還是不行，心情依舊沉浸在喜悅之中。算了，有什么問題評論交流。就這些，洗洗睡了~~
原文：http://www.zhangxinxu.com/wordpress/?p=1087
本文鏈接：http://m.95time.cn/tech/web/2010/7964.asp 
出處：zhangxinxu
責任編輯：bluehearts
上一頁 js下拉菜單實現(xiàn)與可訪問性的思考 [5] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 js下拉菜單實現(xiàn)與可訪問性的思考 [6]
