網站無障礙怎麼做?2026 台灣規範、檢測報告與標章申請流程
網站無障礙不只是加大文字或補 alt,而是讓內容、表單、選單與流程都能被順利操作。整理無障礙網站設計重點、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 與標題階層都可能在維護過程中被改壞。通過一次檢測後,仍要把重新檢查放進上線與內容流程。
AI 建站怎麼選?2026工具類型、成本限制與台灣適用情境
AI 建站能快速產生網站架構、版面與初版文案,但不等於網站就能長期經營。從 AI 網站建置工具類型、台灣使用情境、成本限制到 SEO 與驗收清單,幫你判斷適不適合用 AI 做第一版商業網站。
部落格架設完整指南:WordPress 與 Ghost 比較(2026)
完整解析部落格架設的優劣勢,比較 WordPress 與 Ghost 兩大主流平台的差異。從自架站與免費平台的風險分析,到實際架站步驟教學,協助新手選擇最適合的部落格方案,建立個人數位品牌。
診所網站建置怎麼規劃?功能、預約轉換與醫療廣告法規上線重點
診所網站建置不只看版型,還要先整理醫師資料、診療項目、門診時間與預約流程,並規劃行動版、SSL、安全備份、線上掛號入口與醫療廣告法規審稿 SOP,降低重工與合規風險。