網頁無障礙檢查提示詞（對照 WCAG 2.2：顏色對比度、鍵盤操作、讀屏軟件、表單與圖片替代文本）
網站要做適老化與無障礙改造、產品要出海滿足無障礙要求，或者只是想讓更多人能順利使用時用：把頁面代碼給 AI，按 WCAG 2.2 的常見檢查項逐條審查，指出問題所在的元素、影響哪類用戶、對應的條款，以及修改後的代碼。
通用大模型 對話模型通用
你是一名網頁無障礙（Accessibility）專家，熟悉 WCAG 2.2 和 WAI-ARIA 的使用原則。請審查下面的頁面或組件。 - 頁面或組件說明：[如註冊表單、商品列表、自定義下拉選單] - 目標等級：[如 WCAG 2.2 AA] - 代碼（HTML，或框架組件代碼；如有相關 CSS 一併粘貼）： [粘貼代碼] - 設計稿中的顏色（文字色與背景色）：[顏色值，沒有就寫無] 按以下維度檢查，只報告實際存在的問題： 1. 語義與結構：是否用對了原生元素（按鈕用 button 而不是可點擊的 div、連結用 a）；標題層級是否連續；頁面區域是否有地標；列表、表格是否使用了對應的語義元素。 2. 鍵盤操作：所有交互是否能只用鍵盤完成；焦點順序是否合理；焦點樣式是否可見；彈窗打開時焦點是否移入、關閉後是否回到觸發元素、是否能用 Esc 關閉；有沒有鍵盤陷阱。 3. 讀屏軟件：圖片的替代文本（裝飾性圖片應為空）；只有圖標的按鈕是否有可訪問名稱；表單控件是否關聯了標籤；錯誤提示與動態更新的內容是否會被讀出；ARIA 是否被誤用（能用原生元素就不要用 ARIA，錯誤的 ARIA 比沒有更糟）。 4. 視覺：文字與背景的顏色對比度（給出計算值和是否達標）；是否僅用顏色傳達資訊（如只用紅色表示錯誤）；放大到 200% 時內容是否可用；點擊目標的尺寸是否過小。 5. 表單：必填項提示、輸入格式說明、錯誤訊息是否具體並指出如何修正、是否支持瀏覽器自動填充。 6. 動效與時間：自動播放的輪播能否暫停；是否尊重減少動態效果的系統設定；有時間限制的操作能否延長。 輸出：問題表（嚴重程度 | 元素 | 問題 | 受影響的用戶 | 對應的 WCAG 條款編號）、修改後的代碼、建議用哪些工具和讀屏軟件做人工複查。 條款編號拿不準的，寫「對應條款需核對 WCAG 原文」。
高亮處換成你自己的內容：[如註冊表單、商品列表、自定義下拉選單]、[如 WCAG 2.2 AA]、[粘貼代碼]、[顏色值，沒有就寫無]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[目標等級] 一般寫 AA，這是多數法規和企業標準要求的等級。[設計稿中的顏色] 有的話一定要給，對比度不達標是最常見的問題之一，AI 可以直接算出對比度。自定義組件（下拉框、標籤頁、彈窗）是問題最集中的地方，優先拿來審查。
常見坑：
- 給可點擊的 div 加上點擊事件就當作按鈕，鍵盤用戶無法聚焦、無法用回車或空格觸發，讀屏軟件也不知道它是按鈕。直接用 button 元素可以省掉大部分工作。
- 到處加 ARIA 屬性，結果和元素的實際行為不一致，反而誤導讀屏軟件。原則是：能用原生 HTML 元素就不用 ARIA。
- 自動化工具只能發現一部分問題，鍵盤操作和讀屏體驗必須人工檢查。
追問技巧：追問「給出一個符合 WAI-ARIA 實踐指南的可訪問下拉選擇框完整實現」，或「列出一份我們團隊上線前的無障礙自查清單（10 條以內）」。
示例輸出
示例，僅供參考（註冊表單，節選）
| 嚴重程度 | 元素 | 問題 | 受影響的用戶 | 條款 |
|---|---|---|---|---|
| 嚴重 | 關閉圖標按鈕 | 只有圖標，沒有可訪問名稱 | 讀屏用戶 | 4.1.2 |
| 嚴重 | 手機號輸入框 | 用佔位文字代替標籤，輸入後提示消失 | 讀屏用戶、認知障礙用戶 | 1.3.1、3.3.2 |
| 一般 | 淺灰色說明文字 | 對比度約 2.8:1，未達到 AA 要求的 4.5:1 | 低視力用戶 | 1.4.3 |
html
<label for="phone">手機號</label>
<input id="phone" type="tel" autocomplete="tel" aria-describedby="phone-hint" required>
<p id="phone-hint">11 位中國大陸手機號</p>
<button type="button" aria-label="關閉"><svg aria-hidden="true">…</svg></button>同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～