DATA 10 / WEBSITE & UX
網站漂亮卻不好用？從百萬首頁研究找出優先改善的障礙
用 2026 年實測資料，把對比、替代文字與欄位標籤放進網站驗收。
漂亮的網站如果看不清文字、無法辨認欄位，或按鈕沒有清楚名稱，使用者仍可能無法完成任務。這些障礙也會出現在熟悉網站的團隊看不見的位置：手機小螢幕、鍵盤操作、輔助科技，以及錯誤訊息出現之後。
查看圖表數據與單位
| 項目 | 數值 |
|---|---|
| 文字對比不足 | 83.9 |
| 圖片缺少替代文字 | 53.1 |
| 表單缺少輸入標籤 | 51 |
| 空白連結 | 46.3 |
| 空白按鈕 | 30.6 |
| 缺少文件語言 | 13.5 |
以下為 AO2 的企業應用解讀與實作建議。
先修共同元件，讓改善覆蓋完整流程
先檢查頁首、導覽、按鈕、表單與頁尾，因為它們會跨頁重複。以 AO2 的深梅色與香檳金風格為例，品牌色可以保留，但文字、背景與狀態仍需逐組檢查；看起來協調不代表對比足夠。圖表也要同時標出文字與數值，不只靠顏色。
替代文字應描述圖片的用途。裝飾圖可以不重述無意義資訊；研究圖則應提供重點、單位及可讀取的數據表。把整段圖上文字塞進替代文字並不一定好讀，正文解說與表格也應共同承擔資訊。
文中定義參考：W3C WAI｜Labeling Controls。
讓欄位與按鈕自己說清楚
W3C 的表單教學建議以清楚的標籤辨認控制項，並建立標籤與欄位的對應。只在 placeholder 放「電子郵件」，使用者輸入後就失去可見提示，不能取代持續可見的欄位標籤。必要條件與錯誤訊息也要放在可理解的位置。
按鈕名稱要符合行為：前往服務、展開答案與送出需求是不同動作。只有箭頭或裝飾圖示的控制項，仍需有可辨識名稱；鍵盤使用者也應看得見目前焦點。若操作失敗，提供原因與可修正的方法。
機器檢測之後，再走一次真人任務
依序用鍵盤、手機及適當的輔助方式完成導覽、閱讀與表單。檢查放大後是否仍能閱讀、錯誤時是否能恢復，以及選單是否能關閉。檢測報告用來找線索，實際任務則用來確認使用者能否走完整段流程。
如何知道有沒有改善？
以下指標是建議的內部驗收方式。先固定定義與觀察範圍，再比較結果；本文不替企業預設目標值或保證增幅。
- 共同元件的問題清單
- 按影響任務與重複範圍排序，記錄修正前後檢測結果及人工核對。
- 任務可完成性
- 實際完成選單、內容閱讀、FAQ 及表單流程，記錄鍵盤、手機與錯誤狀態。
- 圖像資訊可取得性
- 每張資料圖核對替代文字、說明及表格是否能傳達相同關鍵資訊。
常見問題 FAQ
自動檢測零錯誤就是合規嗎？
不是。自動工具只能偵測部分問題，還需要人工判斷與完整流程測試。這份百萬首頁研究也不是每個網站的完整合規稽核。
品牌色一定要換掉嗎？
不一定。可以調整文字與背景的搭配、明暗及狀態，同時保留品牌辨識。實際組合仍需檢查，不能只憑色票名稱判斷。
圖片都要寫很長的替代文字嗎？
不必。依用途提供適當內容；資料複雜時，搭配可讀表格與正文。純裝飾圖片可採合適的空替代文字，避免重複干擾。
表單已有 placeholder，為什麼還要標籤？
placeholder 可能在輸入後消失，也不足以取代明確對應的欄位名稱。可見標籤讓人持續辨識用途，並支援更清楚的操作。
先改哪個問題最有價值？
先看是否阻擋關鍵任務及影響多少頁面。例如無法操作的導覽、未命名送出按鈕與無法修正的表單錯誤，通常值得優先處理。
SOURCES & SCOPE
資料來源與適用範圍
WebAIM｜The WebAIM Million 2026 · 2026.02
研究方式：以 WAVE API 分析 Tranco 前百萬網站首頁的渲染 DOM；自動偵測部分 WCAG 2.2 A/AA 障礙。
解讀邊界：有指定問題的首頁比例，各類可重複；不是錯誤構成比或人工完整合規審查。
補充定義：W3C WAI｜Labeling Controls。表單控制項標籤與對應方式的官方教學。
查核日期：2026-10-23。本文的企業情境、實作步驟與驗收建議為 AO2 原創整理，與研究實測結果分開呈現。