前言：大家不難發(fā)現(xiàn)，只要是招聘UED相關(guān)的崗位，如前端開(kāi)發(fā)工程師、交互設(shè)計(jì)師、用戶研究員甚至視覺(jué)設(shè)計(jì)師，一般都對(duì)web標(biāo)準(zhǔn)、可用性和可訪問(wèn)性的理解有要求。那么到底什么是web標(biāo)準(zhǔn)、可用性、可訪問(wèn)性呢？

一、web標(biāo)準(zhǔn)

簡(jiǎn)單的說(shuō)，就是HTML、CSS、JavaScript這三者分離。WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和 XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如 W3C DOM）、ECMAScript等。

web標(biāo)準(zhǔn)的優(yōu)點(diǎn)：

• 代碼的效率：在HTML文件中使用最精簡(jiǎn)的代碼，而把樣式和頁(yè)面布局信息包含進(jìn)CSS文件中。則放在服務(wù)器上的文件越小，下載文件需要的時(shí)間就越短。
• 易于維護(hù)：頁(yè)面的樣式和布局信息保存在單獨(dú)的CSS文件中，如果你想改變站點(diǎn)的外觀時(shí)，僅需要在單獨(dú)的CSS文件中做出更改即可。整站統(tǒng)一css則可帶來(lái)巨大的便利。
• 可訪問(wèn)性：上網(wǎng)用戶中那些視力受損的人，通過(guò)屏幕閱讀器使用鍵盤(pán)命令將網(wǎng)頁(yè)的內(nèi)容讀給他們聽(tīng)。以語(yǔ)義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離的HTML）編寫(xiě)的網(wǎng)頁(yè)文件，就可以讓此類用戶更容易導(dǎo)航，且網(wǎng)頁(yè)文件中的重要信息也更有可能被這些用戶找到。
• 設(shè)備兼容性：純HTML，無(wú)附加樣式信息，可以針對(duì)具有不同特點(diǎn)（如屏幕尺寸等）的設(shè)備而被重新格式化，只需要引用一套另外的樣式表即可。同時(shí)，CSS本身也可以讓你為不同的呈現(xiàn)方式和媒體類型（如在屏幕上閱讀網(wǎng)頁(yè)，打印網(wǎng)頁(yè)，在移動(dòng)設(shè)備上閱讀網(wǎng)頁(yè)等）規(guī)定不同的樣式表。
• 網(wǎng)絡(luò)爬蟲(chóng)/搜索引擎：搜索引擎使用“爬蟲(chóng)”，解析你的網(wǎng)頁(yè)。語(yǔ)義化的HTML能更準(zhǔn)確更快速的被解析，從而知道哪些才是重要的內(nèi)容，那么你的網(wǎng)頁(yè)在搜索結(jié)果中的排名就會(huì)大受影響。

二、可用性、可訪問(wèn)性

可訪問(wèn)性就是對(duì)所有人一視同仁，無(wú)論他們是否有殘障。

網(wǎng)站的用戶類型：

• 身體健康的用戶；
• 盲人或嚴(yán)重視覺(jué)障礙者，他們使用屏幕閱讀器來(lái)聽(tīng)取網(wǎng)站，或者通過(guò)點(diǎn)字顯示器來(lái)感知網(wǎng)頁(yè)；
• 近視者，需要將字體大小放大到200%；
• 患有運(yùn)動(dòng)性殘疾，因此無(wú)法用手操作鼠標(biāo)，而用點(diǎn)擊棒來(lái)操作鍵盤(pán)，或通過(guò)視線點(diǎn)擊器來(lái)操作網(wǎng)站的用戶；
• 使用移動(dòng)設(shè)備如常用的手機(jī)，或使用跟蹤球等不常見(jiàn)的計(jì)算機(jī)控制設(shè)備的用戶。

實(shí)現(xiàn)可用性、可訪問(wèn)性的方法

• 逐步強(qiáng)化你的網(wǎng)站功能，同時(shí)對(duì)支持性進(jìn)行測(cè)試。運(yùn)用“漸進(jìn)增強(qiáng)”和“平穩(wěn)退化”原則開(kāi)發(fā)網(wǎng)站。
• 允許用戶關(guān)閉有問(wèn)題的增強(qiáng)功能。
• 提供相同內(nèi)容或功能的替代版本。
• 就客戶端需要支持的技術(shù)向你的客戶提出建議，并舉例說(shuō)明哪些公司的產(chǎn)品支持這些技術(shù)。

可訪問(wèn)性良好網(wǎng)頁(yè)的特征

• HTML語(yǔ)義化、結(jié)構(gòu)化：HTML語(yǔ)義結(jié)構(gòu)提供了網(wǎng)頁(yè)的整體框架，提示他們?cè)谖募蛹?jí)中所處的位置，還有他們可以如何與各種頁(yè)面元素進(jìn)行交互，以及在適當(dāng)?shù)牡胤綄?duì)文本內(nèi)容進(jìn)行強(qiáng)調(diào)，幫助用戶獲得大量重要信息。如導(dǎo)航菜單例子：

  <ul>
  	<li>Menu Item 1</li>
  	<li>Menu Item 2</li>
  	<li>Menu Item 3</li>
  </ul>
  

  說(shuō)明：通過(guò)將導(dǎo)航菜單構(gòu)造為列表，就能很容易地讓那些使用屏幕閱讀器、同時(shí)無(wú)法看到列表的人知道這是個(gè)列表。因?yàn)樗麄兊钠聊婚喿x器會(huì)告訴他們這是一張列表。如果你沒(méi)有使用列表標(biāo)記，屏幕閱讀器就沒(méi)辦法知道這是列表，因此也就不能告訴使用者了。

• 替代內(nèi)容：文本可以作為頁(yè)面內(nèi)容的通用替代內(nèi)容，如img標(biāo)簽的alt屬性值、a標(biāo)簽的title屬性值。

  <a  title="淘寶聯(lián)盟大促銷">
  	<img alt="淘寶聯(lián)盟大促銷" src="images/app/sale.jpg"/>
  </a>
  

  說(shuō)明：文本內(nèi)容可以很方便地由屏幕閱讀器朗讀出來(lái)，也可以放大或縮小，還可以方便地改變其對(duì)比度，或者進(jìn)行其他許多變形操作。alt 屬性包含了對(duì)該圖片的簡(jiǎn)短描述，以便無(wú)法準(zhǔn)確看到該圖片的用戶（或搜索引擎）使用，title屬性負(fù)責(zé)對(duì)鏈接地址的詳細(xì)文本描述。

• HTML定義基本交互：實(shí)現(xiàn)tab選項(xiàng)卡搜索功能

  <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>
  

  說(shuō)明：先考慮基本交互（而不是僅僅只加載視覺(jué)效果的部分）的話，你就可以簡(jiǎn)化實(shí)現(xiàn)tab搜索效果?，F(xiàn)在我們可以只用一個(gè)表單來(lái)進(jìn)行所有的搜索，而同時(shí)仍然能實(shí)現(xiàn)tab選項(xiàng)卡效果（雖然這需要一點(diǎn)樣式和腳本）。通過(guò) AJAX 來(lái)插入頁(yè)面內(nèi)容，那禁用javascript的用戶將無(wú)法使用。

四個(gè)可訪問(wèn)性標(biāo)準(zhǔn)（WCAG 2.0）：

• 可感知：人們可以通過(guò)適合自己的媒體來(lái)獲知網(wǎng)頁(yè)內(nèi)容。比如應(yīng)當(dāng)讓盲人得以收聽(tīng)頁(yè)面內(nèi)容。例如，圖像應(yīng)該有文本對(duì)應(yīng)體。
• 可操作：人們可以與 web 應(yīng)用程序或內(nèi)容進(jìn)行交互。例如，用戶應(yīng)該可以不用鼠標(biāo)也能與某個(gè)網(wǎng)站進(jìn)行交互，并且可以通過(guò)屏幕閱讀器來(lái)進(jìn)行導(dǎo)航。
• 可理解：使用者可以弄懂頁(yè)面內(nèi)容和用戶界面。例如，正文不應(yīng)該比它需要的更加復(fù)雜，且網(wǎng)站應(yīng)以可預(yù)測(cè)的方式來(lái)運(yùn)行。
• 健壯性：所提供的一切服務(wù)都應(yīng)當(dāng)不受平臺(tái)或操作系統(tǒng)的限制。這樣就可以避免人們提供一些不太完善的服務(wù)，這些服務(wù)會(huì)因?yàn)橛布?軟件的限制而導(dǎo)致大多數(shù)人都無(wú)法使用。例如，不同設(shè)備上的瀏覽器能夠一起使用網(wǎng)站，且導(dǎo)航應(yīng)該是一致的。

說(shuō)明：網(wǎng)站并不是必須滿足全部這些要求，要視網(wǎng)站用戶類型而定，但為了實(shí)現(xiàn)可訪問(wèn)性，網(wǎng)站應(yīng)當(dāng)確保其頁(yè)面可以用一般的屏幕閱讀技術(shù)讀取。

總結(jié)：

可訪問(wèn)性是網(wǎng)站開(kāi)發(fā)質(zhì)量的一個(gè)衡量標(biāo)準(zhǔn)。如果你在開(kāi)發(fā)網(wǎng)站的時(shí)候（以及開(kāi)始開(kāi)發(fā)前）顧及你的使用用戶的話，你就能創(chuàng)建可用性、可訪問(wèn)性更好、更符合web標(biāo)準(zhǔn)的網(wǎng)頁(yè)，并且享受它所帶來(lái)的一切好處。