網站無障礙怎麼做?2026 台灣規範、檢測報告與標章申請流程

網站無障礙不只是加大文字或補 alt,而是讓內容、表單、選單與流程都能被順利操作。整理無障礙網站設計重點、WCAG 與台灣標章差異、自檢清單、檢測報告與後續維護做法。

網站無障礙無障礙網站設計WCAG無障礙標章網站檢測

網站無障礙是什麼?不是只有身心障礙者才需要

網站無障礙讓內容、功能與流程都能被更多人順利使用。

網站無障礙指的是使用者在不同能力、設備與情境下,都能讀取網站內容、操作主要功能、理解下一步要做什麼。它不是只把字放大,也不是只加幾段替代文字;真正會卡住人的地方,常出現在選單打不開、表單送不出去、錯誤提示看不懂、彈窗關不起來。

一句話定義:網站內容、功能與流程都要能被順利使用

一個無障礙網站,至少要讓使用者完成網站的核心任務。企業官網要能查服務、看聯絡方式、送出詢問表單;電商要能搜尋商品、加入購物車、完成結帳;內容站要讓讀者能看懂標題階層、找到相關內容、用鍵盤移動到主要區塊。

我看過不少網站在首頁視覺上很完整,但鍵盤按 Tab 後焦點消失,使用者根本不知道自己停在哪裡。這種問題不會出現在設計稿上,卻會直接讓一群人無法操作網站。

哪些人會受影響:視障、聽障、行動不便、長者、暫時受限使用者

網站無障礙會影響視障者使用螢幕閱讀器、聽障者理解影片內容、行動不便者用鍵盤或輔助裝置操作,也會影響長者閱讀小字、辨識低對比文字。暫時受限的人也在範圍內,例如手受傷、滑鼠壞掉、在戶外強光下看手機,或網路慢到圖片載不出來。

一般使用者也會受益:手機、強光、低網速、滑鼠壞掉、表單填寫

使用情境 無障礙設計做法 一般使用者得到的好處
手機小螢幕 文字可讀、按鈕夠明確、表單標籤清楚 不必放大畫面也能完成操作
圖片載入失敗 圖片有合適替代文字 仍能理解圖片代表的內容或功能
滑鼠無法使用 選單、表單、彈窗支援鍵盤操作 可以用 Tab、Enter、Esc 完成主要流程
填寫複雜表單 欄位 label、必填提示、錯誤訊息分開處理 知道哪裡錯、怎麼改,不會反覆送出失敗

網站無障礙最後檢查的是「人能不能完成任務」。只看畫面漂不漂亮,通常會漏掉最阻斷的操作問題。

2026 台灣網站無障礙合規要看哪些規範?

台灣合規要分清 WCAG、網站無障礙規範與標章檢測。

台灣網站無障礙合規不能只看一個工具分數。WCAG 是國際技術標準,台灣網站無障礙規範是本地檢測與標章制度的重要依據,無障礙標章則是依照主管機關流程申請與檢測的結果。若涉及政府、學校、標案或公共服務,發布前要回到主管機關公告、標案文件與法務意見確認。

WCAG、台灣網站無障礙規範、無障礙標章的差別

項目 角色 你該怎麼用
WCAG W3C/WAI 制定的網頁內容無障礙國際標準 拿來作為設計、前端與內容檢查基礎
台灣網站無障礙規範 台灣主管機關推動網站無障礙檢測與實作的規範脈絡 政府、學校、標案網站要優先確認版本與檢測要求
無障礙標章 依台灣官方流程進行申請、檢測、認證與後續稽核的標章制度 有契約、標案或組織政策要求時,不能只用自檢取代

數位發展部說明,台灣在 2011 年將公共資訊無障礙入法,並於 2017 年正式實施參照 WCAG 2.0 的網站無障礙規範。這段脈絡提醒你:企業在做網站無障礙時,可以用 WCAG 當技術語言,但有標章或公共服務要求時,仍要看台灣官方制度。

A、AA、AAA 等級代表什麼

W3C/WAI說明 WCAG 2.2 以可感知、可操作、可理解、穩健 4 原則組織 13 個指引,成功準則分為 A、AA、AAA 三個等級。A 是最低符合門檻,AA 通常是實務上較常被要求的目標,AAA 則更嚴格,並不一定適合所有內容與網站情境。

企業網站若沒有標章要求,也不代表可以完全不做。我的判斷會先看關鍵流程:詢問表單、會員登入、結帳、下載檔、服務頁導覽。這些流程若卡住,使用者受影響的程度比單一裝飾圖示沒有替代文字更高。

2026 文章發布時要提醒 115.11 版正式實施時間

截至 2026-07-01,數位發展部無障礙網路空間服務網公告已寫明:修正版「網站無障礙規範(115.11)」認證標章檢測將自 2026-11-30 起正式實施,同日起不再受理「網站無障礙規範(110.7)」標章申請;2026-11-29 含以前取得的無障礙認證標章,效期仍為 3 年。

一般企業網站不等於一定要申請標章,但仍應做基本無障礙

私人企業網站要不要申請標章,先看契約、標案、產業規範與組織政策。沒有標章要求時,仍建議做到基本可用性與 AA 對齊,尤其是聯絡、報名、付款、會員、客服等流程。不要把「不用申請標章」誤解成「不用處理網站無障礙」。

你的網站要做到什麼程度?企業、電商、標案網站決策表

改善程度要由網站責任、風險與主要流程決定。

網站無障礙的投入範圍,先看網站是否承接政府、學校、公共服務或標案要求,再看使用者是否需要在站上完成交易、登入、表單送出或資料下載。若網站只是一頁活動頁,目標可以先放在基本可用性;若是電商、SaaS 或標案網站,AA 對齊與人工檢核就不能省。

政府、學校、公共服務與標案網站:優先確認標章與契約要求

政府、學校、公共服務與標案網站,第一步不是開工具掃描,而是確認文件:合約是否指定標章、檢測等級、送審版本、驗收文件、重新檢測條件。這些文字會決定你要準備多少頁面、哪些流程要列入人工檢核,以及後續改版是否要補檢。

網站類型 建議目標 檢測方式 維護要求
政府機關、學校、公共服務 依官方規範與標章要求 自動檢測、人工檢核、標章流程 公告、改版、功能新增後重新檢查
標案網站 依契約列明的等級與交付文件 工具報告加人工佐證 驗收前後保留版本、日期與報告
企業官網、B2B 網站 關鍵流程可用,盡量 AA 對齊 自檢、前端檢查、抽樣人工測試 內容上稿與表單調整要納入檢查
電商、SaaS 登入、會員、結帳、錯誤提示優先 流程測試加輔助科技抽測 第三方金流、會員套件、聊天元件更新後重測
活動頁、短期頁面 基本可用性與資訊可讀 手動自檢加自動檢測 上線前確認 CTA、表單、倒數計時與彈窗

企業官網與 B2B 網站:至少做到關鍵流程可用與 AA 對齊

企業官網常見的問題是首頁做得很完整,但服務頁、聯絡頁、下載型錄、詢問表單被忽略。B2B 網站尤其要注意長表單、檔案下載、聯絡窗口與導覽結構。若你正在規劃新官網,可以把網站無障礙寫進企業網站建置需求,設計階段處理會比上線後補救省事。

電商與 SaaS:表單、會員、結帳、錯誤提示優先

電商與 SaaS 的風險在流程。商品卡片能不能被螢幕閱讀器理解,規格選項是否能用鍵盤切換,付款錯誤是否告訴使用者修哪個欄位,會員登入是否需要難以辨識的圖形驗證,這些都會影響成交與客服成本。

活動頁可以先做基本可用性,不必把標章當唯一目標

短期活動頁通常不需要把標章當成唯一目標,但仍要做到文字可讀、按鈕可操作、表單可送出、錯誤可理解。若活動頁有政府補助、公共服務或合作契約要求,再回到文件確認標章與檢測等級。

網站無障礙設計原則:可感知、可操作、可理解、穩健

四大原則把無障礙要求轉成可檢查的網站設計。

網站無障礙設計可以用 WCAG 的四個原則整理:使用者要感知得到內容,操作得了功能,理解得了流程,輔助科技也要讀得到正確結構。台灣 110.07 規範頁也以 4 原則、13 指引與成功準則作為網站開發與檢測依據,發布前仍要確認最新版本。

可感知:圖片、影片、色彩、文字都要能被理解

可感知處理的是「使用者能不能接收到內容」。圖片需要替代文字,影片要考慮字幕或文字稿,文字與背景要有足夠對比,不能只用顏色表示狀態。促銷頁常見錯誤是只用紅字標示必填或錯誤,色弱使用者和螢幕閱讀器使用者都可能漏看。

可操作:不能只靠滑鼠,焦點與鍵盤操作要完整

可操作處理的是「使用者能不能完成動作」。選單、彈窗、頁籤、表單、輪播與結帳流程都要能用鍵盤操作。焦點狀態要看得見,Tab 順序要符合畫面邏輯,Esc 關閉彈窗後焦點要回到原本觸發的按鈕。

可理解:導覽、表單、錯誤訊息要清楚

可理解處理的是「使用者知不知道現在發生什麼事」。導覽名稱要一致,表單欄位要有 label,錯誤訊息要指出欄位與修正方式。寫「格式錯誤」太粗,寫「電話號碼請輸入 09 開頭的 10 位數字」才可執行。

穩健:HTML、ARIA、狀態訊息要能被輔助科技讀取

穩健處理的是「不同瀏覽器與輔助科技能不能正確理解網站」。語意 HTML 要先用對,ARIA 只在原生 HTML 不足時補充。工程師做互動元件時,不能只改畫面狀態,也要讓名稱、角色、值與狀態訊息能被螢幕閱讀器取得。

原則 網站例子 檢查問題
可感知 圖片、影片、色彩、文字 不看圖片或聽不到聲音時,內容還能理解嗎?
可操作 選單、表單、彈窗、結帳 不用滑鼠也能完成主要任務嗎?
可理解 導覽、欄位、錯誤提示 使用者知道下一步要做什麼嗎?
穩健 HTML、ARIA、JavaScript 狀態 輔助科技讀到的內容和畫面一致嗎?

若團隊有設計系統,網站無障礙應該放進元件規格,而不是每次做頁面才補。可參考設計系統的元件治理概念,把按鈕、表單、彈窗與提示訊息一次定義清楚。

網站無障礙自檢優先順序:先修這 6 類問題

自檢順序應先處理會阻斷任務的問題。

網站無障礙自檢不要從低影響裝飾問題開始。先修鍵盤操作、表單 label、錯誤提示、圖片替代文字、標題階層、連結文字、對比與焦點狀態。這些問題會直接影響使用者能不能完成查詢、報名、購買、下載或聯絡。

第一優先:鍵盤能不能完成所有主要任務

打開首頁後,只用 Tab、Shift + Tab、Enter、空白鍵、方向鍵、Esc 操作。你要測選單是否打得開,子選單是否能進出,彈窗能不能關閉,表單能不能送出,頁籤與篩選器是否有焦點。若焦點順序跳來跳去,使用者會迷路。

第二優先:表單 label、錯誤提示與必填欄位

表單最容易讓人以為有畫面就沒問題。placeholder 不能取代 label,因為使用者開始輸入後提示會消失,螢幕閱讀器也不一定能把它當欄位名稱。錯誤提示要靠近欄位,說明錯在哪裡,並讓使用者重新送出前能修正。

第三優先:圖片替代文字、標題階層、連結文字

替代文字要描述圖片內容或功能,不要塞關鍵字。標題階層要反映內容結構,不能只靠字體大小假裝層級。連結文字要讓人離開上下文也能判斷目的,例如「下載 2026 產品型錄」比「點這裡」清楚。

第四優先:色彩對比、焦點狀態、按鈕名稱

色彩對比會影響閱讀,焦點狀態會影響操作,按鈕名稱會影響理解。CTA 按鈕若只放圖示,至少要有可讀名稱;若焦點外框被 CSS 移除,鍵盤使用者會看不到位置。按鈕設計可搭配CTA 按鈕設計一起檢查。

優先級 問題類型 使用者影響 檢查方式
最高 鍵盤操作失敗 無法完成選單、表單、結帳、彈窗操作 全程不用滑鼠跑主要任務
高 表單 label 與錯誤提示不足 不知道欄位名稱、錯誤原因與修正方式 逐欄檢查 label、必填、錯誤訊息
高 圖片 alt、標題、連結文字錯誤 內容結構與連結目的不清楚 用大綱與連結清單檢查可讀性
中高 對比、焦點、按鈕名稱不足 看不清、找不到焦點、無法判斷動作 檢查色彩、鍵盤焦點與輔助科技名稱

最後再處理細部 ARIA 與低風險裝飾問題

ARIA 不是補救所有問題的捷徑。能用原生 HTML,就先用 button、label、nav、main、form 這些語意元素。若團隊連鍵盤流程都還沒通,把時間花在細部 ARIA 微調,通常只會讓檢查順序倒置。

常見錯誤與修改範例:alt、按鈕、表單、標題、對比

修正範例要看錯誤造成什麼阻斷,再改寫法。

網站無障礙修正不能只把工具列出的錯誤逐條消掉。你要先判斷錯誤影響的是讀取、操作還是理解,再決定用內容、HTML、CSS 或 JavaScript 修。alt、按鈕、表單、標題與對比,是最容易用小修改換到大改善的地方。

圖片 alt:不要塞關鍵字,要描述功能或內容

圖片替代文字要依圖片用途寫。裝飾圖可以留空 alt,資訊圖要描述重點,按鈕圖要描述功能。把「網站無障礙 無障礙網站設計 台灣標章」塞進 alt,對使用者沒有幫助,也會讓螢幕閱讀器讀到一串噪音。

按鈕與連結:不要只寫「了解更多」

按鈕與連結文字要能說明目的。若一頁有十個「了解更多」,螢幕閱讀器使用者開連結清單時會分不出每個連到哪裡。改成「了解網站維護方案」、「查看無障礙檢測項目」會清楚很多。

表單:label、placeholder、錯誤提示不能混用

label 是欄位名稱,placeholder 是輸入提示,錯誤提示是送出失敗後的修正訊息。三者功能不同。只在欄位裡放「請輸入 email」會讓使用者輸入後失去提示,也讓輔助科技難以穩定判讀欄位目的。

標題階層:不要只用字體大小假裝 H2/H3

標題階層是內容地圖。H2 應該對應主要章節,H3 對應章節內的小主題。若你只用 CSS 把一般段落放大,看起來像標題,螢幕閱讀器與搜尋引擎讀到的仍然可能只是普通文字。前端基礎可搭配CSS 基礎教學、CSS Flexbox、CSS Grid一起建立版面與語意分工。

色彩對比與焦點樣式要一起檢查

色彩對比不只看段落文字,也要看按鈕、輸入框邊線、錯誤文字、焦點外框與停用狀態。常見錯誤是設計稿為了乾淨,把焦點外框拿掉,或用很淡的灰色顯示欄位說明。畫面安靜了,操作線索也消失了。

類型 錯誤寫法 造成問題 較好的寫法
圖片 alt alt="網站無障礙, 無障礙網站設計" 關鍵字堆疊,使用者不知道圖片內容 alt="使用鍵盤操作網站表單的示意畫面"
按鈕 <button>送出</button> 多個送出按鈕時目的不清 <button>送出聯絡表單</button>
連結 <a href="...">了解更多</a> 離開上下文後無法判斷目的 <a href="...">查看無障礙檢測流程</a>
表單 只用 placeholder 寫欄位名稱 輸入後提示消失,輔助科技判讀不穩 使用 label,placeholder 只補格式例子
標題 <p class="big-title">檢測流程</p> 內容大綱失真 <h2>檢測流程</h2>
焦點 outline: none; 鍵盤使用者看不到目前位置 保留清楚的 focus 樣式

Freego、自動檢測、人工檢測怎麼分工?

檢測分工要把工具、人工與真實流程分開看。

Freego 與自動檢測適合找結構錯誤、標籤缺漏、部分對比與明顯問題;人工檢測才看得出語意、流程、提示與互動是否真的可用。通過工具不等於完整無障礙,尤其是彈窗、表單錯誤、購物流程與第三方元件。

自動檢測適合抓結構、標籤、部分對比與明顯錯誤

自動檢測能快速抓出缺少 alt、表單 label 不完整、標題階層異常、部分色彩對比不足等問題。台灣常見的 Freego 單機版檢測工具在官方下載頁標示 110.07 適用版本,並有 2026-01-14 更新說明。若你的標章目標涉及 115.11,務必確認工具與送審規範版本。

人工檢測才能判斷語意、流程、提示是否真的可理解

人工檢測會看工具不容易判斷的部分。alt 寫「圖片」工具可能不一定擋下,但使用者得不到資訊;錯誤提示寫「請重新輸入」也可能通過結構檢查,但使用者不知道哪裡錯。鍵盤流程、螢幕閱讀器朗讀順序、彈窗焦點與狀態通知,都需要人工跑流程。

標章申請前不要只看工具通過率

標章申請前,先把受測頁面、互動流程、JavaScript 狀態、排除項目、工具版本與檢測日期整理清楚。只拿一張工具通過截圖,很難處理人工檢核與後續追蹤。我的做法會先列出核心任務,再把每個任務對應到頁面、元件與驗收證據。

建議流程:修高阻斷問題 → 自動檢測 → 人工檢核 → 回歸測試

檢測方式 能發現的問題 不擅長的問題 使用時機
Freego/自動檢測 結構、標籤、部分對比、明顯缺漏 語意是否合適、流程是否順、提示是否可理解 修正前盤點與修正後回歸
人工檢核 鍵盤流程、表單錯誤、彈窗、連結目的 大量頁面快速掃描 標章前、改版前、核心流程驗收
輔助科技測試 螢幕閱讀器朗讀、狀態訊息、焦點回復 全站批次偵測 互動元件與交易流程確認
真實使用者測試 實際任務卡在哪裡 逐條規範覆蓋 公共服務、會員流程、重要轉換流程

檢測順序應該是先修高阻斷問題,再跑工具,接著人工檢核,最後做回歸測試。工具適合加速,不適合當成唯一判斷。

網站無障礙檢測報告應該看哪些欄位?

檢測報告要看範圍、版本、日期與例外條件。

網站無障礙檢測報告不能只看通過或未通過。你要確認受測網址、受測頁數、檢測時間、完成時間、檢測等級、工具版本、JavaScript 狀態、排除資料夾、逾時頁面與人工檢核範圍。這些欄位會影響報告可信度與後續修正優先順序。

單頁檢測與全網站檢測差在哪

單頁檢測只能說明某個 URL 的狀態,不能代表全網站。全網站檢測也要看它是否真的爬到重要流程,例如登入後頁面、搜尋結果、結帳步驟、下載頁、表單完成頁。若檢測範圍只掃公開靜態頁,會員中心問題可能完全沒進報告。

JavaScript、排除項目、逾時頁面會影響結果

現代網站大量依賴 JavaScript。若檢測工具沒有正確執行 JavaScript,選單、彈窗、表單驗證與動態內容可能被漏掉。排除資料夾和逾時頁面也要看清楚,因為被排除的頁面不等於無問題,只是沒有納入這份報告。

工具版本與檢測日期會影響後續重新檢測

工具版本與檢測日期要留存。2026 年台灣規範有 110.7 到 115.11 的標章檢測切換時點,若報告使用舊工具或舊規範,後續送審、改版與維護都要重新確認。不要拿舊報告當成新版本合規證明。

報告看不懂時應回到官方服務網、檢測單位或專案窗口確認

報告欄位 代表意義 決策影響
受測網址 實際檢測的 URL 清單 確認核心頁面與流程是否納入
受測頁數 工具或檢測單位覆蓋的頁面量 判斷報告能不能代表全站
檢測日期 檢測發生時間 對照網站版本、規範切換與改版紀錄
工具版本 使用哪個檢測工具與版本 影響問題判讀與重新檢測一致性
JavaScript 狀態 動態內容是否被正確執行 影響 SPA、彈窗、表單驗證結果
排除項目 沒有納入檢測的資料夾、檔案或條件 避免誤把未檢測範圍當成通過
逾時頁面 工具無法完成檢測的頁面 可能需要效能、權限或技術設定排查

報告若看不懂,先問檢測單位欄位定義,再回官方服務網確認規範版本。靠猜測改網站,常會把時間花在低風險項目。

現代網站最常見的無障礙問題

現代風險常藏在互動元件與第三方服務裡。

現代網站的無障礙問題常出現在 SPA、React、Vue、彈窗、輪播、表單驗證、Cookie banner、聊天元件、PDF 與影片字幕。畫面看起來正常,不代表鍵盤焦點、狀態訊息與輔助科技讀取都正常。互動越多,越需要跑實際任務。

彈窗與選單:焦點鎖定、關閉方式、鍵盤順序

彈窗打開後,焦點應該進入彈窗內,Tab 不應跑到背景頁面,Esc 或明確關閉按鈕要能關閉,關閉後焦點要回到觸發按鈕。選單也一樣,不能只靠滑鼠 hover 才展開,手機版漢堡選單要能被鍵盤與輔助科技辨識。

輪播與動態內容:暫停、狀態通知、不要自動干擾

自動輪播會干擾閱讀與操作。若內容會自動播放或更新,使用者需要暫停、停止或控制它。動態新增的訊息也要讓輔助科技知道,例如加入購物車成功、表單送出失敗、搜尋結果更新,不應只在畫面上短暫閃一下。

Cookie banner 與聊天插件:第三方元件也會破壞可用性

Cookie banner、線上客服、再行銷彈窗、會員登入 SDK 都可能破壞網站無障礙。常見狀況是遮住內容、焦點被困住、關閉按鈕沒有名稱,或鍵盤順序先跳進第三方框架。選 CMS 或套件時,應把無障礙能力列進評估,可參考CMS 選型時對維護與擴充風險的檢查方式。

PDF、影片字幕與下載檔不要變成無障礙盲點

網站頁面做得再好,PDF 不能讀、影片沒有字幕、下載檔沒有清楚檔名,使用者仍會卡住。公共服務、報名簡章、產品規格與教學影片尤其要檢查。若 PDF 是掃描圖片,螢幕閱讀器可能讀不到任何文字。

互動元件 常見風險 檢查問題
SPA 頁面 頁面切換後標題、焦點與狀態沒有更新 路由切換後螢幕閱讀器知道新內容嗎?
彈窗 焦點跑到背景或無法關閉 只用鍵盤能開啟、操作、關閉嗎?
輪播 自動播放干擾閱讀 使用者能暫停或切換內容嗎?
Cookie banner 遮住內容、按鈕名稱不清 接受、拒絕、設定按鈕都能被辨識嗎?
PDF 與影片 掃描檔無文字、影片無字幕 不看影像或不聽聲音也能取得資訊嗎?

網站無障礙和 SEO 有什麼關係?

SEO 關聯多半來自語意結構與使用體驗改善。

網站無障礙會幫助搜尋引擎與使用者理解內容,例如語意 HTML、標題階層、圖片替代文字、可爬取內容、清楚連結文字與穩定版面。不過,無障礙改善不是排名捷徑,也不能保證關鍵字上升;它提升的是網站可讀、可操作與可理解的基礎。

語意 HTML 和標題階層讓內容更容易被理解

搜尋引擎和輔助科技都需要結構。main、nav、button、label、h2、h3 這些語意元素用對,內容大綱會更清楚。若所有區塊都用 div 加 class 撐出畫面,工程師看得懂 CSS,使用者與機器不一定讀得懂結構。

圖片 alt、連結文字與內部連結能提升內容可讀性

圖片 alt 能補足圖片資訊,連結文字能說明目的,內部連結能讓讀者與搜尋引擎理解主題關係。內容站可以把無障礙檢查納入內容策略,避免上稿時又把標題階層、圖片說明和連結目的弄亂。

無障礙改善通常是體驗與可理解性提升,不是排名捷徑

網站無障礙和 SEO 的交集很大,但不能把兩者畫上等號。Core Web Vitals 處理載入、互動與視覺穩定,無障礙處理可讀、可操作與可理解。兩者都會影響使用者體驗,檢查時可以搭配Core Web Vitals與CLS 修正一起看。

可內鏈至 core-web-vitals、cta-button-design、content-strategy

無障礙改善 SEO 可能受益處 不能誇大的地方
語意 HTML 內容結構更容易理解 不等於自動取得排名
圖片替代文字 圖片內容與上下文更清楚 不應塞關鍵字
連結文字 內部連結目的更明確 不該為了 SEO 亂連
表單與流程清楚 降低跳出與操作失敗 不是演算法保證訊號

導入網站無障礙需要多少成本、時程與維護?

導入成本取決於網站階段、模板數量與流程複雜度。

網站無障礙的成本和時程不能只看頁數。新站從設計、元件、內容與前端一起導入,成本最低;舊站補救要看模板、CMS、第三方套件、表單流程、內容量與檢測目標。若還要申請標章,需另外安排文件、檢測與修正回合。

新站從設計階段導入成本最低

新站可以先把按鈕、表單、色彩、標題、導覽、彈窗、錯誤提示寫進規格。設計師不用事後重畫,工程師不用補一堆例外,內容編輯也知道上稿時怎麼寫標題與替代文字。這種做法會把無障礙變成流程,而不是上線前的補洞。

舊站補救要先看模板、CMS、第三方套件與內容量

舊站要先盤點頁面模板,不要一頁一頁亂修。若一個表單元件被全站共用,修元件比修單頁有效;若問題來自第三方套件,就要評估能否設定、覆寫或更換。內容量大的網站還要處理舊文章標題、圖片替代文字、PDF 與下載檔。

改版、套件更新、規範切換後都要重新檢查

網站通過一次檢測,不代表永久沒問題。改版會改 DOM 結構,套件更新會改互動行為,規範切換會改檢測判斷,內容上稿也可能破壞標題階層與連結文字。2026 年 110.7 到 115.11 的標章檢測切換,就是需要重新確認版本的典型情境。

維護不是一年跑一次工具,而是內容上稿流程要納入檢查

導入階段 參與角色 主要工作 驗收點
新站規劃 業主、PM、設計師、工程師 定義目標等級、元件規格、內容規則 設計稿與元件規格已含無障礙要求
開發階段 前端、後端、QA 語意 HTML、鍵盤流程、表單錯誤、狀態訊息 核心任務可用,工具檢測無高阻斷問題
舊站補救 網站維護者、內容編輯、工程師 模板盤點、元件修正、內容整理 問題能追到模板或流程,不只修單頁
上線維護 內容編輯、PM、維護廠商 新內容、套件更新、改版後重新檢查 保留檢測日期、版本、修正紀錄

維護重點是把檢查放進日常。每次新增頁面、替換表單、更新套件,都要問同一件事:使用者還能讀、能操作、能理解嗎?

哪些內容不屬於本文主題?

本文邊界限於網站無障礙設計、檢測與維護。

網站無障礙牽涉合規,但這裡不提供法律意見、不保證個案合規,也不把 APP 檢測、完整前端框架課程、圖片素材規劃或國外法規比較寫成主軸。需要送審、標案或法規判斷時,請回到主管機關、標案文件、檢測單位與法務確認。

不提供法律意見或個案合規保證

合規責任會受網站性質、契約、服務對象與主管機關要求影響。網站自檢可以降低風險,但不能取代法律判斷或正式標章流程。

不把 APP 無障礙檢測寫成主文

APP 無障礙有不同檢測情境與平台限制。若網站同時有行動應用程式,應另外規劃檢測,不要把網站報告拿來套用。

不規劃圖片、不寫完整前端課程

網站無障礙會碰到圖片與前端技術,但重點是替代文字、結構、互動與檢測。圖片素材規劃與完整框架教學應放在其他主題處理。

網站無障礙是什麼?

網站無障礙是讓不同能力、設備與使用情境的人,都能讀取內容、操作功能、理解流程。實作上會檢查圖片替代文字、鍵盤操作、表單 label、標題階層、色彩對比、焦點狀態與輔助科技讀取結果。

無障礙網站只和身心障礙者有關嗎?

不是。視障、聽障、行動不便者會直接受影響,長者、手機使用者、滑鼠壞掉的人、手受傷的人、低網速使用者也會受益。無障礙網站處理的是使用者能不能順利完成任務。

台灣企業網站一定要申請無障礙標章嗎?

一般企業網站不一定要申請標章,要先看是否有政府、學校、公共服務、標案、契約或組織政策要求。沒有標章要求時,仍建議做到基本可用性與 WCAG AA 對齊,尤其是表單、會員、結帳、聯絡與下載流程。

WCAG A、AA、AAA 差在哪裡?

A 是最低符合門檻,AA 是多數實務專案較常採用的改善目標,AAA 更嚴格,並不一定適合所有網站內容。企業若沒有明確標章要求,通常可先把關鍵流程做到 AA 對齊,再視需求加深。

2026 台灣網站無障礙規範有什麼要注意?

截至 2026-07-01,官方已公告修正版「網站無障礙規範(115.11)」認證標章檢測將自 2026-11-30 實施,且同日起不再受理 110.7 版標章申請。2026-11-29 含以前取得的標章效期仍為 3 年。送審前要查官方最新公告。

通過 Freego 就代表網站完全無障礙嗎?

不代表。Freego 與自動檢測能找出結構、標籤、部分對比與明顯錯誤,但人工檢測才看得出語意是否合適、流程是否可完成、錯誤提示是否可理解、彈窗焦點是否正確。

網站無障礙最該先修哪些問題?

先修會阻斷任務的問題:鍵盤操作、表單 label、錯誤提示、必填欄位、圖片替代文字、標題階層、連結文字、色彩對比、焦點狀態與按鈕名稱。這些會直接影響使用者能不能查詢、報名、購買或聯絡。

圖片 alt 要怎麼寫才正確?

alt 要依圖片用途寫。資訊圖片描述重點,功能圖片描述動作,裝飾圖片可留空。不要把 alt 當關鍵字欄位,也不要只寫「圖片」或「banner」。判斷標準是:使用者不看圖片時,能不能理解這張圖提供的資訊或功能。

彈窗、輪播、Cookie banner 也要做無障礙嗎?

要。彈窗要處理焦點鎖定、關閉方式與焦點回復;輪播要提供暫停或控制;Cookie banner 要讓接受、拒絕、設定按鈕都能被鍵盤操作與輔助科技辨識。第三方元件也可能破壞整站可用性。

網站無障礙會幫助 SEO 嗎?

會有間接幫助,主要來自語意 HTML、標題階層、圖片替代文字、清楚連結文字與更好的使用體驗。但無障礙改善不能保證排名上升,也不應被當成 SEO 捷徑。

無障礙檢測報告要看哪些欄位?

要看受測網址、受測頁數、檢測日期、完成時間、檢測等級、工具版本、JavaScript 狀態、排除項目、逾時頁面與人工檢核範圍。只看通過或未通過,無法判斷報告是否足以代表全站。

以前通過的網站,為什麼後來又可能出現問題?

網站會改版、套件會更新、內容會新增、規範也可能切換。表單元件、彈窗、第三方服務、圖片 alt 與標題階層都可能在維護過程中被改壞。通過一次檢測後,仍要把重新檢查放進上線與內容流程。