每位網頁開發者都該知道的無障礙基礎

你用現代框架打造了一個時尚的網站，但當依賴螢幕閱讀器的使用者嘗試瀏覽時，卻迷失了方向。或者某個無法使用滑鼠的人發現你自訂的下拉選單根本無法開啟。無障礙不只是勾選清單上的一項——它是優質網頁開發的根本要素。在本文中，你將學會核心原則與實用技巧，讓你的網站能為所有人所用。

為什麼無障礙很重要

無障礙（常縮寫為 a11y）確保身心障礙者能夠感知、理解、瀏覽並與網頁互動。這包括視覺、聽覺、動作與認知障礙的人士。除了道德上的必要性之外，無障礙網站往往在搜尋引擎中排名更好、觸及更廣泛的受眾，並符合 ADA 或 WCAG 等法律要求。

此外，無障礙的改善對所有使用者都有益。清晰的標題、鍵盤快捷鍵和高對比度能幫助在強烈陽光下、網路緩慢時，或手部暫時受傷的人。這就是通用設計的精神。

核心原則：POUR

《網頁內容無障礙指南》(WCAG) 建立在四項原則之上，方便記憶為 POUR：

• 可感知 (Perceivable)： 資訊必須以所有使用者都能感知的方式呈現。為圖片提供替代文字、為影片提供字幕，並確保足夠的色彩對比。
• 可操作 (Operable)： 使用者必須能夠操作介面。確保所有功能都能透過鍵盤使用，並給使用者足夠的時間閱讀內容。
• 可理解 (Understandable)： 內容與操作必須可理解。使用清晰的語言、可預測的導覽和輸入輔助。
• 穩健 (Robust)： 內容必須能與當前及未來的輔助技術搭配運作。撰寫有效、語意化的 HTML。

從語意化 HTML 開始

無障礙的基礎在於為工作選用正確的 HTML 元素。螢幕閱讀器依賴元素的語意來傳達意義。<button> 會被宣告為按鈕，且預設可獲得焦點；而帶有點擊處理器的 <div> 則不會。

你應該使用的常見語意元素：

• <nav> 用於導覽區塊
• <main> 用於主要內容
• <h1>–<h6> 用於標題，並依邏輯順序排列
• <button> 用於可點擊的動作
• <a> 用於連結
• <ul>、<ol>、<li> 用於清單
• <label> 與表單輸入項關聯

例如，不要這樣寫：

<div>Submit</div>

而要這樣寫：

<button type="button">Submit</button>

這個簡單的改變讓控制項可獲得焦點、宣告其角色，並允許透過鍵盤啟動。

鍵盤導覽與焦點管理

許多使用者無法使用滑鼠。他們依賴 Tab 鍵在互動元素之間移動。請確保：

• 所有互動元素都能透過 Tab 鍵觸及。
• Tab 順序遵循邏輯順序。
• 焦點始終可見（不要在沒有替代方案的情況下移除外框）。
• 自訂小工具（如模態框或下拉選單）適當困住焦點，並在關閉時返回焦點。

拔掉滑鼠，只用鍵盤瀏覽來測試你的網站。你能存取每一項功能嗎？

ARIA：謹慎使用

當原生 HTML 不足時，ARIA（無障礙豐富網際網路應用程式）屬性可以增強無障礙性。然而，ARIA 的第一條規則是：如果能用原生 HTML，就不要用 ARIA。例如，使用 <button> 而非 <div role="button">。

當你確實需要 ARIA 時，常見屬性包括：

• aria-label 在沒有可見文字時提供標籤。
• aria-expanded 指示可折疊區塊是否展開。
• aria-hidden="true" 將裝飾性元素從螢幕閱讀器中隱藏。
• role 在沒有語意標籤時定義元素的用途。

不正確的 ARIA 可能讓情況更糟，因此請務必使用輔助技術進行測試。

色彩與對比

足夠的色彩對比確保低視力或色盲者能閱讀文字。WCAG 建議一般文字至少要有 4.5:1 的對比度，大型文字（18pt 以上或 14pt 粗體）則為 3:1。使用 WebAIM Contrast Checker 等工具來驗證。

此外，絕不要只依賴顏色來傳達資訊。例如，如果你用紅色表示錯誤，也應加上圖示或文字訊息。

圖片的替代文字

每張圖片都應該有 alt 屬性。其值取決於情境：

• 如果圖片傳達資訊，請簡潔描述：alt="A red warning triangle"。
• 如果是裝飾性的，使用空的 alt：alt=""。
• 如果是複雜的圖表，請在附近或透過 aria-describedby 提供較長的描述。

缺少替代文字是最常見的無障礙缺失之一，而且很容易修正。

測試網站的無障礙性

自動化工具可以找出約 30% 的問題。手動測試至關重要。以下是一個實用的工作流程：

1. 執行自動化稽核： 使用 axe DevTools、Lighthouse 或 WAVE 找出明顯的問題。
2. 鍵盤測試： 只用 Tab、Shift+Tab、Enter 和方向鍵瀏覽你的網站。
3. 螢幕閱讀器測試： 試試 VoiceOver (Mac)、NVDA (Windows) 或 Orca (Linux)。聆聽內容如何被宣告。
4. 縮放與對比： 縮放至 200%，檢查內容是否仍可使用。驗證對比度。
5. 使用者測試： 盡可能讓身心障礙者參與可用性測試。

應避免的常見陷阱

• 使用 div 或 span 來做按鈕和連結。
• 移除焦點外框卻沒有提供替代方案。
• 為可獲得焦點的元素加上 aria-hidden="true"。
• 將佔位符文字作為輸入項的唯一標籤。
• 自動播放有聲音的媒體。
• 色彩對比不足。

快速參考：該做與不該做

常見問題

WCAG A、AA 和 AAA 有什麼區別？

WCAG 符合性等級代表無障礙程度的提升。A 級是最低標準，AA 級是大多數法律引用的標準，AAA 級是最高等級，對所有內容而言往往不切實際。以 AA 級為目標。

我可以用 ARIA 修復所有無障礙問題嗎？

不行。ARIA 只應在原生 HTML 無法提供所需語意時使用。不正確的 ARIA 可能損害無障礙性。永遠優先使用語意化 HTML。

我該如何測試網站的無障礙性？

結合自動化工具（如 axe 或 Lighthouse）與手動檢查：鍵盤導覽、螢幕閱讀器測試和色彩對比分析。盡可能讓身心障礙使用者參與。

準備好改善你網站的無障礙性了嗎？從驗證你的 HTML 結構並檢查常見問題開始。若要快速進行 JSON 格式化與驗證，試試我們的 JSON Formatter，確保你的資料乾淨且結構良好。