DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 優秀的網頁前端設計的一些指標
優秀的網頁前端設計的一些指標
編輯:前端技巧     
網頁的可訪問性,似乎只能由前端來重視並實現。這點挺可悲,作為可用性的一部分——可訪問性,居然只能由技術人員來掌控,這是我不願意看到的。但反過來,這給前端開發工程師們新增加了一個責任,同時為如何區分優秀的前端增加了一個指標. 事情的緣由是,前兩個禮拜打了個“飛的”去北京玩,見了一位在百度做前端的朋友。過去一年以來,這家伙就不停的在鼓動我去他們那個邪惡的公司。當然,見面之後就不能再當面稱呼人家是邪惡的公司啦,所以我就找了個理由,說你們那個“百度盲道”做得太垃圾了。他當然就很虛心的問我為什麼啦。所以我也只能很心虛的糊弄了幾句,說回上海之後詳細告訴他。
事情的緣由是,前兩個禮拜打了個“飛的”去北京玩,見了一位在百度做前端的朋友。過去一年以來,這家伙就不停的在鼓動我去他們那個邪惡的公司。當然,見面之後就不能再當面稱呼人家是邪惡的公司啦,所以我就找了個理由,說你們那個“百度盲道”做得太垃圾了。他當然就很虛心的問我為什麼啦。所以我也只能很心虛的糊弄了幾句,說回上海之後詳細告訴他。
回來之後,就馬上很虛心的翻出一本老舊的電子書——《Dive Into Accessibility》,認認真真的看了一遍。
然後驚奇的發現:
1. 雖然我沒看過這本書,但裡面講的大部分,我平日裡都有遵守。果然,堅持好習慣是值得表揚的。
2. 網頁的可訪問性,似乎只能由前端來重視並實現。這點挺可悲,作為可用性的一部分——可訪問性,居然只能由技術人員來掌控,這是我不願意看到的。但反過來,這給前端開發工程師們新增加了一個責任,同時為如何區分優秀的前端增加了一個指標。
好吧,下面我把這本Dive Into Accessibility的內容作一個摘要,看看對於可訪問性,應該要注意哪些問題:
1. 標明語言(Identifying your language)
這一條的意思是,加上lang屬性,如。如果其中有一段是其他的語言,就在那一段的標簽上加lang屬性。這一條我做得不好,以後記得。
2. 構建有意義的頁面標題(Constructing meaningful page titles)
有幾點值得一提:
a) 做頁面時,千萬不要忘記寫title。我見過好多頁面的title是“Untitled Document”或“新建頁面”,丟臉啊~
b) title到底應該是“小標題”在前呢,還是“大標題”在前?現在的慣例似乎都是“小標題”在前,比如“影音娛樂首頁_新浪網”。但我個人倒是有個看法,或許大標題在前比較好。這樣當我把“新浪網_影音娛樂首頁”、“新浪網_新聞中心首頁”放入收藏夾時,它們會因為音序排序而呆在一起,而不是散亂在各處。當然這個也不一定,僅供參考。
c) 對於英文的標題,一定要注意盡量不要把The放在title的前面,否則你的網頁在收藏夾裡就會被排在T開頭了。
3. 提供額外的導航輔助(Providing additional navigation aids)
這一條是說要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 這個。這個其實我知道。但是貌似對於頁面裡這麼多鏈接,要都加上rel和rev屬性,有點難度。
4. 先呈現主要內容(Presenting your main content first)
好啦,這就是一條典型的“指望優秀的CSS”的可訪問性原則啦。把<div class=”main”>放在<div class=”side”>的前面,其實挺考驗CSS技術的。一道著名的題目是:如何讓側欄固定寬度,主欄寬度自適應,同時主欄的HTML要在側欄 的前面。我很想放在我的面試題裡,可又覺得是不是太刁難了。但是,無論如何,這道題目很重要!
5. 用於跳過導航欄的鏈接(Skipping over navigation links)
很重要!這個在骨灰級網頁標准教程《網站重構》裡就提到了。只是有一點我比較懷疑,如果把skip link設為display:none,難道不怕被閱讀器也忽略掉麼?
6. 安全的使用顏色(Using color safely)
這條其實講了幾個要點:
a) 顏色對比要夠,否則眼神不好的人看起來費勁
b) 鏈接的顏色,最好用藍色(像我比較喜歡用#09c)
c) 鏈接最好有下劃線
7. 用“真鏈接”(Using real links)
意思是,即便這個鏈接是用於觸發Ajax,也要把Ajax代碼片段的URL放在href裡,好讓搜索引擎以及閱讀器等等能夠爬到。關於此條,請參看土豆網首頁的“挖土豆”一塊。
8. 給鏈接加“title”屬性(Adding titles to links)
這個還用說麼,可用性兩大重點:a的title和img的alt。
呼~~~先結束這第一回合吧。如果你對可用性感興趣,可以詳細的讀一下這本“Dive Into Accessibility”,尤其是前5節。然後可以再去看看那個可惡的“百度盲道”,我接下來會專門用一篇來詛咒這個忽悠障礙人士的無良黑心產品。

網頁的可訪問性,似乎只能由前端來重視並實現。這點挺可悲,作為可用性的一部分——可訪問性,居然只能由技術人員來掌控,這是我不願意看到的。但反過來,這給前端開發工程師們新增加了一個責任,同時為如何區分優秀的前端增加了一個指標.
9. 定義鍵盤快捷鍵(Defining keyboard shortcuts)
意思就是定義accesskey屬性。這個好說。有個關鍵是如何在浏覽器裡使用。IE裡是“alt+”,並且只是將焦點移過去,要點擊需要再按 enter;Firefox是“shift+alt+”,按下之後直接觸發點擊事件。Opera和Chrome還有Safari,我都沒試出來,有知情者 請告知。
 
除了accesskey,其實還有一個更重要的:tabindex。有時候需要改變默認的tabindex順序,以期得到更便利的體驗。舉個例子,如下格式的登陸框:
用戶名
記住我
密碼
忘記密碼
按照默認的順序,按下tab鍵,焦點會依次經過“用戶名”、“記住我”、“密碼”。但是似乎把“記住我”放在“密碼”之後更方便,畢竟不是所有的人 都需要使用“記住我”這個按鈕,尤其是多次使用這個登陸框的人,他很顯然是不喜歡“記住我”。所以應該用tabindex指定如下的順序:“用戶名”、“ 密碼”、“記住我”。
10. 不要打開新窗口(Not opening new windows)
文中的意思是,這樣會破壞浏覽器的“history”記錄,從而使浏覽器“後退鍵”無效。總算知道外國網站很少有新開窗口的緣故了吧,也總算知道為啥 XHTML標准要把a標簽的target屬性取消的緣故了吧。但這個似乎不符合中國用戶的習慣,還值得商討。不過有一些變通的方式可以考慮:
a) 頁面上給一個選框,選擇之後就自動把a標簽裡的target屬性移除,使得所有的鏈接都在本頁打開。
b) 新開窗口並不是到”_blank”,而是到一個指定名字的窗口,比如“new”。這樣所有新開的頁面都會到同一個窗口裡打開,至少在這個窗口裡,還是可以使用浏覽器的“後退鍵”的。(提一下,土豆網的視頻都是這樣的,開到同一個新窗口裡)。
11.定義首字母縮略字(Defining acronyms)
先說明一下,其實作者這裡對acronym這個詞理解不正確。acronym是指單詞的首字母合起來成為一個新的可讀的單詞,這個單詞未必是所有字母都大寫的,比如Nato(北大西洋公約組織)。所以HTML或是CSS算不上acronym,而
DOS、BASIC這種才算。像HTML或CSS這種,應該叫abbreviation,與其對應的是<abbr>標簽,但很遺憾,這個標簽IE6上無效。
12. 給你的日歷加上抬頭(Giving your calendar a real caption)
13. 使用真正的表頭(Using real table headers)
14. 為表格提供摘要(Providing a summary for tables)

把這三條合在一起說,就是要正確使用表格。其實表格的使用遠比這三條更多,建議大家仔細閱讀HTML權威指南。

網頁的可訪問性,似乎只能由前端來重視並實現。這點挺可悲,作為可用性的一部分——可訪問性,居然只能由技術人員來掌控,這是我不願意看到的。但反過來,這給前端開發工程師們新增加了一個責任,同時為如何區分優秀的前端增加了一個指標.
15. 忽略空白圖片(Ignoring spacer images)
一定記得給圖片加上alt屬性,哪怕它為空。其原因是如果不寫alt,有些閱讀器會直接把它的文件名或URL讀出來。
這讓我想起小時候讀過,說在發明數字0以前,人們都是用空位來表示的。這樣就很不方便啊。所以alt=”"就相當於數字0這個偉大的發明。
16. 使用真實的列表(或者正確的把它們偽裝起來)
這一條其實也是在講如果要用圖片作為列表前的icon,最好用CSS。但是沒有提到為什麼要用<ul>。其實這也是我一直糾結的問題:目前看 起來,除了出於“標簽語義化”的原教旨主義信仰,沒有更好的理由一定要用<ul>或<ol>。盼知情者告知。
17. 為圖片提供替換文本(Providing text equivalents for images)
18. 為圖片映射提供替換文本(Providing text equivalents for image maps
)
這兩條同15。
這裡我只是想說說兩個題外話:
a) 到目前這個年代,<map>標簽是否還有用?同樣的還讓我想起<applet>標簽。
b) 除了alt,還有兩個屬性:lowsrc和longdesc。有時間我會來看看目前的浏覽器對這兩個屬性的支持是怎樣的。
19. 使用真實的水平分割線(Using real horizontal rules)
它說的是使用<hr>比使用一張裝飾用的圖片好。(P.S. 原來hr是horizontal rule的縮寫哦,hoho)但似乎不用<hr>更好吧。
20. 使用相對字號(Using relative font sizes)
我好想遵守這個規則,但可惡的微軟把宋體做得除了12px,更小的字號就不能看。不過現在浏覽器都有zoom功能,相對字號或許也不像以前那麼迫切需要了吧。不管怎麼說,都怪IE!
21. 使用真實的標題(Using real headers)
除了SEO之外,文中提到,有浏覽器是可以專門撷取文中的標題,以提供方便的文內導航。這個功能就類似word裡面自動生成目錄的方法。
不過有一點值得注意,<h1>標簽的使用。它其實是指最能概括本頁內容的文字,而不是指看起來在標題的位置的文字(比如網站頂部 LOGO)。我之前一直犯一個錯誤,就是把網站的LOGO作為H1。事實上,比如搜索結果頁,很明顯“搜索XXX,一共XXX個結果”才應該作為h1標 題。
22. 給表單元素加上label標簽(labeling form elements)
這裡只有一個想和大家討論的:到底是用id和for來聯系,還是直接用label標簽把表單元素和文字框起來?你們的習慣是怎樣的?
23. 讓所有的內容都可被搜索(Making everything searchable)
這一條是個比較寬泛的產品層面的問題,這裡就不作討論了。
24. 建立可訪問性聲明(Creating an accessibility statement)
這個蠻好,詳情還是建議看原文。我有時間也會做掉。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved