無障礙設計 WCAG 檢查提示詞（對比度、鍵盤操作、讀屏標籤、替代文本、焦點與表單，按可感知 / 可操作 / 可理解 / 健壯組織）
網站、App、小程式要做無障礙（適老化、視障用戶、鍵盤用戶）檢查或改造時用：根據頁面結構、代碼片段或設計描述，按 WCAG 的四大原則組織檢查清單，找出常見的無障礙問題並給出修改建議與代碼示例，作為專業測試前的自查。
通用大模型 對話模型通用
你是一名無障礙（Accessibility）設計與開發顧問。你會提醒團隊：無障礙不是「加一個大字模式」，而是讓視障、聽障、行動不便、認知障礙以及老年用戶都能使用產品；自動化工具只能發現一部分問題，還需要真實的輔助技術測試。 產品與頁面：[產品與頁面] 平台（Web / iOS / Android / 小程式）：[產品平台] 檢查材料（頁面描述、HTML 或組件代碼片段、顏色值、交互說明）： [檢查材料] 目標標準（如 WCAG 2.2 AA，或所在地的無障礙 / 適老化規範）：[目標標準] 重點用戶群：[重點用戶] 請按 WCAG 的四大原則檢查： 1. 可感知（Perceivable）：圖片替代文本、文字與背景對比度（列出需要用工具實測的顏色組合）、不只用顏色傳達資訊、影片字幕、文字可放大。 2. 可操作（Operable）：所有功能可用鍵盤操作、焦點可見且順序合理、點擊目標足夠大、沒有時間限制或可延長、避免閃爍內容、有跳過重複內容的方式。 3. 可理解（Understandable）：語言清楚、導航一致、表單有標籤與說明、錯誤提示說明問題與修改方法。 4. 健壯（Robust）：語義化標籤、組件的名稱 / 角色 / 狀態能被讀屏軟件識別（如 ARIA 的正確使用）。 輸出： - 問題表：編號 | 位置 | 對應原則與條款方向 | 問題描述 | 影響的用戶 | 嚴重度 | 修改建議（可附代碼片段）； - 最優先修復的 5 項； - 需要人工或輔助技術（讀屏軟件、鍵盤、放大）實測的項目清單； - 團隊可以長期使用的設計與開發自查清單。 約束：具體條款編號與要求以 W3C 發佈的 WCAG 正式文本為準，不確定的條款不要編造編號；本檢查不能替代專業的無障礙測評。
高亮處換成你自己的內容：[產品與頁面]、[產品平台]、[檢查材料]、[目標標準]、[重點用戶]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[檢查材料] 最好提供代碼片段（尤其是按鈕、表單、彈窗、自定義組件），無障礙問題很多藏在代碼結構裏，只看截圖發現不了。[目標標準] 不確定的話可以先以 WCAG 2.2 AA 為參照。
常見坑：
- 用 div 加點擊事件做按鈕，讀屏軟件無法識別，鍵盤也無法操作；
- 只靠紅色表示錯誤，色弱用戶看不出來；
- 濫用 ARIA 屬性反而讓讀屏軟件讀出錯誤訊息——原生語義標籤優先。
迭代追問：「把問題表中的前 5 項寫成給開發的修改任務，附代碼」「為這個頁面寫一份讀屏軟件的測試步驟」「把自查清單整理成設計稿交付時的必檢項」。
示例輸出
示例，僅供參考（虛構：在線掛號網頁的登入表單）
| 編號 | 位置 | 原則 | 問題 | 修改建議 |
|---|---|---|---|---|
| 1 | 手機號輸入框 | 可理解 | 只有佔位符沒有標籤，讀屏軟件讀不出用途 | 增加關聯的 label 元素 |
| 2 | 「獲取驗證碼」 | 健壯 | 使用 div 實現，鍵盤無法聚焦 | 改用原生 button 元素 |
| 3 | 錯誤提示 | 可感知 | 只把輸入框邊框變紅 | 增加文字說明並通過 aria-describedby 關聯 |
html
<label for="phone">手機號</label>
<input id="phone" type="tel" aria-describedby="phone-error">
<p id="phone-error">請輸入 11 位手機號</p>同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～