口碑頁無障礙教學：讓圖片心得、比較表與表單都能讀懂

口碑頁無障礙教學：讓圖片心得、比較表與表單都能讀懂

口碑頁放滿心得截圖，看起來很豐富，卻可能讓讀屏使用者完全讀不到重點。讓內容能被理解，是查證流程的一部分，不只是設計最後才做的修飾。

從社群或 ChatGPT 廣告進站的訪客，都需要看懂條件並完成下一步。以下先做基本檢查，不能把這份清單當成完整無障礙合規認證。

先讓核心資訊存在於文字

價格、限制、步驟與顧客引用不要只放在圖片裡。把必要內容用真正的網頁文字呈現，讓讀者能放大、搜尋與使用輔助工具閱讀。

心得截圖若含必要引用，旁邊提供相同意思的文字與來源說明。圖中出現個人資料時先處理授權與識別問題，無障礙文字也不應重新暴露已遮蔽內容。

• 圖片關閉時仍能理解主要承諾。
• 重要條件不要靠圖上的小字呈現。

依圖片功能決定替代文字

W3C 的圖片教學區分資訊、裝飾與功能用途。資訊圖描述必要訊息，按鈕圖示說明動作，純裝飾圖則避免讓讀屏重複朗讀無用描述。

複雜比較圖不能只寫產品比較四個字，應提供完整文字說明或資料表。替代文字不是塞關鍵字的地方，要幫讀者完成同一個理解任務。

• 檢查圖片在本頁的實際用途。
• 相同資訊避免被重複朗讀。

讓標題與表格有清楚順序

依問題順序安排標題，讓使用者能快速跳到適用條件或售後資訊。不要只靠字體變大假裝標題，交付時請網站人員確認結構標記。

比較表每欄有名稱，每列有共同定義；手機上也要能知道數字屬於哪個方案。內容過寬時可調整呈現方式，不能把必要資料裁掉。

• 用標題朗讀順序檢查文章架構。
• 表格單獨閱讀也要能辨識單位。

實測鍵盤與表單錯誤提示

不用滑鼠走過連結、展開問答與聯絡表單，確認焦點看得見且順序合理。若鍵盤無法打開必要說明，使用者就可能不知道重要限制。

表單欄位有清楚標籤，錯誤提示說明哪裡錯與如何修改，不只把框線變紅。送出後提供可辨識的完成狀態，避免顧客重複提交。

• 以手機放大檢查文字是否被截斷。
• 錄下卡住步驟交給維護者修正。

把可讀性納入廣告到站驗收

ChatGPT 廣告帶來的訪客仍要在自家頁面查證，不能用 AI 情境替代基本資訊設計。發布前確認價格、合作揭露與限制對不同閱讀方式都可取得。

每次更新圖卡或新增表單重新檢查相關項目。必要時邀請不同使用需求者測試，並依完整標準做更深入評估，不以單一工具綠燈宣稱完全無障礙。

• 驗收表包含可讀文字與可操作動作。
• 修正記錄與內容版本一同保存。