淺談web標準、可用性、可訪問性

時間 2019-11-13

標籤淺談 web 標準用性訪問欄目 HTML 简体版

原文原文鏈接

1、web標準

簡單的說，就是HTML、CSS、JavaScript這三者分離。WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如 W3C DOM）、ECMAScript等。javascript

web標準的優勢：

代碼的效率：在HTML文件中使用最精簡的代碼，而把樣式和頁面佈局信息包含進CSS文件中。則放在服務器上的文件越小，下載文件須要的時間就越短。
易於維護：頁面的樣式和佈局信息保存在單獨的CSS文件中，若是你想改變站點的外觀時，僅須要在單獨的CSS文件中作出更改便可。整站統一css則可帶來巨大的便利。
可訪問性：上網用戶中那些視力受損的人，經過屏幕閱讀器使用鍵盤命令將網頁的內容讀給他們聽。以語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，就可讓此類用戶更容易導航，且網頁文件中的重要信息也更有可能被這些用戶找到。
設備兼容性：純HTML，無附加樣式信息，能夠針對具備不一樣特色（如屏幕尺寸等）的設備而被從新格式化，只須要引用一套另外的樣式表便可。同時，CSS自己也可讓你爲不一樣的呈現方式和媒體類型（如在屏幕上閱讀網頁，打印網頁，在移動設備上閱讀網頁等）規定不一樣的樣式表。
網絡爬蟲/搜索引擎：搜索引擎使用「爬蟲」，解析你的網頁。語義化的HTML能更準確更快速的被解析，從而知道哪些纔是重要的內容，那麼你的網頁在搜索結果中的排名就會大受影響。

2、可用性、可訪問性

可訪問性就是對全部人一視同仁，不管他們是否有殘障。css

網站的用戶類型：

身體健康的用戶；
盲人或嚴重視覺障礙者，他們使用屏幕閱讀器來聽取網站，或者經過點字顯示器來感知網頁；
近視者，須要將字體大小放大到200%；
患有運動性殘疾，所以沒法用手操做鼠標，而用點擊棒來操做鍵盤，或經過視線點擊器來操做網站的用戶；
使用移動設備如經常使用的手機，或使用跟蹤球等不常見的計算機控制設備的用戶。

實現可用性、可訪問性的方法

逐步強化你的網站功能，同時對支持性進行測試。運用「漸進加強」和「平穩退化」原則開發網站。
容許用戶關閉有問題的加強功能。
提供相同內容或功能的替代版本。
就客戶端須要支持的技術向你的客戶提出建議，並舉例說明哪些公司的產品支持這些技術。

可訪問性良好網頁的特徵

HTML語義化、結構化：HTML語義結構提供了網頁的總體框架，提示他們在文件層級中所處的位置，還有他們能夠如何與各類頁面元素進行交互，以及在適當的地方對文本內容進行強調，幫助用戶得到大量重要信息。如導航菜單例子：
```
<ul>
	<li>Menu Item 1</li>
	<li>Menu Item 2</li>
	<li>Menu Item 3</li>
</ul>
```
說明：經過將導航菜單構造爲列表，就能很容易地讓那些使用屏幕閱讀器、同時沒法看到列表的人知道這是個列表。由於他們的屏幕閱讀器會告訴他們這是一張列表。若是你沒有使用列表標記，屏幕閱讀器就沒辦法知道這是列表，所以也就不能告訴使用者了。html
替代內容：文本能夠做爲頁面內容的通用替代內容，如img標籤的alt屬性值、a標籤的title屬性值。
```
<a href="http://www.alimama.com" title="淘寶聯盟大促銷">
	<img alt="淘寶聯盟大促銷" src="images/app/sale.jpg"/>
</a>
```
說明：文本內容能夠很方便地由屏幕閱讀器朗讀出來，也能夠放大或縮小，還能夠方便地改變其對比度，或者進行其餘許多變形操做。alt 屬性包含了對該圖片的簡短描述，以便沒法準確看到該圖片的用戶（或搜索引擎）使用，title屬性負責對連接地址的詳細文本描述。java

HTML定義基本交互：實現tab選項卡搜索功能

<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

四個可訪問性標準（WCAG 2.0）：

可感知：人們能夠經過適合本身的媒體來獲知網頁內容。好比應當讓盲人得以收聽頁面內容。例如，圖像應該有文本對應體。
可操做：人們能夠與 web 應用程序或內容進行交互。例如，用戶應該能夠不用鼠標也能與某個網站進行交互，而且能夠經過屏幕閱讀器來進行導航。
可理解：使用者能夠弄懂頁面內容和用戶界面。例如，正文不該該比它須要的更加複雜，且網站應以可預測的方式來運行。
健壯性：所提供的一切服務都應當不受平臺或操做系統的限制。這樣就能夠避免人們提供一些不太完善的服務，這些服務會由於硬件/軟件的限制而致使大多數人都沒法使用。例如，不一樣設備上的瀏覽器可以一塊兒使用網站，且導航應該是一致的。

說明：網站並非必須知足所有這些要求，要視網站用戶類型而定，但爲了實現可訪問性，網站應當確保其頁面能夠用通常的屏幕閱讀技術讀取。瀏覽器