開箱即用的網站可訪問性提升指南
本文首先介紹什麼是網站可訪問性、殘障人士如何訪問網站；然後提供一些開箱即用的建設無障礙網站的操作指南，讓你能夠立即在項目中使用；最後介紹了如何檢測網站的可訪問性。
什麼是網站可訪問性
網站可訪問性指的是殘障人士 (包括全盲和低視力、失聰和聽力衰退、學習障礙、精神局限、行動受限、語言障礙、光敏性以及多重殘障) 在使用網站時不會遇到障礙，也就是說他們可以認知、理解網站、在網站上導航以及與網站組件進行交互。
殘障人士如何訪問網站
殘障人士大概可以分為視覺障礙、聽覺障礙、肢體障礙和認知障礙四大類。每類群體都有特定的訪問網站的方式和頁面要求。
視覺障礙
主要包括色盲、色弱和全盲和視力衰退等。全盲用戶主要靠讀屏軟體來接收頁面信息；色盲和色弱的用戶對頁面色彩要求比較高，包括顏色的選擇和對比度的使用；視力衰退的用戶有時需要放大頁面上的文字和圖片來閱讀。
聽覺障礙
主要包括耳聾或者聽力衰退等。這類用戶對頁面上的一些音頻信息有一定的要求，包括音頻內容的可暫停、音量的調節、音頻字幕等。
肢體障礙
主要是肢體殘缺。這類用戶主要藉助一些軟體或者硬體來訪問網站，比如手臂殘疾者藉助一些物體敲擊鍵盤來訪問我們的網站。這就對我們網站的鍵盤可訪問性有很高的要求，其中包括能通過鍵盤聚焦頁面的交互組件、觸發相應的鍵盤事件來進行交互、快速導航到主要內容區域等。
認知障礙
主要包括學習障礙和聚焦障礙、語言障礙、精神局限等。這類用戶需要頁面內容清晰易懂、能夠重複多次閱讀、內容可以靈活調節，這就要求我們頁面上一些滾動區域的內容可以隨時停止和重啟、一些複雜的內容的能夠配以簡單易懂的說明文字、相同的鏈接使用相同的文字、頁面上動畫的設計不會引起用戶不適等。
讓你的網站無障礙
清晰的網站結構
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 AccessibilityWeb Accessibility In MindWAI-ARIA Authoring Practices 1.1Functional Accessibility Evaluator 2.0推薦閱讀：
※利用Dawn工程化工具實踐MobX數據流管理方案
※Yarn vs npm：你需要知道的一切
※如何用 Vue.js 實現一個建站應用
※已放棄了遊戲開發，不知道選擇什麼開發？