如何設計無障礙網頁？製作為盲人使用的網頁該注意哪些方面？
本題已收錄至知乎圓桌 殘障：我和少數人的生活，更多「身障人士（殘疾人）」相關話題歡迎關注討論。
想將現有的站點改為無障礙使用，因為有一部分盲人用戶。但是從來沒做過……之前看過盲人是如何瀏覽網頁的？
但是我們的網站經過盲協那邊的評定認為不足以被使用，所以求改進方法
我想如何做一無障礙網頁是個很難的題目。要考慮各種用戶群。
但是單純為盲人的話，實際上是很簡單的事情。
具體的注意點在其他幾個問題里也有提到過，搜索下也很容易找到。
我個人感覺：
首先要實現鍵盤操作能力。
其次要對圖片、動畫等非文字性信息加入文字描述。
最後就是用讀屏軟體做實際測試了。
一個網站的好壞，除了內容有創意、頁面優美、訪問速度快以外，用戶體驗是至關重要的。而這裡的「用戶體驗」中的用戶包括了如視力障礙者、聽力障礙者、閱讀障礙者等小眾用戶。一個沒有滿足無障礙設計的網站，是不能被這一個小眾群體訪問並使用的。尤其是視障用戶（也是訪問網站最多的障礙用戶）。他們藉助屏幕閱讀器，採用TTS（文字轉語音技術）將屏幕上的文字朗讀出來，使視力障礙用戶能與網站進行交互。由於本人是一名視障信息無障礙攻城獅，因此以下就以視障者的角度，從可用性、易用性兩個方面重點談談網站無障礙設計需注意的幾個點。
一、可用性。
可用性，顧名思義，至少要能滿足用戶可以使用該網站，好不好用另說。一般導致不可用的因素會有以下幾點：元素無法被TAB鍵focus、需點擊操作的元素無響應回車/空格鍵等點擊事件、滑鼠懸浮菜單無提供鍵盤的交互方式、鍵盤陷阱、僅提供圖形驗證碼的驗證方式等等。下面我們根據這些影響的因素逐個來說說實現無障礙的方法。
1.無法被TAB鍵focus：通常此類問題都是因為前端開發未按照&
2.需點擊的元素無響應回車/空格事件：上面有提到，未按照標準實現，採用自定義標籤綁定onclick進行響應操作會導致鍵盤用戶無法進行點擊操作，如&click me&此種方式對使用滑鼠操作的用戶而言，的確沒有任何障礙，但依賴鍵盤的用戶就無從下手了。為此，我們可以同時響應onkeydown事件進行回車/空格的點擊操作，並使用role=」button」貨role=」link」明確該元素控制項類型（用於告知用戶該元素可點擊）即可。
3. 滑鼠懸浮菜單無提供鍵盤的交互方式：現在很流行的設計，滑鼠划過、停留就會彈出下拉菜單，非常方便，界面清爽乾淨，也容易理解和管理。但對於鍵盤用戶而言卻無法呼出該下拉菜單，提供其他入口進入的，麻煩點多走幾步還是能進入，若為唯一通道則該功能模塊將會對鍵盤用戶完全封閉。常見的設計是，當TAB鍵focus到具有下拉菜單的元素後按空格鍵彈出菜單，esc鍵貨當TAB交點離開該區域時收起下拉菜單。同時也要在該元素添加aria-haspopup=」true」屬性，明確該元素具有彈出項目。若為菜單，還需將控制項類型設為role=」menu」、role=」menuitem」等。
4.鍵盤陷阱：當切換TAB鍵瀏覽網頁時，發現focus到某元素貨某區域後TAB交點會卡死貨在這個區域內幾個元素循環跳轉，這種現象我們稱之為「鍵盤陷阱」。此種情況常出現在多行編輯框中，人為的將TAB鍵作為四個空格的縮進，卻忽視了依賴此鍵遍歷網頁的鍵盤用戶。
5.僅提供圖形驗證碼的驗證方式：圖形驗證碼就是用於確保當前操作的是一個人而非機器而設計的，但視障用戶無法使用肉眼獲取驗證碼，只能通過屏幕閱讀器獲取後進行語音播報，導致被判定為非人類。這是一個國際性難題，也是一個安全與無障礙很難兼容的問題。因此，我們不去直接解決圖形驗證碼的難題，而採用其他渠道驗證的方式，如語音驗證碼、簡訊驗證碼等，同樣能達到驗證操作者是一個人的效果。
二、易用性。
易用性則是凌駕於可用性之上的，先要可以用才能談容易使用。相對可用性的嚴重問題而言，易用性的問題是較多的，也是當下網站普遍存在的。如圖片無描述文本、裝飾性圖片無屏蔽訪問、TAB交點順序不合理、控制項類型不明確、無關聯文本標籤、沒有合理設置landmark導航等諸多問題。
1.圖片無描述文本：很多網站logo、banner等圖片，本身帶有文字顯示的，設計人員往往不會進一步提供alt貨title屬性描述該圖片的內容。導致屏幕閱讀器訪問該圖片時只能朗讀出「圖片」卻無法得知該圖片的用途、傳遞出的信息、如何與之交互等。簡單的兩個屬性，方便了視障用戶的理解，更滿足了網站的設計規範。
2.裝飾性圖片無屏蔽：視障用戶藉助屏幕閱讀器，通過TAB鍵與上下左右方向鍵進行網站瀏覽的，如果這時候存在大量純粹是為了裝飾而添加的圖片元素，則會大大降低視障用戶的瀏覽效率。因此，對於純粹為了美觀而添加的裝飾性圖片，都應當屏蔽輔助器（屏幕閱讀器）的訪問。屏蔽方法也很簡單，若為&
3.TAB焦點順序不合理：我們都知道，對於一個用戶登錄表單而言，符合邏輯的操作順序應該是這樣的「輸入用戶名-&>輸入密碼-&>輸入驗證碼-&>勾選記住密碼-&>點擊登錄」。一旦編碼時沒注意，顛倒DOM順序，視覺順序不影響，但對於鍵盤用戶來說可就錯亂了。這樣的案例也有很多，此處就不點名了。解決辦法可從代碼層面上調整DOM順序，又或者適當使用tabindex來調整。但使用tabindex需要注意，若理所當然的將其順序設為1、2、3、4、5，這將會跳過前面所有元素優先訪問，這也是不推薦的，這樣不易於視障用戶理解網頁的布局結構。
4.控制項類型不明確：當自定義標籤實現的按鈕、鏈接、複選/單選框時，沒有正確使用role屬性明確控制項類型，視障用戶使用屏幕閱讀器訪問該自定義控制項時則無法知道如何與之交互。我們都知道，按鈕、鏈接可以用空格貨回車進行點擊，複選框可用空格勾選/不選，明眼用戶可通過視覺獲知，而視障用戶則通過控制項類型的語音播報獲知。
5.無關聯文本標籤：填寫表單時，通常會使用一段提示文本加一個操作控制項，如用戶名：&、&蘋果。屏幕閱讀器訪問第一個用戶名輸入框時也許能正確朗讀，但後面的checkbox就未必了，可能仍然朗讀「用戶名」。因此，正確的關聯至為重要，可使用&
6.沒有合理設置landmark路標：一個頁面都會有以下區域組成「橫幅區banner)、導航區(navigation)、主內容區(main)、搜索區(search)、頁腳信息區(contentinfo)」，滑鼠用戶可快速通過滑鼠滾輪定位到指定區域，而鍵盤用戶則需要通過規定的landmark路標進行快速跳轉。如將主內容區的&元素添加role="main"，此時鍵盤用戶只需通過特定的熱鍵即可一鍵抵達，其餘路標同樣如此。
當然，無障礙設計是一個非常龐大、非常專業的事情，從產品到視覺設計、交互設計，開發、測試全流程都需要參與並考慮的事情，不是通過這個篇幅就能說清的。以上只是根據我個人的經驗，盡量寫出最為典型的問題並給出我認為較為合適的解決方案。也許上述方案沒有完全按照相關標準實現，這是因為考慮到國內外眾多輔助器之間的兼容性，而不得已作出的取捨，儘可能去適配更多輔助器。以上若有說得不當，還請指正。
從另一個角度來審視本問題。
翻譯-盲人如何使用互聯網的8個誤區 ? 張鑫旭
全網站遵循WCAG2.0進行無障礙網頁設計，符合XHTML1.0技術規則，適用於盲用讀屏軟體。
1、全網站頁面可用鍵盤操作，不限於滑鼠。
2、網站設置導盲磚快速鍵（:::），使用者可快速到達各主要區塊。
3、網頁圖片均標示文字說明。
4、所有鏈接均添加提示文字。
5、對於網頁色調，框架、語言等提供了相應的改造辦法。
無障礙功能使用說明:
網站頁面分為四大區塊：左側選單區；主要選單區；右側選單區；頭部連結區。
快捷鍵設定如下：
Alt+C ：左側選單區，此區塊呈現各網頁的左側內容。
Alt+B ：主要選單區，此區塊呈現各網頁的主要內容。
Alt+N ：右側選單區，此區塊呈現各網頁的右側內容。
Alt+E ：頭部連結區，此區塊列有本網站的首頁頭部連結。
方式二：採用網站自動發聲技術，提供語音版網站。
將網站中英文網頁文字信息直接轉換成標準流暢的語音文件，用戶無須安裝或下載任何軟體便能通過瀏覽器聽取網頁內容，並可通過鍵盤數字鍵任意選擇不同頻道和欄目。
方式三：提供網站瀏覽輔助工具，適用於視力有障礙人群、認知能力有障礙的殘疾人和老年人。
1、自動朗讀網頁內容；
2、對網頁的顯示比例、文字及背景顏色進行定製；
3、支持網站的多語言版本；
4、提供語速調整、音量調整、放大顯示等個性化設置。
參考資料：中國殘聯網站實施無障礙改造 惠及盲人上網
不少政府網站已經推行無障礙化作為一個半盲和半個程序員來說兩句，其實都很簡單。對於驗證的問題，圖形驗證碼肯定是不行的，周圍的盲人朋友更加喜歡簡訊驗證。無障礙網頁還需要注意的就是一定要修改圖片的替換（）
對於驗證碼建議參考微軟的驗證方式！他有一個語音驗證。看看視障人士是用什麼上網的，例如推薦你了解一下盲文機，一種用凸點來作為I/O的設備。
自己蒙上雙眼親自體驗一下。
假設（我是未經用研瞎猜），單欄會比多欄更適合設計視障網頁。
語音介面有必要考慮一下。
類似tab按鍵的功能要多考慮。
其實視障也分程度，弱視是可以用放大設備來看，那網站可以用大字體、高對比度的色彩設計；對於失明人士，就不能用放大來簡單解決了。找准你的目標用戶，到底是視障人群、還是弱視人群、還是失明人群。沒有驗證碼
如果一定需要驗證，可以使用聲音驗證碼盲人使用網頁的話，首先默認盲人會通過鍵盤，而且僅有鍵盤來進行操作。
- 網頁主題設置為黑色， 文字顯示為暗色。目的為讓所有使用者跟盲人一樣在一個相對公平的處境，尊重盲人
- 鍵盤按鍵報聲音
- 簡單，容易操作
求問，是用語音功能是錄製一段語音然後放一個插件嗎？
推薦閱讀：
※網頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"？
※為什麼 Facebook、人人、知乎、Twitter這樣的社交平台喜歡藍色調為主？
※有哪些分享圖標資源的網站？
※本科生如何系統地學習前端開發？
※想要從零學起前端技術，有哪些靠譜的培訓學校？