目錄
我想你也許聴過「無障礙」這個詞，這個詞裡包含著同理心，它意味著多為他人考慮，盡可能地讓大多數的人都能無障礙地完成想做的事情。例如：
- 地鐵站裡的電梯，它可以讓行走不便的人，例如脚受傷的人、坐輪椅的人、拖著行李箱的人，都能順利出入站台。
- 有階梯的地方也會提供平坦的斜坡和扶手，這樣坐輪椅的人、騎自行車的人都能更容易地通過。
- 視頻中的字幕、聲音、手語，它考慮了不同人的需要，聴力不好的人可看字幕，視力不好的人可以聴語音、習慣手語的人則可以看手語。字幕不僅方便了聴力不好的人，對於聴力正常的人，當处於吵雜的環境或是不方便有聲音發出的場景，字幕也會很有用。
- 有的紅綠灯、扶梯會發出聲音，讓視力不好的人知道自己接近了這些設備。
- 醫院裡的衛生間往往還會有扶手，可以方便那些站不穩的人，也可以讓他們用來借力站起來。
無障礙不僅帮助那些身體障礙的人，也有利於每一個人。誰都會老去，身體機能會慢慢變差，做好無障礙，當我們老去時，當我們也成為有障礙的人時，我們也會從中受益。
這篇文章主要聚焦於無障礙的一個細類 ⸺ 網頁內容的無障礙，例如：
- 如何讓盲人、色盲、視力不好的人等也能正常訪問網頁？
- 有的人無法用鼠標，衹會用鍵盤，如何讓他們僅用鍵盤也能正常訪問網頁？
- 有的人患有 光敏性癲癇，如何避免引發他們的病症？
- 有的人的手會控制不住地震颤，他們無法精細地操作頁面元素，如何讓他們也能正常訪問網頁？
也許你是網頁的開發者，也許你是一個博客作者，希望上面的內容能讓你意識到網頁無障礙的重要性，同時重視無障礙設計。無障礙不是可有可無的，而是應讓在網頁設計之初就應該考慮在內的，是作為網頁開發者要力求保證的。無障礙設計可以讓盡可能多地人無障礙地訪問你的網頁，讓我們一起讓網絡世界變得更好。
網頁無障礙對 LLM 也有帮助，語義化好的頁面，也可以讓 LLM 更容易定位頁面的內容。
這篇文章我主要分享一些網頁無障礙的學習連結，提供一個整體的學習方向，具體如何實踐，還需要你花時間去閱讀和學習。
連結內容都是英文的，有的會提供多語言選項，有的可能還沒有翻譯，如果你閱讀英文有困難，可以試試 Kagi Translate。
什麼是網頁內容無障礙，以及為什麼要實踐網頁內容無障礙
What is accessibility? by MDN
無障礙設計是讓盡可能多的人都能使用網站的一種做法。傳統上，我們會認為這主要是為身心障礙者而設，但讓網站更容易使用，也能使其他族群受益，例如使用行動裝置的人，或網路連線速度較慢的人。
你也可以把無障礙設計理解為平等對待每個人，無論其能力或處境如何，都讓他們享有平等的機會。就像因為某人坐輪椅，就不讓他進入實體建築物是不對的（現代公共建築通常設有輪椅坡道或電梯），因為某人有視覺障礙就不讓他使用網站，同樣也不妥。我們各不相同，但都是人，因此享有相同的人權。
- Introduction to Web Accessibility by WAI
如何學習網頁內容無障礙
學習目標
- 能熟練一個屏幕閲讀器的使用，能够僅用屏幕閲讀器完成一些平時常用的操作
- 熟知 WCAG，知道為什麼、以及怎麼做
- 能熟練使用 WAI-ARIA
- 能找到頁面問題并修复
WACG
網頁無障礙的內容大多都出自 Web Content Accessibility Guidelines (WACG，網頁內容無障礙指引)，目前最新的版本是 Web Content Accessibility Guidelines (WCAG) 2.2，在學習網頁無障礙時，你可能會碰到很多裡面的概念，搞清楚它們的定義和關係，在閱讀文檔時就不容易暈頭轉向。
根據 WCAG 2 Layers of Guidance，在 WACG 裡，首先定義了 4 個 原則 (Principles) ，分別是：
- 可感知 (perceivable)
- 可操作 (operable)
- 易於理解 (understandable)
- 穩健 (robust)
你可以用 POUR 這個單詞來記憶 4 個原則。
在每個原則下，又派生了 13 個 指導原則 (Guidelines) ，進一步定義了目標，但它們本身不能測試。 13 個指導原則，又進一步擴展成許多的 成功準則 (Success Criteria, SC) ，它們是具體的，可被測試的指標。每個成功準則會 分成 A、AA、AAA 三個等級，A 是最低的等級，意味著這個成功準則很容易實現，也很容易測試；而 AAA 是最高等級，意味著這個成功準則實現要求更苛刻，判斷是否通過測試更困難（有時帶有主觀性）。要注意的是這些等級不是优先級，也不表示重要程度，每項成功準則對一個或多個使用者群體都很重要。具體要做到什麼程度，要基於自己的需要取舍，例如一個搶票功能，對時間有很高要求，就不容易滿足 Guideline 2.2: Enough Time 中的成功凖則。因為 A 等級的容易實現也容易測試，我認為至少滿足所有 A 等級的準則是一個比較好的起點。
你可以在 How to Meet WCAG (Quickref Reference) 查看所有的成功準則，也可以基於等級對它們進行過濾。
成功準則 (Success Criteria) 的縮寫是 SC，當你看到如 SC 1.1.1 ，你就可以知道這是一條成功準則。
為了方便開發者去滿足成功準則，WACG 還提供了很多 技術 (Techniques)，它們是一些示例，告訴你怎樣做會符合成功標凖，怎樣做是錯誤的。
你可以在 All WCAG 2.2 Techniques 查看所有的技術，不同的技術會用不同的縮寫，如 ARIA1 是 ARIA 相關技術，H2 是 HTML 相關技術。
以上就是 WACG 的組成，分別是：
- 原則 (Principles)
- 指導原則 (Guidelines)
- 成功準則 (Success Criteria)
- 技術 (Techniques)
它們是層層递進擴展的。
如何學習
熟悉無障礙工具與輔助技術
在開始學習前，請閱讀 Accessibility tooling and assistive technology 了解無障礙工具與輔助技術，挑選一些工具去熟悉它的操作，實際使用它們去瀏覧網頁。這樣你就能體會那些使用這些工具訪問網頁的人的感受，了解他們可能碰到的困難，也能發現自己網頁上的無障礙問題。
請不要跳過這一步，有的問題不去實際操作是無法體會的，自動化檢驗工具發現的問題也無法涵盖所有操作的問題，而且學會一種無障礙工具也許以後也會用到。我建議至少學會一個屏幕閱讀器的使用、瀏覧器自帶的無障礙檢查工具的使用，以及了解一些第三方檢測工具和網站。
博客中常見的網頁內容無障礙問題
最後在這裡整理一些我常看到的博客中的無障礙問題，如果你也是一位博客作者，希望對你有帮助。