在之前的譯文《不得不知,關于無障礙設計的七件事》里的“為鍵盤用戶提供視覺聚焦指示”這一段提到現代css的reset file里往往有這么一條,這能讓按鍵、選框等界面ui元素在鍵盤選中時丟失高亮聚焦效果,也就是沒有了瀏覽器默認的淡藍色邊框。目的是什么呢?可能很大一方面是為了讓開發者自行提供自定義高亮樣式??杀氖菍τ诖蠖鄶祩€人網站來說,似乎根本就沒有人在意這點。設計師和開發者們把絕大多數的精力、時間都花在了酷炫的動效、精美的排版布局上,而鍵盤用戶矣然被排除在一般用戶之外,這不能不說是一大憾事。
請在你的css中去掉這一行
谷歌
不負眾望,在這一方面谷歌很好地遵循了無障礙設計法則,但也有一些缺憾。
搜索框高亮,藍色邊框、閃爍光標
下方按鍵高亮,同樣的藍色邊框?
上方doodle高亮選中,藍色邊框
下方頁腳鏈接,藍色邊框
可以看到,目前為止鏈接都以淡藍色邊框為選中樣式,但是這個樣式并不適用于所有元素,比如下圖所示,下劃線在此的可辨識度非常低,高亮樣式的一致性也有所欠缺。
右上角鏈接,下劃線
yahoo
雅虎的首頁內容非常繁雜,雖然做了很好的組合處理,但很容易陷進一個區域太深,我們很容易看到它并沒有采用太多的dropdown設計,這和它的內容類型不無關系。
左上角的主導航‘answer’,采用了自定義的虛線框高亮樣式
左側新聞分類導航的‘weather’,同樣的虛線框
右側quotes的輸入框,瀏覽器默認藍色邊框高亮
samsung
三星通過簡單的ctrl+tab和回車來控制dropdown menu,這同樣也被應用在其它無障礙性方案較為成熟的網站里。
上方導航條高亮選中,藍色邊框
下拉框高亮,藍色邊框
Apple
無需贅述,保留了瀏覽器默認的高亮樣式,對于這種現在頗為流行的一體導航條,邊框能夠明確限定有效范圍。但從緊湊圖片的高亮效果來看,瀏覽器默認的樣式方案顯然有提升的空間。
上方導航條高亮,藍色邊框
下方圖片高亮,藍色邊框
知乎
做得很不錯,由于知乎的品牌色原因,若能換種對比度更突出的顏色作為高亮樣式,會更加分。
?上方“設置”高亮,藍色邊框
“分享”按鍵高亮,藍色邊框
簡書
沒有完整的高亮方案,幾本是沿用了懸浮的標簽和輸入框高亮,在文章列表頁面完全丟失高亮樣式,非常遺憾。
左上方標簽
左下方標簽
右上角輸入框高亮
Smashing Magazine
讓人眼前一亮,除了完整的高亮解決方案,還提供了顏色來注釋,非常之醒目。
左側分類高亮
總結:
絕大多數網站能夠較好地實踐無障礙設計規范,簡書的表現則讓人大跌眼鏡。