Taxodium
Taxodium订阅

學習網頁內容無障礙

目錄

我想你也許聴過「無障礙」這個詞，這個詞裡包含著同理心，它意味著多為他人考慮，盡可能地讓大多數的人都能無障礙地完成想做的事情。例如：

  • 地鐵站裡的電梯，它可以讓行走不便的人，例如脚受傷的人、坐輪椅的人、拖著行李箱的人，都能順利出入站台。
  • 有階梯的地方也會提供平坦的斜坡和扶手，這樣坐輪椅的人、騎自行車的人都能更容易地通過。
  • 視頻中的字幕、聲音、手語，它考慮了不同人的需要，聴力不好的人可看字幕，視力不好的人可以聴語音、習慣手語的人則可以看手語。字幕不僅方便了聴力不好的人，對於聴力正常的人，當处於吵雜的環境或是不方便有聲音發出的場景，字幕也會很有用。
  • 有的紅綠灯、扶梯會發出聲音，讓視力不好的人知道自己接近了這些設備。
  • 醫院裡的衛生間往往還會有扶手，可以方便那些站不穩的人，也可以讓他們用來借力站起來。

無障礙不僅帮助那些身體障礙的人，也有利於每一個人。誰都會老去，身體機能會慢慢變差，做好無障礙，當我們老去時，當我們也成為有障礙的人時，我們也會從中受益。

這篇文章主要聚焦於無障礙的一個細類 ⸺ 網頁內容的無障礙，例如：

  • 如何讓盲人、色盲、視力不好的人等也能正常訪問網頁？
  • 有的人無法用鼠標，衹會用鍵盤，如何讓他們僅用鍵盤也能正常訪問網頁？
  • 有的人患有 光敏性癲癇，如何避免引發他們的病症？
  • 有的人的手會控制不住地震颤，他們無法精細地操作頁面元素，如何讓他們也能正常訪問網頁？

也許你是網頁的開發者，也許你是一個博客作者，希望上面的內容能讓你意識到網頁無障礙的重要性，同時重視無障礙設計。無障礙不是可有可無的，而是應讓在網頁設計之初就應該考慮在內的，是作為網頁開發者要力求保證的。無障礙設計可以讓盡可能多地人無障礙地訪問你的網頁，讓我們一起讓網絡世界變得更好。

網頁無障礙對 LLM 也有帮助，語義化好的頁面，也可以讓 LLM 更容易定位頁面的內容。

這篇文章我主要分享一些網頁無障礙的學習連結，提供一個整體的學習方向，具體如何實踐，還需要你花時間去閱讀和學習。

連結內容都是英文的，有的會提供多語言選項，有的可能還沒有翻譯，如果你閱讀英文有困難，可以試試 Kagi Translate。

什麼是網頁內容無障礙，以及為什麼要實踐網頁內容無障礙

  • What is accessibility? by MDN
    無障礙設計是讓盡可能多的人都能使用網站的一種做法。傳統上，我們會認為這主要是為身心障礙者而設，但讓網站更容易使用，也能使其他族群受益，例如使用行動裝置的人，或網路連線速度較慢的人。 你也可以把無障礙設計理解為平等對待每個人，無論其能力或處境如何，都讓他們享有平等的機會。就像因為某人坐輪椅，就不讓他進入實體建築物是不對的（現代公共建築通常設有輪椅坡道或電梯），因為某人有視覺障礙就不讓他使用網站，同樣也不妥。我們各不相同，但都是人，因此享有相同的人權。 Source
  • Introduction to Web Accessibility by WAI

如何學習網頁內容無障礙

主要的學習資料來自 Web Accessibility Initiative (WAI) 和 MDN 的 Accessibility。

學習目標

  • 能熟練一個屏幕閲讀器的使用，能够僅用屏幕閲讀器完成一些平時常用的操作
  • 熟知 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)

它們是層層递進擴展的。

WAI-ARIA

提到網頁內容無障礙，你可能會想到 role 和 aria-* 屬性，它們都是 WAI-ARIA 中的一部分。

WAI-ARIA 的全称是 Web Accessibility Initiative – Accessible Rich Internet Applications, 即網頁無障礙倡議組織－無障礙豐富網際網路應用程式。

一般來說，應該盡可能用現有的 HTML 元素 去表達頁面的語義，例如导航用

，搜索框用 ，按鈕用 (而不是 div)。但有的頁面寫於語義元素出現之前；有的功能沒有對應的語義元素，例如 Tab、Carousel (輪播圖)；有的虽然有對應的語義元素，但它們的功能、樣式、可擴展性都不符合需要，例如 的功能有限，想實現功能更封富的日期選擇器。由於没有使用語義元素，所以它們是缺少語義的，這樣屏幕閱讀器就沒法很好的識別它們，於是 WAI 就提出了 ARIA，用來在 這些情况下 補充語義信息。

ARIA 由三個部分組成：

Roles定義了元素是什麼或能做什麼，例如 role="navigation" 可以標記导航連結，你也可以用 來實現。一般來說，能用 就用 ，不能用時才用 role="navigation" 去補充語義。

Properties這些屬性用來定義元素的特性，可賦予元素額外的意義或語義。例如 aria-required="true" 表示表單輸入欄位必須填寫才算有效。

States用來描述元素目前狀態的特殊屬性，例如 aria-busy="true" 會告知螢幕閱讀器某個元素正在被修改。

使用 ARIA 時，要確保你理解它的作用，宁可不加 ARIA，也不要用錯 ARIA。錯誤地使用 ARIA，屏幕閱讀器就會識別到錯誤的語義，反而會誤导別人。

WAI-ARIA 學習連結

如何學習

熟悉無障礙工具與輔助技術

在開始學習前，請閱讀 Accessibility tooling and assistive technology 了解無障礙工具與輔助技術，挑選一些工具去熟悉它的操作，實際使用它們去瀏覧網頁。這樣你就能體會那些使用這些工具訪問網頁的人的感受，了解他們可能碰到的困難，也能發現自己網頁上的無障礙問題。

請不要跳過這一步，有的問題不去實際操作是無法體會的，自動化檢驗工具發現的問題也無法涵盖所有操作的問題，而且學會一種無障礙工具也許以後也會用到。我建議至少學會一個屏幕閱讀器的使用、瀏覧器自帶的無障礙檢查工具的使用，以及了解一些第三方檢測工具和網站。

教程資料

在你掌握了工具的使用後，可以閱讀：

這兩個教程是不錯的起點，讀完應讓就對網頁內容無障礙有比較全面的了解了。還可以去讀一讀 Accessibility guides，裡面關於 顏色、鍵盤操作、認知無障礙、癲癇發作與身體反應的網頁無障礙設計 的內容都很值得一讀。

然後把 WACG 所有成功準則通讀一遍：

再把 也了解一下，知道有什麼 Roles 和屬性，以及怎麼用。

最後就是勤加實踐，在你的網頁上去應用學到的無障礙知識。

最重要的還是要有無障礙的意識、重視無障礙，也許你記不住那麼多的成功準則，但衹要你意識到當前的實現缺少無障礙考量，借助 LLM 你也可以快速地了解應該如何實踐。

博客中常見的網頁內容無障礙問題

最後在這裡整理一些我常看到的博客中的無障礙問題，如果你也是一位博客作者，希望對你有帮助。

下面提到的問題，如果包含在 WACG 中，我會給出對應的成功準則。如果我沒有給出，那很可能和 WACG 無關，是一些我個人認為和無障礙有關的問題。

Tab 焦點和順序

有的讀者會有鍵盤訪問你的頁面，他們可能會用 Tab 在頁面中移動，每次按 Tab 都會聚焦在一些可交互的元素上，如按鈕、連結、輸入框等，默認會用 outline 標記出來。

但是有的博客的 outline 很不明顯，甚至有的還隱藏了，這樣讀者按 Tab 時就不知道當前焦點在哪，Tab 就不可用了。

關於 outline 的樣式設置，你可以參考 Thomas Günther 的 Beautiful focus outlines。

另外還有個問題是聚焦的順序是否符合直覺，一般來說從上到下，從左到右 (這也取决於語言的 書寫方向) 是比較符合直覺的。如果你的焦點跳轉沒有規律，就可能讓讀者感到迷惑。你可以自己用 Tab 在頁面上測試一下。

相關成功準則： Understanding Success Criterion 2.4.7: Focus Visible

顏色和對比度

有的博客的文字顏色和背景色的對比度很小，字體也不大，對於視力正常的你或許能看清，但對視力低下或對比感知受損的人來說就很難看清了。可以考慮更換顏色，使對比度更高；也可以考慮適當調大字體，使文字更容易看清。

相關成功準則：

除了 WACG 對比度標準，還有另一個對比度標準 ⸺ APCA (Accessible Perceptual Contrast Algorithm, 可访问感知对比算法)，它更符合人的感知，另見 Zine#31::The Easy Intro to the APCA Contrast Method。

圖片上的替代文本

如果你的內容依赖圖片傳達信息，那麼圖片上應該用 alt 寫上合適的替代文字，屏幕閱讀器會朗讀替代文字，讓讀者了解圖片內容。有的博客放了圖片但沒寫替代文字，屏幕閱讀器就會朗讀圖片文件名，讀者不僅無法了解圖片內容，朗讀長串的文件名也會給他帶來干擾。

除了圖片，圖標、顏文字、Logo 等圖形類頁面內容都是要注意的地方。

關於如何加替代文字，推薦閲讀 WAI 的 Images Tutorial。

相關成功準則：

連結

有的博客的連結和文字的差別衹有顏色，但有的人可能對顏色不敏感，有的人會因為色彩而誘發癲癇，他們會將頁面設置成灰階，對於他們來說，就無法區分正文和連結了。

所以連結 不應該衹用顏色來區分，還應該加上其它視覺元素，最常見的就是下劃綫。

另外連結的文字要有意義，最好是單獨把連結拎出來也能知道連結是做什麼的。在屏幕閱讀器裡有一個功能，可以列出頁面上所有連結，如果連結內容無法傳達它們是做什麼的，讀者也會感到困惑。

相關成功準則：

也可以看看我之前寫的 一些關於連結的建議。

存在兩個方向的滾動條

有的頁面會同時出現橫向和緃向的滾動條，只滾動其中一個方向時，很容易造成另一個方向的偏移，給讀者的閱讀體驗很差。

關於橫向滾動條的問題，你可以參考 Artyom Bologov 的 Easy (Horizontal Scrollbar) Fixes for Your Blog CSS 進行修正。

相關成功準則： Understanding Success Criterion 1.4.10: Reflow

頁面有一些閃烁的內容

有的人可能患有 光敏性癲癇，當他們受到特定頻率或強度的閃爍燈光刺激，或是瀏覧規律移動的圖案時，就可能會誘發癲癇，嚴重的時候是會危及生命的。

不僅是動圖，一些高飽和、高對比的圖片也可能會誘發病症，你可以閲讀 Web accessibility for seizures and physical reactions 了解網頁中可能的誘因，以及相關的預防措施。

作為博客作者，應該避免那些閃烁的內容，像是動圖、視頻等會動的內容應該可以暂停，且默認是暂停的。如果非要顯示閃烁內容，請先顯示內容警告，再將其放在必須由使用者主動選擇才能觀看的位置（例如要求使用者點擊按鈕），或確保頁面連結上有清楚醒目的警告。

相關成功準則：Understanding Guideline 2.3: Seizures and Physical Reactions

頁要元素太多，太雜

有的人有認知障礙，複雜的頁面布局、晦澀難懂的大段文字、自動播放的音視頻、不必要的頁面動效等都可能會給他們的閲讀造成干擾。你可以閲讀 Cognitive accessibility 了解更多。

必須依赖 JavaScript 才能查看內容

除了防爬虫以外，我認為博客不應該要求讀者加載 JavaScript 才能看，展示文章并不需要 JavaScript。

有的博客也許是用 SPA (Single-page application) 構建的，現在很多框架都支持 Server-side rendering (SSR)，可以考慮改成服務端渲染，优先返回文章內容展示，一些交互等到用户允許 JavaScript 再啟󠄁用，體驗就會好得多。

更多相關討論見 請開啟 JavaScript 以繼續搜尋。

錯別字

字寫錯了，屏幕閱讀器讀出來也是錯的，讀者就可能聴不懂。寫完記得後多檢查一下。

一些詞語、縮寫等缺少解釋

有的行話、網絡用語、縮寫等并不是每個人都懂，提供適當的解釋有助於讀者理解你的內容。

相關成功準則：

感谢你的閱讀和訂閱，有什麼想法歡迎 郵件 跟我交流，祝好 :)

純文本版本 原始 org 文件

参与讨论