前言:大家不難發現,只要是招聘UED相關的崗位,如前端開發工程師、交互設計師、用戶研究員甚至視覺設計師,一般都對web標准、可用性和可訪問性的理解有要求。那麼到底什麼是web標准、可用性、可訪問性呢?
簡單的說,就是HTML、CSS、JavaScript這三者分離。WEB標准不是某一個標准,而是一系列標准的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)。對應的標准也分三方面:結構化標准語言主要包括XHTML和XML,表現標准語言主要包括CSS,行為標准主要包括對象模型(如 W3C DOM)、ECMAScript等。
可訪問性就是對所有人一視同仁,無論他們是否有殘障。
<ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> </ul>
說明:通過將導航菜單構造為列表,就能很容易地讓那些使用屏幕閱讀器、同時無法看到列表的人知道這是個列表。因為他們的屏幕閱讀器會告訴他們這是一張列表。如果你沒有使用列表標記,屏幕閱讀器就沒辦法知道這是列表,因此也就不能告訴使用者了。
<a href="http://www.alimama.com" title="淘寶聯盟大促銷"> <img alt="淘寶聯盟大促銷" src="images/app/sale.jpg"/> </a>
說明:文本內容可以很方便地由屏幕閱讀器朗讀出來,也可以放大或縮小,還可以方便地改變其對比度,或者進行其他許多變形操作。alt 屬性包含了對該圖片的簡短描述,以便無法准確看到該圖片的用戶(或搜索引擎)使用,title屬性負責對鏈接地址的詳細文本描述。
<form action="search.html" method="GET"> <fieldset> <legend>Search within:</legend> <ul> <li><label for="dogs">Dogs</label><input id="dogs" type="radio" name="animal" value="dog" checked></li> <li><label for="cats">Cats</label><input id="cats" type="radio" name="animal" value="cat"></li> <li><label for="fish">Fish</label><input id="fish" type="radio" name="animal" value="fish"></li> </ul> </fieldset> <input type="text" id="searchfield" name="search"/> <input type="submit" value="Search"/> </form>
說明:先考慮基本交互(而不是僅僅只加載視覺效果的部分)的話,你就可以簡化實現tab搜索效果。現在我們可以只用一個表單來進行所有的搜索,而同時仍然能實現tab選項卡效果(雖然這需要一點樣式和腳本)。通過 AJAX 來插入頁面內容,那禁用javascript的用戶將無法使用。
說明:網站並不是必須滿足全部這些要求,要視網站用戶類型而定,但為了實現可訪問性,網站應當確保其頁面可以用一般的屏幕閱讀技術讀取。
可訪問性是網站開發質量的一個衡量標准。如果你在開發網站的時候(以及開始開發前)顧及你的使用用戶的話,你就能創建可用性、可訪問性更好、更符合web標准的網頁,並且享受它所帶來的一切好處。
參考網頁:
opera web標准課程
百度百科 web標准
轉載請注明轉自:http://www.heiniuhaha.cn/blog/?p=1378