本文首先介紹什麼是網站可訪問性、殘障人士如何訪問網站；然後提供一些開箱即用的建設無障礙網站的操作指南，讓你能夠立即在專案中使用；最後介紹瞭如何檢測網站的可訪問性。
什麼是網站可訪問性
網站可訪問性指的是殘障人士 (包括全盲和低視力、失聰和聽力衰退、學習障礙、精神侷限、行動受限、語言障礙、光敏性以及多重殘障) 在使用網站時不會遇到障礙，也就是說他們可以認知、理解網站、在網站上導航以及與網站元件進行互動。
殘障人士如何訪問網站
殘障人士大概可以分為視覺障礙、聽覺障礙、肢體障礙和認知障礙四大類。每類群體都有特定的訪問網站的方式和頁面要求。
視覺障礙
主要包括色盲、色弱和全盲和視力衰退等。全盲使用者主要靠讀屏軟體來接收頁面資訊；色盲和色弱的使用者對頁面色彩要求比較高，包括顏色的選擇和對比度的使用；視力衰退的使用者有時需要放大頁面上的文字和圖片來閱讀。
聽覺障礙
主要包括耳聾或者聽力衰退等。這類使用者對頁面上的一些音訊資訊有一定的要求，包括音訊內容的可暫停、音量的調節、音訊字幕等。
肢體障礙
主要是肢體殘缺。這類使用者主要藉助一些軟體或者硬體來訪問網站，比如手臂殘疾者藉助一些物體敲擊鍵盤來訪問我們的網站。這就對我們網站的鍵盤可訪問性有很高的要求，其中包括能通過鍵盤聚焦頁面的互動元件、觸發相應的鍵盤事件來進行互動、快速導航到主要內容區域等。
認知障礙
主要包括學習障礙和聚焦障礙、語言障礙、精神侷限等。這類使用者需要頁面內容清晰易懂、能夠重複多次閱讀、內容可以靈活調節，這就要求我們頁面上一些滾動區域的內容可以隨時停止和重啟、一些複雜的內容的能夠配以簡單易懂的說明文字、相同的連結使用相同的文字、頁面上動畫的設計不會引起使用者不適等。
讓你的網站無障礙
清晰的網站結構
1、通過 ARIA 中的 role 或者 HTML5 中語義化的標籤 <main> 、<header> 等來為頁面提供 Landmark，常見的有 Landmark 有 navigation、search、banner、contentinfo、complementary；
2、使用 H1 ~ H6 表示標題文字，用 H 元素組織頁面區塊；
網站樣式和內容
1、確保你的設計有足夠的顏色對比（字型顏色和背景色），這對低視力和色盲使用者有益。WCAG 2.0 AAA 級要求正常文字最小對比度為 7:1，大號文字為 4.5:1，AA 級的建議是正常文字最小對比度為 4.5:1，大號字型為 3:1；
2、顏色不作為傳遞資訊的唯一渠道，比如必填項、錯誤提示等資訊的傳遞；
3、為 <html> 標籤提供 lang 屬性；
4、當頁面內容的語言與 <html> 標籤語言不同時，使用 lang 屬性為內容標明語言；
5、儘量保證 DOM 順序和視覺順序一致；
6、頁面縮放時能保證內容排版的正常閱讀；
7、頁面中必須包含一個 <title> 元素，並且不能為空；
8、移除頁面上的 i 和 b 標籤，用 css 實現加粗等樣式。要強調的詞、短語和句子，請用 em，strong 實現；
9、最大化相容當前和未來的使用者代理(包括輔助技術)；
10、為頁面提供一個無障礙幫助文件的連結，用於說明頁面無障礙使用方法；
11、為頁面上的非文字內容提供替換文字，如圖片，ASCII，SVG， Charts，Graphs 等；
Form
1、form 表單裡面的表單元素必須有一個獨一無二的 label。一般通過 label 配合 for，id 使用或者aria-label，aria-labelledby 實現；
2、如果頁面上有多個表單，submit 和 reset button 必須是獨一無二的；
3、Invalid 的表單輸入值使用 aira-invalid 屬性標識非法性；
4、必填元素使用 required 或 aria-required 來標識；
5、錯誤資訊提示：為關聯的表單輸入項新增 aria-describedby 連結到錯誤提示 或者 使用 ARIA 中的 role = alert 或 Live Region；
6、input = images 必須有 alt 或者 titile 屬性，且不為空；
7、輸入框的描述文字或者錯誤提醒裡面應提供正確例子和格式說明；
8、使用 fieldset 和 legend 為表單內容提供說明文字；
Table
1、使用 th 來定義 row 或者 column 中資料的標題；
2、資料表格必須有 name 和 descption 且不能相同。使用 caption、summary、title、aria-label、aria-labelledby 等屬性實現；
3、儘量不要使用 table 佈局，僅用於資料展示；
Link 和 導航
1、連結應該聚焦在本頁面，如果需要在新視窗開啟頁面需要提前告知使用者該行為；
2、使用 aria-label，aria-labelledby 或 title 為連結提供說明文字，描述去向；
3、連結的描述文字必須是獨一無二的，相同的連結描述文字應該一致；
4、如果一個連結包含一個圖片和文字，並且 alt 中的內容和文字類似/相同，那麼 alt 的屬性應該為空；
5、保證不會的使用者不知情的情況下重新整理和跳轉頁面；
Image
1、為 img 標籤提供替換文字，使用 alt 或者 aria-labelledby 等屬性；
2、純裝飾性圖片提供 alt = “”，role = “presentation” 或者用 background-image 實現；
3、避擴音供與相鄰連結或文字類似/相同 的 alt 文字，造成冗餘；
4、為一組圖片的第一個 item 提供替代文字，比如商品評分star圖片組
5、提供圖片驗證碼的替代文字，並提供針對不同型別感官直覺的輸出方式，如語音驗證碼
6、有背景圖片的應該提供圖片缺失或者不可用時的背景色
Hn
1、每個頁面應該有且僅有一個 H1 標題且包含在 main 區塊或者 banner 區塊；
2、同級標題的內容必須是獨一無二的，不能相同；
3、H 標籤裡面必須包含可視性文字，H2 ~ H6 中除了 img 的 alt 屬性外，還應該包含文字內容；
4、標題合理巢狀，方便螢幕閱讀器理解文件結構， 如 H2 巢狀 H3，不要跳級巢狀；
鍵盤可訪問性
1、提供可以直接導航到主內容區域的連結和快捷鍵；
2、用 Tab 導航時，獲取 focus 的順序必須有意義，儘量和視覺效果保持一致，且在獲取焦點時樣式上要和未獲得焦點的元素不同；
3、頁面上所有的互動功能必須可以通過鍵盤來完成。不要使用雙擊處理程（onDblClick），因為鍵盤不能執行這個行為。滑鼠事件要提供對應的keydown、keypress、keyup、onfocus 等事件；
4、不要有鍵盤陷阱，保證使用者不會被困在某個彈窗裡（不能退出）或者迷失焦點元素裡。可以使用 tabindex = “-1” 從 Tab 順序中移除一個元素；
5、為頁面上的公有區域比如公共導航，提供可以直接跳過的快捷鍵；
6、保證提供的頁面快捷鍵不會和瀏覽器標準快捷鍵相沖突；
7、保證所有的 menu 子選單可通過鍵盤開啟並在其中導航；
多媒體和動畫
1、音訊必須要有配套的可替換文字和描述文字；
2、音訊內容在頁面載入時自動播放，超過 3s 的內容要讓使用者可以自主的暫停和重啟內容；
3、頁面上不要出現閃動頻率高於 3 次/s 的內容，以免引起不適；
4、如果使用者的互動是受時間限制的，需要提供一個方式讓使用者可以關閉，調整這個時間限制；
5、滾動內容或者自動更新的內容在頁面載入完成自動開始，更新或移動頻率低於 5s 時，需要提供一個可以停止和重啟的功能；
檢測網站的可訪問性
建站完成之後，可以使用一系列的測評工具對頁面的可訪問性進行檢測。其中包括使用測評外掛、鍵盤可訪問性檢測、內容檢測、螢幕閱讀器、其他方式等。
測評外掛
目前比較流行的測評外掛有 Chrome 的 WAVE，Firefox 的 Accessibility Evaluation Toolbar 。
鍵盤檢測
在只是用鍵盤的情況下訪問網站。
內容檢測
縮放瀏覽器 75% ~ 200% 進行檢測，看頁面上資訊展示是否完整。
螢幕閱讀器
使用主流的閱讀器主要包括 JAWS， NVDA， VoiceOver 來閱讀網站。
其他方法
邀請身邊的殘障朋友使用網站等。
參考文獻
Accessible Rich Internet Applications (WAI-ARIA) 1.0
網站內容無障礙指南2.0/Web Content Accessibility Guidelines (WCAG) 2.0 中文版
Test Your Site for Accessibility
Web Accessibility In Mind
WAI-ARIA Authoring Practices 1.1Functional Accessibility Evaluator 2.0