網頁無障礙性意味著建立人們能有效使用的網站，這包括使用螢幕閱讀器、僅用鍵盤導航、語音控制、螢幕放大器，或有色覺限制的人。在WordPress生態系統中，無障礙性在許多法域中是法律要求，也是接觸更廣泛受眾的實際方法——全球有超過10億人有某種形式的殘疾。
在本指南中，我們將介紹使您的WordPress網站無障礙的實用步驟，遵循Web內容無障礙指導方針（WCAG）2.2的AA級別——這是包括美國的ADA、歐盟的EAA和加拿大的AODA等無障礙法律最常要求的標準。
理解WCAG 2.2原則
WCAG圍繞四個原則組織，稱為POUR：
| 原則 | 意義 | WordPress範例 |
|---|---|---|
| 可感知 | 用戶可以通過視覺、聽覺或觸覺感知內容 | 圖片的替代文字、視頻的字幕、足夠的顏色對比 |
| 可操作 | 用戶可以導航並與界面互動 | 鍵盤導航、跳過鏈接、沒有鍵盤陷阱 |
| 可理解 | 用戶可以理解內容及如何使用界面 | 清晰的語言、一致的導航、錯誤消息 |
| 健壯 | 內容在不同的瀏覽器、設備和輔助技術上均可運作 | 有效的HTML、正確的ARIA角色、語義標記 |
選擇無障礙主題
您的WordPress主題的HTML結構和CSS構成了網站無障礙性的基礎。在選擇WordPress主題時，評估這些無障礙因素：
- 語義HTML：主題使用正確的HTML5元素（header、nav、main、article、aside、footer），而不是對所有內容使用通用的div
- 標題層次：H1 → H2 → H3遵循邏輯順序，沒有跳過層級
- 跳過鏈接：存在一個“跳到內容”鏈接作為第一個可聚焦元素，允許鍵盤用戶跳過導航
- 鍵盤導航：所有互動元素（鏈接、按鈕、表單）都可以用Tab鍵到達和使用
- 焦點指示器：聚焦的元素有可見的輪廓或高亮（不會因為outline: none而移除）
- 顏色對比：文本符合WCAG AA對比比率（正常文本4.5:1，大文本3:1）
在WordPress.org上標記為“無障礙準備”的主題已通過基本的無障礙性審查。然而，這個標籤表示的是一個起點，而不是完全符合WCAG的標準。在流行主題中，GeneratePress的代碼特別良好，具有乾淨的語義HTML和正確的ARIA標記。
圖片無障礙性
替代文字
每個有意義的圖片都需要描述性的替代文字。WordPress使這變得簡單——在媒體庫和插入內容中的圖片時，都可以使用替代文字字段。
| 圖片類型 | 替代文字方法 | 範例 |
|---|---|---|
| 產品照片 | 描述產品 | “紅色皮革斜挎包，金色扣，正面視圖” |
| 截圖 | 描述截圖顯示的內容 | “顯示12個活動插件的WordPress儀表板插件頁面” |
| 信息圖 | 總結關鍵信息 | “比較圖表：Elementor與Gutenberg功能。Elementor有100多個小部件，Gutenberg有90多個區塊” |
| 裝飾性圖片 | 空的替代文字（alt=""） | 背景圖案、分隔線、純裝飾圖標 |
| 圖表/圖形 | 描述趨勢或關鍵數據點 | “折線圖顯示網站流量從2025年1月到12月增加45%” |
圖片優化以提高無障礙性
- 不要使用文本圖片——請使用用CSS樣式化的實際文本
- 確保嵌入圖片中的文本符合對比要求
- 為複雜圖片（圖表、圖解）提供長描述，使用相鄰段落或longdesc屬性
- 確保圖片具有適當的尺寸，以免造成佈局偏移（CLS）
鍵盤導航
許多用戶完全使用鍵盤導航網站，
鍵盤操作—使用 Tab 鍵向前移動，Shift+Tab 鍵向後移動，Enter 鍵啟用連結/按鈕，空白鍵切換複選框和點擊按鈕，Escape 鍵關閉模態視窗。
常見的鍵盤可及性問題
- 焦點陷阱：不允許使用 Tab 鍵返回主內容的模態對話框（模態應該將焦點限制在模態內部，Escape 鍵應關閉它們）
- 缺少焦點指示器：移除聚焦元素的預設輪廓的 CSS（不要在全域使用 *:focus { outline: none }）
- 具有點擊處理程序的非互動元素：不支持鍵盤訪問的 div 或 span 具有 onClick 事件（應使用按鈕或連結）
- 僅在懸停時打開的下拉菜單：鍵盤用戶無法觸發懸停狀態。菜單應在聚焦/Enter 時也能打開
- 沒有 ARIA 的自定義組件：未正確設置 ARIA 角色和鍵盤處理程序的選項卡、手風琴和輪播
顏色與對比
WCAG AA 要求這些最小對比比率：
| 元素 | 最小比率 | 範例（通過） | 範例（失敗） |
|---|---|---|---|
| 正常文本 (<18px) | 4.5:1 | #333 在 #fff 上 (12.6:1) | #999 在 #fff 上 (2.8:1) |
| 大文本 (≥18px 或 ≥14px 粗體) | 3:1 | #555 在 #fff 上 (7.4:1) | #aaa 在 #fff 上 (2.3:1) |
| UI 組件（按鈕、輸入框） | 3:1 | 藍色 #2563eb 按鈕 (4.6:1) | 淺藍色 #93c5fd (1.8:1) |
| 非文本內容（圖標、邊框） | 3:1 | 深色圖標在淺色背景上 | 淺灰色圖標在白色上 |
使用 WebAIM 的對比檢查器或 axe 瀏覽器擴展等工具來驗證對比比率。不要僅依賴顏色來傳達信息—除了顏色編碼外，還應使用文本標籤、圖案或圖標。
表單可及性
表單是可及性最關鍵的領域之一。無論使用 Gutenberg 區塊、Gravity Forms 還是 WPForms：
- 為每個輸入添加標籤：使用與每個輸入相關聯的 <label> 元素，通過 for/id 屬性關聯。佔位符文本不能替代標籤
- 分組相關字段：對相關輸入組使用 <fieldset> 和 <legend>（例如，運送地址字段）
- 提供錯誤消息：當驗證失敗時，確定哪個字段出現錯誤並描述如何修復。使用 aria-describedby 將錯誤消息與其字段關聯
- 標記必填字段：使用 required 屬性，並用文本（不僅僅是星號）視覺上指示必填字段
- 支持自動填充：添加適當的自動填充屬性（name、email、tel、address-line1），以便瀏覽器可以自動填充表單數據
內容可及性
標題結構
正確的標題層次結構幫助螢幕閱讀器用戶理解頁面結構並在各部分之間導航。規則：
- 每頁一個 H1（頁面/文章標題）
- H2 用於主要部分
- H3 用於 H2 內的子部分
- 永遠不要跳過層級（H2 → H4 而不使用 H3 是不正確的）
- 不要將標題用於視覺樣式—應使用 CSS 類別
連結文本
避免使用在上下文中無意義的通用連結文本：
| 不佳的連結文本 | 可及的連結文本 |
|---|---|
| "點擊這裡" | "閱讀 WordPress 安全指南" |
| "閱讀更多" | "閱讀完整的 Elementor Pro 評測" |
| "了解更多" | "了解如何優化 WooCommerce 結帳" |
| "這裡" | "下載性能基準報告" |
表格
數據表應包括：
- <thead> 具有 <th> 元素的列標題（帶有 scope="col"）
- <th scope="row"> 用於行標題
- 描述表格目的的 <caption> 元素
- 簡單結構—儘量避免合併單元格，因為這對螢幕閱讀器來說難以解釋
測試您網站的可及性
| 工具 | 類型 | 測試內容 |
|---|---|---|
| axe DevTools | 瀏覽器擴展 | 自動化 WCA |
| G違規檢測 | ||
| WAVE | 瀏覽器擴展 / 網頁 | 帶有內聯註釋的可視化可及性評估 |
| Lighthouse | Chrome DevTools | 帶有分數和建議的可及性審核 |
| 鍵盤測試 | 手動 | 僅使用Tab、Enter和Escape鍵導航整個網站 |
| 螢幕閱讀器 | 手動 | 使用VoiceOver（Mac）、NVDA（Windows）或TalkBack（Android）進行測試 |
自動化工具大約可以捕捉到30-50%的可及性問題。使用鍵盤和螢幕閱讀器進行手動測試是必要的，以識別自動化工具無法檢測的基於互動的問題。
可及性的WordPress插件
- WP Accessibility：添加跳過連結，修復常見的可及性問題，為用戶偏好添加工具欄
- One Click Accessibility：添加前端可及性工具欄（字體大小、對比度、連結高亮）
- 具有可及性的起始模板： Astra和GeneratePress在其基本主題中均具有強大的可及性基礎
注意：可及性覆蓋插件（添加帶有“修復”按鈕的浮動小部件）受到可及性社群的廣泛批評。它們並不使網站可及——它們添加了一層表面化的覆蓋，實際上可能干擾輔助技術。專注於將可及性內建到您的主題和內容中，而不是依賴於覆蓋。
有關更多詳細信息，請參閱官方文件： WCAG 指導方針, WordPress 可及性團隊.
常見問題
WordPress一開始就可及嗎？
WordPress核心在可及性方面有了顯著改善。管理面板在很大程度上可以用鍵盤導航，而區塊編輯器包含ARIA標籤。然而，您網站的可及性在很大程度上取決於您使用的主題和插件。HTML結構不良的主題會削弱WordPress內建的可及性功能。
我法律上需要一個可及性網站嗎？
在許多司法管轄區，是的。ADA（美國）、歐洲可及性法（歐盟，2025年6月生效）、AODA（加拿大）及類似法律要求網站必須可及。具體要求取決於您的位置、業務類型和受眾。請諮詢法律專業人士以獲取針對您情況的具體要求。
可及性會影響SEO嗎？
是的，兩者之間有顯著的重疊。正確的標題結構、描述性alt文本、語義HTML、快速的頁面加載和移動友好性對可及性和SEO都有好處。遵循WCAG準則的網站通常排名更好，因為它們提供了根本上更好的用戶體驗。關於SEO最佳實踐，請參見我們的檢查表。
頁面構建器能創建可及性網站嗎？
Elementor和其他頁面構建器如果正確使用，可以創建可及性內容。關鍵是確保正確的標題層級，為圖像添加alt文本，使用語義小部件（按鈕而不是樣式化的div），並測試鍵盤導航。構建器本身並不決定可及性——您如何使用它才是關鍵。
WordPress網站上最常見的可及性錯誤是什麼？
圖像上缺失或不充分的alt文本是最常被報告的WCAG違規行為。第二常見的是顏色對比不足。這兩者都很容易修復——它們需要注意和持續的實踐，而不是技術專業知識。
我該如何使WooCommerce可及？
WooCommerce的默認模板具有合理的可及性。需要驗證的關鍵區域：產品圖像的alt文本、結帳欄位的表單標籤、購物車和結帳過程的鍵盤導航性，以及表單驗證失敗的可及性錯誤消息。使用可及性主題作為基礎可以顯著減少所需的WooCommerce特定工作。
