嘉大 ChatGPT 網頁無障礙 HTML 操作說明
最新版本之 Prompt：下載 ZIP 檔
送審中：9/29~10/12(8個工作天)
國立嘉義大學
使用 ChatGPT 協助檢查與修正
網頁無障礙 HTML 操作說明
適用：嘉大網站管理及上稿人員｜免費 ChatGPT 亦可使用
| 項目 | 說明 |
|---|---|
| 建議使用 | 01-完整版-嘉大無障礙Prompt.md |
| 不需要 | OpenAI API Key、額外安裝程式 |
一、先把無障礙規則AA2.1交給 ChatGPT
步驟 1 開啟 ChatGPT
使用瀏覽器開啟 ChatGPT 並登入。免費帳號即可使用本操作方式。建議每一篇新的網頁內容使用新的 ChatGPT 對話。
步驟 2 開啟完整版 Prompt
於本頁最上方，下載最新版之ZIP檔，將 ZIP 解壓縮後，開啟「prompts/01-完整版-嘉大無障礙Prompt.md」(可用記事本或任何文字編輯器開啟)。
步驟 3 複製完整 Prompt
將檔案內容全部選取並複製，貼到 ChatGPT 的訊息輸入框後送出。
步驟 4 等待 ChatGPT 讀取規則
ChatGPT 讀取規則後，即可準備貼入嘉大網站後台的原始 HTML。若 HTML 太長而無法順利處理，再改用「02-精簡版-嘉大無障礙Prompt.md」。
二、從嘉大網站後台取得 HTML 原始碼
步驟 5 點右側「編輯」按鈕
進入要修改的文字區塊，在該區塊右側找到鉛筆形狀的「編輯」按鈕並點選。
操作畫面 1：點選文字區塊右側的「編輯」按鈕
步驟 6 點工具列最左邊的「原始碼」按鈕
進入編輯畫面後，點選編輯器工具列最左邊的「原始碼」按鈕，切換到 HTML 原始碼模式。
操作畫面 2：點選工具列最左邊的「原始碼」按鈕
步驟 7 複製 HTML 原始碼
切換到原始碼模式後，將需要檢查的 HTML 全部選取並複製。先不要直接修改內容。(可以按ctrl + a全選 ctrl+c 複製)
三、把 HTML 貼給 ChatGPT
步驟 8 回到同一個 ChatGPT 對話
回到剛才已貼入「完整版 Prompt」的同一個對話，直接貼上從嘉大後台複製的 HTML，然後送出。
步驟 9 先看檢查結果
ChatGPT 會依序顯示：【A. 無障礙檢查結果】、【B. 本次自動修改內容】、【C. 完整修正版 HTML】、。請先看 A、B，再使用 C。
四、把修正版 HTML 貼回嘉大後台
步驟 10 複製完整修正版 HTML
在 ChatGPT 回覆中找到【C. 完整修正版 HTML】，完整複製程式碼。不要只複製局部修改片段。
步驟 11 貼回原始碼模式
回到嘉大網站後台的 HTML 原始碼模式，以 ChatGPT 提供的完整修正版 HTML 取代原內容。
步驟 12 確認、預覽、再發布
儲存前先確認文章文字、圖片、連結及版面沒有異常；儲存後再預覽實際頁面。依【D. 仍需人工檢查】完成必要測試後再發布。
五、幾個重要規則
1. font-size 的 pt 會轉成 em
依嘉大本工具採用的上稿規則，font-size 使用 pt 時自動轉成 em，固定以 16pt = 1em、em = pt ÷ 16 換算。
| 原始值 | 修正值 | 結果 |
|---|---|---|
| font-size:12pt | font-size:0.75em | 轉換 |
| font-size:16pt | font-size:1em | 轉換 |
| font-size:20pt | font-size:1.25em | 轉換 |
| margin-left:32pt | margin-left:32pt | 不因字級規則修改 |
| text-indent:16pt | text-indent:16pt | 不因字級規則修改 |
2. 不要把 AI 修正版直接當成「已通過無障礙」
ChatGPT 可以協助找出 HTML/CSS 中可判斷的問題並產生修正版，但實際鍵盤操作、焦點、讀屏、縮放/Reflow、互動元件與影音等仍需人工或實機測試。
六、圖片 alt="" 的處理方式
遇到 alt="" 時，不會直接修改
當 ChatGPT 發現圖片使用 alt=""，但無法從現有 HTML 或圖片資訊判斷用途時，會先請使用者確認這張圖片是「宣傳海報／其他具有資訊意義的圖片」，還是「沒有資訊意義、僅供版面裝飾的圖片」。
如果是宣傳海報或有意義的圖片
ChatGPT 會依可取得的圖片內容或使用者說明提出簡潔的 alt 建議；如果資訊不足，會請使用者提供圖片或說明，不會自行猜測。提出 alt 後，還會詢問使用者是否同意，只有同意後才套用到完整修正版 HTML。
如果是沒有意義的裝飾圖片
保留 alt=""，讓輔助科技略過這張純裝飾圖片，不會強迫加入描述文字。
宣傳海報的重要資訊
alt 不應塞入整張海報的所有文字。若日期、時間、地點、報名方式等重要資訊沒有在網頁其他可存取文字中提供，仍應另外提供文字版資訊。
操作範例
HTML 範例：
<img src="poster.jpg" alt="">ChatGPT 會先詢問：這張圖片是 ① 宣傳海報／有意義圖片，還是 ② 純裝飾圖片？
若回答 ①：ChatGPT 先提出 alt 建議，再詢問是否同意；同意後才寫入修正版 HTML。若回答 ②：保留 alt=""。
七、快速操作流程
- 開啟 ChatGPT
- 貼入「01-完整版-嘉大無障礙Prompt.md」
- 嘉大後台點右側「編輯」
- 點工具列最左側「原始碼」
- 複製 HTML 貼到 ChatGPT
- 先看問題與修改內容
- 複製【C. 完整修正版 HTML】
- 貼回嘉大後台原始碼
- 預覽並人工確認
- 確認後發布