今天遇到一個非常有意義的問題，即無障礙網頁的設計思路。自己以前從來沒有考慮過這些問題，然而通過檢索發現，無障礙網頁設計真的非常重要。
在信息化如此發達的今天，我們的生活幾乎已經離不開網上訂票、公交查詢、新聞閱讀、網絡購物等等多種信息化服務。可是還有許多視力有障礙的人士，他們同樣需要這些多種多樣的信息化服務來豐富他們的生活。現在已經有一些讀屏軟件可以讓視力有障礙的人們通過聲音的方式來瀏覽網頁。然而，由於網頁的頁面結構本身在設計時的一些疏漏或不周，爲視力有障礙的人們閱讀網頁帶來一些困難。因此，從網頁設計伊始即融入無障礙網頁設計思想，將造福於千千萬萬有上網需求的有視力障礙的人們。
我搜集到一些重要的設計思路，分享給web前端開發人員，希望大家都從自己做起，共同爲有視力障礙的人士力所能及地做一些事情。
（一）中華人民共和國通信行業標準《信息無障礙－身體機能差異人羣－網站設計無障礙技術要求》
工業和信息化部在2008年發佈了中華人民共和國通信行業標準《信息無障礙－身體機能差異人羣－網站設計無障礙技術要求》（以下簡稱“行標” ）。行標中所涵蓋的人羣範圍非常廣，不僅包括我上面提到的視力有障礙的人士，還包括其他各類身體機能存在差異的人羣。下面是行標中的相應描述：
人們在獲取信息方面的障礙主要體現在視覺、聽覺、運動和認知障礙上，健全人由於某些原因也可能無法正常訪問網頁，具體類型如下：
- 可能無法看見、聽見、移動，不方便或完全無法處理某些類型的信息；
- 可能在閱讀理解文本方面有困難；
- 可能無法使用鍵盤或鼠標；
- 使用的可能是隻能顯示文本的顯示器、小顯示器或者低速的 Internet 網絡連接；
- 可能不會流暢地說或理解文檔書寫所使用的語言；
- 眼睛、耳朵或手在忙於做其他事情（例如駕車、在噪音環境下工作等）；
- 可能使用了早期版本的瀏覽器、完全不同的瀏覽器、語音瀏覽器或不同的操作系統
信息無障礙服務的目的是要幫助任何人在任何條件下獲取網絡信息，要保證網頁可以被任何人直接或藉助輔助工具訪問到，要求網頁設計做到以下幾點：
- 網頁內容必須是可感知的；
- 網頁內容中的界面組件必須是可操作的；
- 網頁內容和控件必須是可理解的；
- 網頁內容必須足夠健壯，能夠與當前及未來的用戶代理（包括輔助技術）協同工作
行標中沒有規定實現無障礙網頁設計的具體技術，而是給出相應的指導原則及評價標準。每項原則之下的規範的合格標準被劃分爲三個等級：
- 第 1 級合格標準
- 實現最低級別的無障礙訪問。
- 可以合理地應用到所有 Web 內容中。
- 第 2 級合格標準
- 實現強化級別的無障礙訪問.
- 可以合理地應用到所有 Web 內容中。
- 第 3 級合格標準
- 實現附加的增強的無障礙訪問。
- 並非必須應用到所有 Web 內容中。
1. 內容的可感知性
- 爲所有非文本內容提供替代文本
- 目的是確保所有非文本內容可用文本形式展現。在這裏，“文本形式”指的是電子文本，而不是文本的圖像。電子文本有一個獨特的優勢，那就是它可以從視覺、聽覺、觸覺上或者它們中的任何組合方式上被感知。從而，以電子文本表示的信息可以以用戶最容易接受的方式傳達給用戶。此外，它還可以很方便地被放大和朗讀，或者以任何觸覺方式呈現，從而使得內容可以更容易地被理解和傳播。
- 爲多媒體信息提供同步替代文本
- 本規定的目的是幫助獲取信息有障礙的人瞭解多媒體的信息內容。在很多對話中，音頻描述不能恰當地插入到對話中存在的停頓當中。爲多媒體內容提供同步替代內容的第 1 級合格標準中規定的方法允許用戶訪問多媒體中全部的信息。這種方法還允許用戶在音頻描述由於某些原因不可用的條件下以非可視化方式訪問可視化信息。對於包含交互功能的多媒體信息，交互元素（比如連接）應該可以被嵌入到全部多媒體信息的文本替代內容中。本節（在第 3 級合格標準中）也包含多媒體內容的手語翻譯以及擴展音頻描述的方法。在擴展音頻描述中，視頻播放可以被定時凍結，以便更多的音頻描述內容可以被插入到對話之間的停頓中。
- 保證信息和結構可以與表現相分離
- 本規定的目的是確保全部信息能以一種所有用戶都能感知的方式來傳遞。如果所有的信息能夠以一種可以由軟件決定的格式來傳遞，那麼它就可以以不同的方式（可視的、可聽的、可接觸的）呈現給用戶。如果信息被內嵌到一種特定的方式而使得信息不能和顯示分離，那麼信息就不能按照用戶的需要改變成其他格式。本規定中的合格標準都是爲了確保那些通常和顯示方式緊密結合在一起的信息能夠以不同形式存在，以便於它們可以以其他形式被顯示。
- 前景文字和背景要容易區分
- 某些規定致力於使信息能夠被顯示成各種替代格式。與它們不同，本規定強調的是使缺省的顯示方式能夠最大程度地可用於殘障羣體。本規定主要的着眼點在於使得用戶能夠更加容易地區分前景信息和背景信息。對於可視化顯示而言，這需要保證前景信息與背景信息之間有足夠的對比度；對於音頻內容而言，這需要前景聲音的音量要比背景聲音的音量足夠大。通常，具有視覺和聽覺障礙的用戶會在區分前景和背景信息方面有比較大的困難。
2. 內容中的接口組件的可操作性
- 所有功能都可通過鍵盤接口操作
- 如果所有的功能都能使用鍵盤來完成，那麼它們就可以通過語音（產生鍵擊輸入效果）、鼠標（通過屏幕軟鍵盤輸入）以及很多種模擬鍵盤輸入的輔助技術來支持。只要鍵盤輸入不具有時間無關性，那麼其他的輸入方式就不具備靈活性，也不能在不同類型的殘疾人中得到廣泛使用。有些設備不帶有傳統的鍵盤，比如 PDA 或手機。如果這些設備支持 Web 瀏覽功能，那他們就應該具備某種方式來生成文本或者鍵擊動作。本標準使用術語“鍵盤界面”來說明Web 內容應當能通過鍵擊動作來控制，這些鍵擊動作的來源可以是鍵盤、鍵盤模擬器或者其他能夠生成鍵盤或者文本輸入的硬件或軟件。
- 用戶在閱讀或與網頁交互時可以控制時限
- 相對於大多數用戶，某些用戶需要更多的時間來完成某項任務。他們需要花費更多的時間來作出反應，他們需要花費更多的時間來閱讀，他們可能有視力問題，需要花費更多時間來找到或閱讀所需信息，他們也可能需要通過某種花費更多時間的輔助技術來訪問信息。本標準的重點是確保用戶能夠有足夠的時間來完成任務。主要的途徑包括消除時間限制以及給用戶足夠的額外時間使他們能夠完成任務。在某些特定場景中，無法給予用戶額外的時間來完成任務，它們可以不受本規定約束。
- 允許用戶避開光敏性內容
- 有些人對光線過敏，可能會由於可視化內容的閃爍而導致疾病發作。大多數人直到疾病發作時才知道他們有這個問題。對這個問題，警告信息用處並不大，因爲它們常常被忽略，特別是被兒童忽略，因爲兒童可能並不能真正理解其含義。本規定的目的是確保避免使用那些哪怕只看一兩秒鐘也很容易導致光過敏的閃爍。
- 提供幫助用戶查找內容的機制
- 網頁中應提供一些幫助用戶查找內容的機制，引導他們在網頁中瀏覽，或者從一個網頁瀏覽到另一個網頁。本規定的目的在於幫助用戶發現他們所需要的內容並允許他們記錄這些內容的位置。對於有殘障的用戶，這類任務通常有一定難度。對於查找、導航、定位這類任務，最重要的一點是用戶能夠知道自己當前所處的位置。導航功能應該提供可能目的地的信息。讀屏軟件將內容轉換成合成語音，因爲是音頻數據，所以必須要以線性模式進行播放。本標準中的一些規定說明了需要採取什麼樣的措施才能使讀屏軟件的用戶能夠成功地在內容中進行導航。其他一些規定則允許用戶更加容易地分辯導航欄和頁面標題，以及跳過重複內容。
- 幫助用戶避免錯誤，並在出現錯誤時方便地加以糾正
- 每個人都會犯錯誤，但身體有殘障的人更容易出現輸入錯誤。此外，他們還比較難察覺自己犯了錯誤。由於在視覺、顏色感知方面的限制或者輔助技術的使用，典型的錯誤診斷方法對於他們來說並不是很明顯。本標準中相關規定的目的是減少發生不可逆轉的嚴重錯誤的數目，增加錯誤被檢查出來的可能性並幫助用戶瞭解應該如何糾錯。
3. 內容與控制的可理解性
- 文本內容可讀、可理解
- 本規定的目的是使文本內容能夠被用戶閱讀，或者藉助輔助技術閱讀，對於理解文本內容所需要的那些信息，要保證其可用性。用戶會通過很多不同的方式來理解文本的含義，有些人通過視覺方式，有些通過聽覺方式，有些通過觸覺方式，有些同時通過視覺和聽覺方式來理解。有些用戶在理解書寫的文字的時候非常困難，但當文本內容被大聲朗讀出來，或者當內容的關鍵部分被用視覺方式展現出來，或者被翻譯成手語後，他們甚至可以理解其中很複雜的含義。有些用戶很難從上下文中推斷出一個單詞或者短語的意思，特別是當這個單詞或短語以不常用的方式被使用，或者是具有特殊含義的時候。對於這些用戶，能不能閱讀和理解文本，取決於文本中是否提供了特殊定義或者縮寫詞的擴展形式。如果語種和文本的書寫方向不能被識別，一些支持語音功能或者圖形功能的用戶代理可能就無法正確地表達文本的含義。雖然對於大多數用戶來說這可能是個小問題，但對於某些用戶（例如視障者）而言，這會是個重大障礙。在某些情況下，如果不帶發音就無法確定文本的含義，則發音信息也必須提供。
- 內容的佈置和功能性是可預測的
4. 兼容性要求
- 兼容目前及未來的用戶代理（包括輔助技術）
- 本規定的目的是支持目前及未來的用戶代理，特別是輔助技術之間的兼容性。這可以通過以下措施來實現：
- 1） 保證創作的內容中不包含擾亂輔助技術的元素（比如，格式不合理的標記）以及輔助技術不支持的元素（比如使用不符合規定的標記或代碼）。
- 2） 以輔助技術能夠識別和交互的標準方式發佈信息。
- 由於技術更新迅速，輔助技術的開發人員在跟上技術潮流方面會遇到麻煩，因此很重要的一點就是內容要遵循約定併兼容相關 API，從而使輔助技術能夠更容易地與新技術相結合。
（二）無障礙網頁設計規範
下面我將該規範的內容進行總結和精簡，方便大家閱讀。
1. 對於聽覺及視覺的內容要提供相等的替代文字內容
網頁設計過程中，爲了展示的效果更美觀，我們往往用一些精美的小圖片來替代文字。但是這種非文字的元素會給藉助屏幕閱讀器來瀏覽網頁的用戶帶來困難。所以網頁開發者在網頁中遇到非文字的聽覺或視覺內容時，如果能同時提供同等內容的替代文字，將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。
示例：用alt說明圖片內容。
示例：用alt說明圖片內容。
<A href="routes.html">
<IMG src="topo.html" alt="前往體育館的路徑圖">
</A>示例：若圖片內容需要較長說明，可用longdesc另外連接一個頁面。
<IMG src="97sales.gif" alt="Sales for 1997 " longdesc="sales97.html">2. 不要單獨靠色彩來提供特殊資訊
對我們很多人的習慣而言，常用紅色表示重要內容等。但是這些顏色所傳達的信息可能對於視覺有障礙的人士而言不太方便。另外前景色與背景色的顏色太過相近，也會給使用者的閱讀帶來困難。所以我們在顏色的表示之外儘量還是用文字內容進行相應描述。
3. 適當地使用標記語言和樣式表單
應當按照標記和屬性本來的功能來使用，比如表格就是用來顯示錶格式的內容的，而儘量少用表格來排版等。
應當按照標記和屬性本來的功能來使用，比如表格就是用來顯示錶格式的內容的，而儘量少用表格來排版等。
示例：放大第一個字體，使用自定義的dropcap代替css的first-letter。
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...</P>
</BODY>4. 闡明自然語言的使用
網頁中最好能夠標明網頁所採用的語言，這樣方便屏幕閱讀器進行文字的識別，從而方便使用者可以順利地理解網頁的內容。
示例：用span標明語言的轉化。
示例：用acrony對縮寫做說明。
示例：在html文件起始位置標明網頁主要採用的語言。
<P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. </P>示例：用acrony對縮寫做說明。
<P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!示例：在html文件起始位置標明網頁主要採用的語言。
<HTML lang="fr">
....rest of an HTML document written in French...
</HTML>5. 建立編排良好的表格
應儘量減少使用表格排版。因爲屏幕閱讀器對於表格內容的讀取可能是“支離破碎”的，這樣不便於理解內容。最好用div+css的形式。如果必須需要用表格展示的內容，則最好在表格的行和列等位置給予總結性的提示信息。
示例：在表格裏先用summary說明用途，並在每一格中標上header以清楚地知道對應欄目。
<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator,the type of coffee (decaf or regular),and whether taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH id="header1">Name</TH>
<TH id="header2">Cups</TH>
<TH id="header3" abbr="Type">Type of Coffee</TH>
<TH id="header4">Sugar?</TH>
</TR>
<TR>
<TD headers="header1">T. Sexton</TD>
<TD headers="header2">10</TD>
<TD headers="header3">Espresso</TD>
<TD headers="header4">No</TD>
<TR>
</TABLE>6. 確保網頁能在新科技下良好地呈現
在應用新技術的同時也要對之前的舊技術保持良好的兼容性。
在應用新技術的同時也要對之前的舊技術保持良好的兼容性。
7. 確保使用者能處理時間敏感內容的改變
所謂“時間敏感內容”是指網頁上元素的“移動”、“閃爍”、“卷軸”等效果。這些效果動態性過強，可能讓某些有認知障礙或神經疾病的人士產生注意力分散甚至身體不適的狀況。另外有些有視覺障礙的人士所使用的讀屏設備對一些動態效果支持不好，這樣也會爲閱讀帶來難題。因此，對於這些效果展示方式，網頁開發者有必要儘量斟酌是否使用。
示例：比如不應該在meta裏限制時間，並重新載入網頁。
<META http-equiv="refresh" content="60">8. 設計設備獨立網頁
提供多種網頁的互動方式，使得使用者可以根據自身的情況來選擇最合適的設備。如網頁既支持鼠標操作，又支持鍵盤操作，還支持語音輸入等。
示例：用鍵盤的alt+C鍵開啓連結。
<A accesskey="C" href="doc.html" hreflang="en" title="XYZ company home page">XYZ company home page</A>示例：利用製表符tab鍵控制表單的填寫順序，以方便用鍵盤操作。
<FORM action="submit" method="post">
<INPUT tabindex="2" type="text" name="field1">
<INPUT tabindex="1" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</FORM>9. 使用過渡的解決方案
要充分考慮各個瀏覽器對網頁開發技術的支持程度，提升網頁對各個版本瀏覽器的兼容性問題。
要充分考慮各個瀏覽器對網頁開發技術的支持程度，提升網頁對各個版本瀏覽器的兼容性問題。
10. 使用官方訂立的技術和規範
網站開發時儘量使用國際通用標準的技術。因爲這些技術往往會對技術開放性和系統互通性有一定的考慮，可能更適合於更廣泛人羣和各種類型。
網站開發時儘量使用國際通用標準的技術。因爲這些技術往往會對技術開放性和系統互通性有一定的考慮，可能更適合於更廣泛人羣和各種類型。
11. 提供內容導引資訊
網頁在展示內容時，對於較爲複雜的網頁結構或者控件，應當對其進行分類並提供分類名稱或上下文提示。
示例：利用fieldset區分表單中不同類別，legend爲不同類別的標題。
<FORM action="http://example.com/adduser" method="post">
<FIELDSET>
<LEGEND>個人資料</LEGEND>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>醫療紀錄</LEGEND>
...medical history information...
</FIELDSET>
</FORM>示例：在下拉列表中把相關內容用OPTGROUP分類。
<FORM action="http://example.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="GROUP1">
<OPTION label="1.1" value="g1.1">第一項
<OPTION label="1.2" value="g1.2">第二項
<OPTION label="1.3" value="g1.3">第三項
</OPTGROUP>
<OPTGROUP label="GROUP2">
<OPTION label="2.1" value="g2.1">第一項
<OPTION label="2.2" value="g2.2">第二項
</OPTGROUP>
</SELECT>
</P>12. 提供清楚的瀏覽網站機制
網站具有清楚和一致的瀏覽機制（如恰當的分類導航等），都可以讓使用者更容易地找到需要的信息而不致迷失方向。
13. 確保簡單清楚的網頁內容
網頁內容應該清楚和簡單，這樣使用者可以更容易地理解網頁內容。太過正式或官方的用詞會給有認知或學習障礙的人士理解網頁資訊帶來困難。
希望大家都從自身做起，在工作的同時爲無障礙網頁的設計貢獻一點力量。
參考資料：
1. 中國信息無障礙行標指南
3. 無障礙網頁規範