無障礙網站是什麼？WCAG 2.2、標章申請與中小企業 15 項檢查

無障礙網站是什麼？WCAG 2.2、標章申請與中小企業 15 項檢查

內容目錄 顯示
加入為 Google 偏好來源

無障礙網站，是讓不同能力、裝置與輔助科技的使用者，都能取得內容並完成主要任務的網站。常見設計包括圖片有合適的替代文字，互動元件可用鍵盤操作，文字與背景有足夠對比，而且表單錯誤能被清楚辨認及修正。

它不是在頁面旁邊加一個放大字級或切換對比的按鈕就完成。若選單無法用鍵盤展開，圖片沒有可理解的替代文字，或表單只有紅色框線卻沒有錯誤說明，使用者仍可能卡在閱讀、導覽或送出資料的過程。

來源：W3C WCAG 2 Overview、數位發展部網站無障礙規範（110.07）與無障礙標章申請與檢測作業說明（查證 2026-10-10）。W3C 資料用來確認 WCAG 2.2 的架構與等級；數位發展部資料用來確認台灣現行公開規範頁面與標章程序。本文將標準、檢測與標章拆開說明，不把自我檢查結果寫成合規或認證結論。

無障礙網站是什麼？

無障礙網站的核心，是讓使用者能感知資訊、操作介面、理解內容，而且能透過瀏覽器或輔助科技穩定取得結果。它關心的不是網站看起來有沒有「無障礙模式」，而是使用者能不能真的完成查資料、填表單、預約、購買或聯絡等任務。

無障礙不是單一功能，而是一條完整使用路徑

網站可以有漂亮的首頁，也可以在自動工具中拿到高分，但只要主要任務中有一個阻斷點，特定使用者就可能無法完成操作。

  1. 使用者能找到任務入口。
  2. 標題與導覽能說明目前位置。
  3. 每個操作元件都有可辨識的名稱。
  4. 使用鍵盤或輔助科技仍能操作。
  5. 發生錯誤時能知道原因與修正方式。
  6. 完成後能取得明確結果。

受影響的不只有視覺障礙者

網站無障礙經常被簡化成「給盲人使用」，實際涉及的情境更廣。視覺資訊需要能被替代內容表達；影音內容要考慮聽覺取得方式；需要精細拖曳或快速點擊的介面，可能阻擋肢體操作受限者；過長、難以預測或錯誤提示不清楚的流程，也會增加認知負擔。

  • 視覺取得：例如螢幕報讀、文字放大、足夠對比及不只靠顏色傳意。
  • 聽覺取得：例如影片字幕、音訊替代內容及重要聲音提示的文字說明。
  • 操作能力：例如鍵盤操作、清楚焦點、足夠大的目標及不依賴精細拖曳。
  • 理解與預測：例如導覽方式一致、按鈕名稱清楚、錯誤訊息可以理解，而且不要求不必要的重複輸入。

輔助科技需要正確結構，不只需要畫面看得見

螢幕報讀軟體會依頁面結構朗讀標題與連結，也會朗讀按鈕及表單控制項。若視覺上看起來像標題的文字只是放大字級，程式結構卻仍是一般段落，使用者就難以用標題快速導覽。

對企業來說，先避免「有人無法完成」

中小企業不一定能一次處理整個網站的每一項成功準則，但可以先用任務阻斷程度排順序：

  • P0 阻斷：使用者無法打開選單，填完表單，選擇方案或送出訂單。
  • P1 嚴重困難：可以勉強完成，但焦點不清楚，錯誤難以辨認，或內容缺少必要替代資訊。
  • P2 易讀與一致性：任務可以完成，但標題、連結文字、內容結構或操作回饋仍可改善。

來源：W3C Web Content Accessibility Guidelines 2.2與數位發展部網站無障礙規範（110.07）（查證 2026-10-10）。兩份規範都用四項原則組織要求，分別是可感知、可操作、可理解及穩健。本文的使用路徑與 P0／P1／P2 排序是中小企業改善方法，不是 W3C 或數位發展部的認證分級。

WCAG、台灣規範、檢測工具與無障礙標章差在哪裡？

WCAG 是國際技術標準，台灣網站無障礙規範是官方公開的本地規範架構，檢測工具用來協助找問題，無障礙標章則有特定申請與檢測程序。四者互相關聯，卻不能互相代替。

項目主要用途能證明什麼不能證明什麼
WCAG 2.2提供國際通用的網頁內容無障礙成功準則可作為設計、開發與檢測目標閱讀過標準不代表頁面已符合
台灣網站無障礙規範提供台灣官方公開的成功準則、檢測碼與稽核評量架構可用來理解本地檢測項目不能據此概括每個民間網站的法律義務
Freego、Lighthouse 或 WAVE自動或半自動定位部分程式與內容問題能建立待人工複核的問題線索高分或零錯誤不等於符合 WCAG 或取得標章
人工任務測試用鍵盤、輔助科技與實際流程驗證可用性能發現焦點、語意及動態互動問題單一測試人或單一頁面不能代表整站
無障礙標章依數位發展部公開程序提出申請與接受檢測核發後可證明該網站在核發程序中取得標章自行放置圖示或工具通過不能視為已取得標章

WCAG 2.2 是成功準則，不是一個外掛名稱

WCAG 是 Web Content Accessibility Guidelines，中文常譯為網頁內容無障礙指引。W3C 在 2023 年發布 WCAG 2.2，並於 2024 年更新該建議標準。W3C 目前鼓勵採用最新版本，但也明確說明 WCAG 2.2 沒有讓 2.1 或 2.0 失效。

  • A：符合全部 A 等級成功準則。
  • AA：符合全部 A 與 AA 等級成功準則。
  • AAA：符合全部 A、AA 與 AAA 等級成功準則。

台灣目前公開的是網站無障礙規範（110.07）

數位發展部無障礙網路空間服務網目前列出的規範頁面名稱是「網站無障礙規範（110.07）」。官方前言說明，台灣早期的網站無障礙規範 2.0 對應 WCAG 2.0，後續再參考 WCAG 2.1 增加行動裝置相關內容，新增 1 項指引及 17 項成功準則。

Lighthouse 100 分不等於網站已無障礙

自動工具很適合找缺少替代文字、表單名稱或色彩對比等可程式判斷的問題，但它看不懂每段替代文字是否真的表達圖片用途，也無法完整判斷鍵盤焦點順序是否符合任務邏輯。

  1. 用自動工具快速定位可重複偵測的問題。
  2. 回到原始碼或內容編輯器確認原因。
  3. 用鍵盤走一次主要任務。
  4. 用螢幕報讀或其他適用輔具複核名稱與順序。
  5. 修正後重跑工具，也重跑人工任務。

無障礙標章要經過申請、軟體檢測與人工檢測

數位發展部於 2026 年 7 月 9 日更新的標章作業說明，公開流程從 Freego 軟體檢測開始，接著登錄申請資料，完成自我評量，再進入申請資料與 Freego 審核，以及人工抽檢。

  1. 以 Freego 完成軟體檢測。
  2. 登錄會員與案件基本資料。
  3. 依稽核評量碼完成自我評量。
  4. 接受申請資料與 Freego 報告審核。
  5. 接受軟體及人工抽檢。
  6. 依結果取得標章、退回修正或限期改善。
  7. 配合身障者檢測。
  8. 標章期間接受不定期抽測。

WCAG 2.2 四大原則如何套用到實際網站？

WCAG 2.2 用四大原則組織成功準則：可感知、可操作、可理解及穩健。這四個詞不是四項勾完就結束的功能，而是檢查網站時的四個提問。

原則白話提問常見失敗快速人工測法
可感知使用者能以適合自己的方式取得資訊嗎？圖片沒有替代文字，影片沒有字幕，文字對比不足關閉圖片理解內容，放大文字，檢查字幕與對比
可操作不用滑鼠也能完成主要任務嗎？選單只能點擊，焦點看不見，彈出視窗困住鍵盤收起滑鼠，只用 Tab、Shift＋Tab、Enter 及 Esc 操作
可理解內容與操作結果能被預測和修正嗎？按鈕名稱模糊，欄位說明不足，錯誤只顯示紅框故意漏填或填錯，確認系統能指出欄位與修正方式
穩健瀏覽器與輔助科技能辨識元件結構嗎？自製按鈕沒有名稱，狀態更新沒有被報讀用開發工具看語意，再以螢幕報讀操作動態元件

可感知：讓資訊不只存在於單一感官或呈現方式

可感知不等於「畫面看得到」。網站要讓圖片、聲音、結構與色彩所傳達的重要資訊，能透過替代方式被取得。

可操作：每個功能都要有使用者能完成的操作方式

可操作最直接的檢查，是把滑鼠放到一旁，從頁面頂端開始只用鍵盤完成任務。Tab 通常向前移動焦點，Shift＋Tab 往回移動，Enter 或空白鍵啟動適用元件，Esc 常用來關閉對話框或選單；實際按鍵行為仍要符合元件慣例。

  1. 焦點是否先進入可預期位置。
  2. 每次移動時焦點是否清楚可見。
  3. 視窗與選單，以及摺疊內容能否開啟及關閉。
  4. 完成操作後，焦點是否回到合理位置。
  5. 過程中是否出現無法前進或離開的元件。

可理解：讓使用者知道現在發生什麼，以及下一步怎麼做

可理解涵蓋文字、導覽、標籤與錯誤處理。網站可以技術上可操作，但若按鈕只寫「更多」「確定」或「按這裡」，使用者仍可能無法預測結果。

穩健：讓程式結構能被瀏覽器與輔助科技理解

穩健性處理的是內容與使用者代理之間的相容。畫面上看起來像按鈕的方塊，若只是加上點擊事件的 <div>，可能沒有鍵盤行為，也沒有可供輔助科技辨認的按鈕角色。

哪些網站應優先處理，哪些改善可以分階段？

網站無障礙不應等到要申請標章才開始，也不適合把問題全部排成同一優先級。可採用的排序方式，是先看使用者是否能完成重要任務，再看受影響範圍與替代管道。

公共服務與高影響任務先排在前面

下列網站或功能通常值得優先檢查：

  • 提供民眾申請、查詢、繳費或取得重要資訊的公共服務。
  • 承接大量預約、報名、購買或聯絡需求的交易與表單。
  • 提供醫療、教育、金融服務，或協助就業與基本生活的重要任務。
  • 缺少其他可行管道，或替代管道成本很高的線上服務。
  • 正在改版，換系統或大量新增內容，能在開發階段一起修正的網站。

用五個問題判斷頁面優先級

團隊可以為每條使用路徑回答五個問題。以下是內部排序的假設計分：每項 1 至 3 分，分數愈高愈優先；後面的 12／15＝80％只表示這套自訂量尺的相對位置，不是 WCAG 符合率或使用者成功率。

  1. 任務是否重要：失敗會不會阻擋申請、付款、預約或聯絡？
  2. 影響範圍多大：這條路徑有多少使用者與多少頁面共用？
  3. 有沒有替代方式：使用者能否用合理成本改走電話、Email 或現場服務？
  4. 問題是否會重複：錯誤來自共用選單、表單元件或內容模板嗎？
  5. 修正時機是否成熟：是否正好在改版，能用較低成本一起處理？
  • 任務重要性：3 分。
  • 影響範圍：2 分。
  • 缺少替代方式：3 分。
  • 問題重複性：2 分。
  • 修正時機：2 分。
  • 優先級總分：3 ＋ 2 ＋ 3 ＋ 2 ＋ 2 ＝ 12 分。
  • 可得最高分：3 × 5 ＝ 15 分。
  • 相對優先比例：12 ÷ 15 × 100％ ＝ 80％。

第一階段先修會阻斷任務的 P0

P0 問題代表使用者無法完成主要任務。常見情況包括選單無法用鍵盤開啟，焦點被困在彈出視窗，表單欄位沒有可辨識名稱，或送出失敗後沒有任何可理解的訊息。每筆修正至少保留以下驗收紀錄：

  • 受影響任務與頁面範圍。
  • 重現步驟與使用的操作方式。
  • 修正前的阻斷證據。
  • 修正版本與負責人。
  • 鍵盤及適用輔助科技的驗收結果。

第二階段處理 P1 的嚴重困難

P1 問題不一定直接阻斷任務，但會讓完成成本顯著提高。例如焦點外框太不明顯，連結文字重複寫成「了解更多」，錯誤訊息沒有提出修正方向，或影片缺少必要字幕。

網站無障礙檢查前要準備什麼？

無障礙檢查不是打開一個工具掃描全站。開始前要先決定測哪些任務，建立可重跑的測試條件，再準備鍵盤、瀏覽器、輔助科技與自動工具。少了範圍與紀錄，同一個人隔天重測都可能得到不同結論。

先選出最重要的三個使用者任務

第一步不是選頁面，而是選任務。使用者來到網站通常不是為了欣賞首頁，而是要完成查詢、預約、購買、下載或聯絡等目的。

  1. 從首頁找到服務介紹，再進入預約表單並成功送出。
  2. 從文章搜尋答案，再透過聯絡入口提出問題。
  3. 從商品頁選擇規格，加入購物車並完成結帳確認。

用頁面範本取樣，避免只測同一種內容

一個網站可能有數百個網址，卻只使用十幾種頁面範本。先盤點首頁與文章，再盤點列表與搜尋，接著納入表單、登入、會員及交易等範本。從每類選出代表頁面，可以比隨機抽網址更容易找出共用問題。

  • 一個主要入口頁。
  • 一條完整關鍵任務。
  • 一個含圖片與長文的內容頁。
  • 一個需要輸入資料的表單。
  • 一個有選單、彈出視窗或動態更新的互動頁。
  • 桌面版與行動版呈現。

固定測試環境與基準版本

每次檢查都要記錄日期、網站版本、網址、登入狀態、瀏覽器、視窗尺寸及使用工具。動態網站還要記錄測試資料與功能旗標，避免不同人其實測到不同畫面。

  • 測試日期與時間。
  • 環境可能是正式站，也可能是測試站或本機。
  • 完整網址與頁面範本。
  • 桌面或行動版視窗尺寸。
  • 瀏覽器與主要輔助科技版本。
  • 使用的測試帳號與資料類型，不記錄密碼。
  • 程式版本、內容更新時間或可識別的版本標記。
  • 自動工具名稱及報告檔案位置。

鍵盤是基本工具，螢幕報讀則要選定測試組合

鍵盤檢查不需要額外安裝工具。先確認作業系統與瀏覽器允許 Tab 移到互動控制項，再用 Tab 往前，Shift＋Tab 往回，Enter 或空白鍵啟動適用元件，Esc 關閉可退出的選單及對話框。

  • 選用哪一種測試組合。
  • 測了哪些任務與元件。
  • 預期朗讀的名稱、角色、狀態及結果。
  • 實際朗讀或操作發生什麼。
  • 尚未測試的組合與限制。

自動工具負責定位，人工測試負責判斷

Lighthouse、WAVE、Freego 與對比檢查器的用途不同。申請台灣無障礙標章時要依官方程序使用當下指定工具；一般網站健檢則可以組合多種工具，但報告要保留工具名稱、版本、頁面及執行時間。

統一問題紀錄格式，修正後才能重測

每一筆問題至少寫清楚七項：

  1. 位置：網址、頁面區塊與元件名稱。
  2. 重現：從哪一步開始，使用哪些按鍵或工具。
  3. 實際結果：使用者目前看到，聽到或無法完成什麼。
  4. 預期結果：應該能取得什麼資訊或完成什麼操作。
  5. 影響：阻斷哪些使用者與任務。
  6. 依據：對應成功準則或內部設計規則。
  7. 證據：截圖、錄影、工具報告或去識別化日誌。

來源：W3C WAI Easy Checks、W3C WCAG 2.2與數位發展部無障礙標章申請與檢測作業說明（查證 2026-10-10）。W3C Easy Checks 用來確認初步檢查的範圍與鍵盤測試方法；WCAG 用來對應成功準則；數位發展部資料用來確認申請標章時有指定的軟體檢測、自我評量及人工檢測程序。本文的取樣與七欄問題格式是執行建議，不是官方報告格式。

中小企業網站無障礙 15 項自查怎麼做？

這份自查把 15 個項目分成五組，每組處理同一類任務。它適合找出優先改善問題，不是完整 WCAG 符合性稽核，也不能單獨證明網站取得台灣無障礙標章。

編號自查項目快速測法失敗影響建議負責人優先級
1頁面標題查看瀏覽器分頁名稱是否能辨認頁面目的使用者難以分辨分頁與返回位置內容與 SEOP1
2H1–H3 層級比對視覺標題與文件標題結構輔助科技難以快速導覽內容內容與前端P1
3圖片替代文字關閉圖片或檢查無障礙樹，確認等義資訊圖片資訊或功能無法被取得內容與設計P0／P1
4文字色彩對比用色碼計算文字與背景對比文字難以閱讀或辨認設計與前端P1
5不只靠顏色傳意以灰階或遮住圖例顏色檢查狀態色覺辨識受限者無法理解差異設計與內容P1
6鍵盤可操作不用滑鼠完成主要任務使用者可能無法操作前端P0
7焦點清楚可見逐次按 Tab，觀察目前位置使用者不知道下一次操作會作用在哪裡設計與前端P0／P1
8跳至主要內容從頁首用鍵盤尋找略過重複區塊的方法每頁都要重走整段導覽前端P1
9連結文字有意義單獨閱讀連結或搭配程式可判定脈絡使用者無法預測連結目的內容P1
10表單 label聚焦欄位，確認名稱與輸入目的使用者不知道要填什麼內容與前端P0
11錯誤訊息可理解故意漏填或填錯，檢查文字提示使用者無法找到及修正錯誤內容與前端P0
12按鈕名稱以無障礙樹或螢幕報讀確認名稱與角色使用者不知道按鈕會做什麼設計與前端P0／P1
13影片字幕關閉聲音播放，確認語音資訊仍可取得聽覺資訊無法被取得內容與影音P1
14放大 200％仍可用瀏覽器放大至 200％，重走任務內容被截斷或功能消失設計與前端P0／P1
15自動播放與動態效果可控制確認是否自動開始、持續超過5秒並與其他內容同時呈現，再測試控制方式移動內容干擾閱讀或無法控制設計與前端P1

第一組：確認頁面入口、內容結構與圖片意義

1. 頁面標題能否單獨辨認？

查看瀏覽器分頁或頁面原始碼中的 title，確認它能簡短描述本頁用途，並與同站其他頁面區別。預約頁可寫「預約諮詢｜品牌名」，避免每頁都只有品牌名稱。

2. 視覺標題與文件結構是否一致？

比對畫面標題與程式中的 h1–h6，確認重要標題不是只有加大字體，層級能表達內容關係。不要為了字級大小任意跳層；有意義的文件結構比追求固定標題數量更重要。

3. 圖片的資訊或功能能否由替代內容取得？

先依圖片用途判斷需要傳達的內容，再檢查 alt 及鄰近等值資料。資訊圖片與功能圖片的寫法不同；裝飾圖片用空的 alt，避免增加無意義的朗讀。

  • 資訊圖片需要提供等義內容。
  • 功能圖片需要說明操作目的。
  • 純裝飾圖片應避免產生多餘朗讀。

第二組：檢查對比、色彩與文字放大

4. 文字與背景的對比是否足夠？

用對比檢查器取得實際前景與背景色，核對一般文字至少 4.5：1、大型文字至少 3：1 的 AA 門檻；大型文字的定義需依 WCAG 1.4.3 判斷。標誌、停用元件及純裝飾等有例外，漸層或圖片背景也要檢查文字所在位置，不能只憑肉眼。

5. 狀態與資訊是否不只靠顏色？

把畫面轉成灰階，確認必填、錯誤、圖表系列與成功狀態仍有文字、形狀或其他線索可辨認。灰階是初步人工測法，不能取代對比比值與程式語意檢查。

第三組：關掉滑鼠，走完鍵盤路徑

6. 主要功能是否可用鍵盤完成？

把滑鼠放到一旁，用 Tab、Shift＋Tab 及元件慣用按鍵完成選單、表單與提交；進入元件後，也要能以鍵盤移出。若功能本質依賴移動路徑，需依 WCAG 2.1.1 的例外判斷，不能因介面使用拖曳就直接免除鍵盤要求。

7. 焦點是否清楚且未被完全遮住？

逐次移動焦點，確認目前作用位置可見，並展開固定導覽、對話框或 Cookie 提示檢查是否遮住焦點。WCAG 2.2 的最低要求是聚焦元件不被作者內容完全遮住，不能把最低門檻誤寫成任何遮擋都違規。

8. 能否略過每頁重複的區塊？

從頁首尋找「跳至主要內容」等略過方式，實際啟動後確認可直接到主內容，而不是只有畫面捲動。跳轉連結是常用方式；WCAG 2.4.1 要求可略過重複區塊的機制，不限定只能用某一種元件。

第四組：檢查連結、表單與錯誤修正

9. 連結文字能否說明目的？

單獨閱讀連結名稱，再搭配程式可判定的脈絡確認目的。「下載申請表」比「按這裡」清楚；WCAG 2.4.4 允許透過脈絡理解，不能一概要求所有連結脫離脈絡也必須完整描述。

10. 欄位是否有持續可取得的名稱與說明？

聚焦每個欄位，確認可取得欄位名稱、必填狀態與格式。placeholder 會在輸入後消失，不能作為唯一說明；使用 label 與 for／id 是常見做法，但仍需核對實際可及名稱，不把某一種程式寫法當成唯一合格方式。

11. 錯誤能否被找到並修正？

故意漏填或填入錯誤格式，確認系統用文字指出欄位與錯誤，並提供可用的修正方向，而非只有紅框。重走修正及送出流程，確認先前正確填入的資料與提交結果能被理解。

12. 按鈕名稱、角色與狀態是否可取得？

以無障礙樹或螢幕報讀檢查按鈕名稱及角色；展開、選取或停用等狀態也要能被程式取得。圖示按鈕要有可理解的操作目的，送出後的成功或失敗訊息另檢查是否能由輔助科技取得。

第五組：檢查影音、放大與動態控制

第13項先關閉聲音，確認需要的語音資訊仍可由字幕取得；字幕要對應實際語音，而非只有影片名稱。只有畫面承載的重要資訊，還要評估音訊描述或可取得的替代內容。

第14項用文字放大或瀏覽器縮放檢查到200％，確認內容與操作仍存在。這與 WCAG 1.4.10 的流動排版不同：垂直閱讀內容另需在等同320 CSS像素寬度檢查是否需雙向捲動；資料表與地圖等本質需要二維呈現的部分有例外，不能把200％測試當成所有條件皆通過。

第15項依 WCAG 2.2.2，自動開始、持續超過5秒且與其他內容同時呈現的移動、閃動或捲動資訊，需提供暫停、停止或隱藏，必要活動有例外。自動更新資訊另有控制更新頻率等要求，不適用同一個5秒前提。另需確認閃爍風險、音訊控制及互動動畫，不能一律用等5秒作結論。

補看 WCAG 2.2 新增要求：焦點元件不被作者內容完全遮住、拖曳功能提供不需拖曳的單一指標替代操作，以及指標目標至少24×24 CSS像素或符合間距、行內、等效等例外。這些是進一步檢查，15項自查仍不是完整符合性稽核。WCAG 2.2 原文。

自動工具抓不到哪些無障礙問題？

自動工具擅長找可以寫成明確程式規則的問題，例如圖片缺少 alt 屬性，表單控制項沒有可及名稱，或特定文字與背景的對比低於門檻。它們不能完整判斷內容是否有意義，也無法代替使用者走完真實任務。

工具能定位問題，不能替內容做語意判斷

同一張圖片有 alt 屬性，自動工具可以辨識屬性存在，卻不一定知道內容是否等義。

  1. 圖片在此處提供什麼資訊或功能？
  2. 不看圖片時，必要資訊是否仍存在？
  3. 替代文字會不會和鄰近內容重複？

焦點順序需要沿著完整任務觀察

自動工具可以找出部分沒有焦點樣式或不可聚焦的元件，卻很難單獨判斷一整段互動的焦點順序是否合理。

錯誤訊息的清楚程度不能只看「有沒有文字」

工具可能確認錯誤區塊存在，也可能檢查欄位是否透過程式關聯錯誤訊息，卻不一定能判斷「格式錯誤」對使用者是否足夠。

  • 「輸入錯誤。」
  • 「手機號碼需輸入 10 碼數字，例如 0912345678。」

動態元件要測試每一種狀態

選單、對話框、分頁標籤、摺疊區塊、日期選擇器與即時搜尋都有多種狀態。工具掃描頁面初始畫面時，不一定會觸發每一種展開內容，也可能看不到登入後或輸入錯誤後才出現的元件。

  • 尚未操作的初始狀態。
  • 取得鍵盤焦點的狀態。
  • 展開或啟用後的狀態。
  • 發生錯誤或沒有結果的狀態。
  • 完成，關閉或返回後的狀態。

一個預約服務頁可以怎麼改善？

以下是虛構的預約服務頁示例，用來示範如何把檢查結果轉成修正與驗收。頁面、色碼、數字及問題都不是秒站或任何客戶網站的實測結果，也不能用來宣稱特定網站符合 WCAG 2.2。

示例範圍與任務先寫清楚

示例任務是找到預約入口、選日期、填姓名與電話，最後送出並取得結果。假設檢查時發現以下問題：

  1. 瀏覽器分頁只顯示品牌名，無法辨認預約頁。
  2. 頁面以放大字體模擬標題，沒有清楚的 H1 與 H2 結構。
  3. 次要文字使用 #9A9A9A，白色背景為 #FFFFFF，對比只有 2.81：1。
  4. 日期選擇器只能用滑鼠點擊，而且開啟後焦點仍留在背景。
  5. 姓名與電話只用 placeholder，沒有持續可見的標籤。
  6. 送出錯誤只顯示紅框，成功後只改變畫面文字，沒有可取得的狀態通知。

第一步：先修頁面標題與內容結構

瀏覽器分頁標題從單一品牌名改為「預約到店諮詢｜品牌名」，讓多分頁與歷程使用者能辨認用途。

第二步：用色碼與比值修正對比

初始次要文字是 #9A9A9A，背景為 #FFFFFF，計算結果為 2.81：1。示例把文字調整為 #595959，背景維持 #FFFFFF，新比值為 7.00：1。

  • 調整前：2.81：1。
  • WCAG 2.2 AA 一般文字門檻：4.5：1。
  • 調整後：7.00：1。
  • 門檻差距：7.00 － 4.50 ＝ 2.50。

第三步：讓日期選擇不依賴滑鼠

日期欄位保留視覺日曆，也增加符合元件慣例的鍵盤操作。開啟日曆時，焦點移到可預期日期；方向鍵依元件規格移動日期，Enter 選取，Esc 關閉；關閉後焦點回到日期按鈕。

  • Tab 能到達日期按鈕。
  • 按鈕有「選擇預約日期」等可理解名稱。
  • 展開與收合狀態可以被取得。
  • 日曆內沒有鍵盤陷阱。
  • 選取後欄位顯示日期，輔助科技也能取得結果。

內文精華總結

  • 無障礙網站是什麼：無障礙網站的核心，是讓使用者能感知資訊、操作介面、理解內容，而且能透過瀏覽器或輔助科技穩定取得結果。
  • 無障礙不是單一功能，而是一條完整使用路徑：網站可以有漂亮的首頁，也可以在自動工具中拿到高分，但只要主要任務中有一個阻斷點，特定使用者就可能無法完成操作。
  • 受影響的不只有視覺障礙者：網站無障礙經常被簡化成「給盲人使用」，實際涉及的情境更廣。
  • 輔助科技需要正確結構，不只需要畫面看得見：螢幕報讀軟體會依頁面結構朗讀標題與連結，也會朗讀按鈕及表單控制項。

選網站服務時，先列出無障礙驗收需求

若正在選架站服務，先把鍵盤路徑、內容替代、表單錯誤及所需符合等級列入需求，再確認實作與驗收責任。採用秒站或任何平台，都不能由方案名稱、單一工具分數或一個設定按鈕推定取得標章。

方案首年費用次年起年費
標準NT$24,000NT$12,000
專業NT$36,000NT$18,000
輕電商NT$48,000NT$24,000

以上依 秒站公開方案頁；網域、影片空間、金流手續費與加購模組等依需求另計。4 小時免費試用不必信用卡。匯入既有設計或外部程式前，先確認內容格式、權利、相依功能及實際服務範圍。

查看網站案例，比較與自己需求相關的內容與操作流程。

延伸閱讀

網站營運健檢系列文章

重點整理

無障礙網站是什麼？

無障礙網站的核心，是讓使用者能感知資訊、操作介面、理解內容，而且能透過瀏覽器或輔助科技穩定取得結果。它關心的不是網站看起來有沒有「無障礙模式」，而是使用者能不能真的完成查資料、填表單、預約、購買或聯絡等任務。

哪些人會需要網站無障礙？

視覺、聽覺、肢體、認知能力不同，以及使用鍵盤、螢幕閱讀器、放大或語音操作的人，都可能從網站無障礙受益。臨時受傷，環境光線不足，網路不穩或年齡造成的操作差異，也可能讓無障礙設計降低使用門檻。

WCAG 2.2 是什麼？

WCAG 是 Web Content Accessibility Guidelines，中文常譯為網頁內容無障礙指引。W3C 在 2023 年發布 WCAG 2.2，並於 2024 年更新該建議標準。W3C 目前鼓勵採用最新版本，但也明確說明 WCAG 2.2 沒有讓 2.1 或 2.0 失效。WCAG 2.2 有 13 項指引，分在四項原則之下，分別是可感知、可操作、可理解及穩健。

台灣無障礙網站規範是什麼？

數位發展部無障礙網路空間服務網目前列出的規範頁面名稱是「網站無障礙規範（110.07）」。官方前言說明，台灣早期的網站無障礙規範 2.0 對應 WCAG 2.0，後續再參考 WCAG 2.1 增加行動裝置相關內容，新增 1 項指引及 17 項成功準則。因此，規劃網站時可以把 WCAG 2.2 當成較新的國際改善目標，但若要申請台灣無障礙標章，仍要依數位發展部當下公開的規範、檢測碼、工具與申請程序辦理。

無障礙標章要怎麼申請？

依數位發展部2026年7月9日更新流程，先用Freego檢測、登錄會員及案件、完成自我評量，再接受申請資料與軟體審核及人工抽檢。符合後取得標章連結，核發起3年有效；超過半年及被申訴網站可安排抽測。原則7工作天開始抽檢不是保證7天核發，申請前仍須查當下程序。

網站有「無障礙設定」按鈕就算合格嗎？

不算。單一切換按鈕不能證明內容、鍵盤操作、表單及輔助科技相容性符合規範。仍要逐頁檢查語意結構、替代文字、焦點順序、色彩對比、錯誤提示及實際任務是否能完成。

替代文字要怎麼寫？

先依圖片在該段落的用途描述必要資訊。裝飾圖片使用空的 alt；功能圖片描述操作目的；資訊圖表則以替代文字概括重點，並在鄰近文字提供可取得的等值資料。不要只寫「圖片」或重複附近標題。

可以只用鍵盤操作網站嗎？

可操作最直接的檢查，是把滑鼠放到一旁，從頁面頂端開始只用鍵盤完成任務。Tab 通常向前移動焦點，Shift＋Tab 往回移動，Enter 或空白鍵啟動適用元件，Esc 常用來關閉對話框或選單；實際按鍵行為仍要符合元件慣例。WCAG 2.2 成功準則 2.1.1 要求網站功能可透過鍵盤介面操作，但對本質上依賴移動路徑的輸入列有例外。成功準則 2.1.2 則要求焦點進入元件後，能再用鍵盤移出，不形成鍵盤陷阱。

分享此文章：

相關文章