:::
我的標題層級（ H1, H2...）順序正確嗎？
連結文字能讓人一眼看出連往哪裡嗎？
表格有設定標題列嗎？
文字顏色會不會太淡，導致看不清楚？
主內容區域
WCAG 2.3 AA 無障礙網站編輯注意事項
本講義說明依據 WCAG 2.3 AA 標準，在製作網站內容時應注意之事項。 WCAG （ Web Content Accessibility Guidelines ）強調四大原則：可感知、可操作、可理解、穩健。
一、可感知（ Perceivable ）
1. 圖片與非文字內容必須提供替代文字
- 所有具有意義的圖片需提供
alt說明。 - 裝飾性圖片應設為
alt=""。 - 圖表需在文字中補充說明其重點資訊。
2. 影音內容須提供替代方案
- 影片需提供字幕（同步字幕）。
- 重要影片需提供文字稿。
- 純音訊需提供逐字稿。
3. 色彩不可作為唯一資訊來源
- 錯誤訊息不能只用紅色表示，需加文字說明。
- 圖表不同顏色應搭配圖例或標示。
4. 對比值須達標準
- 一般文字對比值 ≥ 4.5:1 。
- 大字（ 18pt 以上或粗體 14pt 以上）對比值 ≥ 3:1 。
5. 文字可放大至 200%仍可閱讀
- 避免固定高度。
- 建議使用相對單位（ em 、 rem 、%）。
二、可操作（ Operable ）
1. 所有功能皆可用鍵盤操作
- 避免只能滑鼠點擊的互動元件。
- 自製元件需支援 Tab 操作與焦點管理。
2. 清楚的焦點指示
- 不得移除
outline。 - 使用者需能明確看見目前焦點位置。
3. 避免閃爍與快速動畫
- 每秒閃爍不得超過三次。
- 動畫需可暫停或停止。
4. 提供跳到主要內容連結
- 頁面最前方提供「跳到主要內容」連結。
三、可理解（ Understandable ）
1. 正確的標題結構
- 使用 h1~h6 階層化標題。
- 不可跳階（如 h1 直接接 h4 ）。
2. 表單需有明確標籤
- 每個 input 需搭配
<label>。 - 必填欄位需清楚標示。
- 錯誤訊息需具體說明修正方式。
3. 語言標示正確
- HTML 標籤需設定
lang="zh-Hant"。 - 內文若出現外語，需使用
lang屬性標示。
4. 用語簡潔清楚
- 避免過度專業術語。
- 重要資訊避免只放在圖片中。
四、穩健（ Robust ）
1. 使用語意化 HTML
- 使用 header 、 nav 、 main 、 footer 。
- 列表用 ul/ol 。
- 表格僅用於資料呈現。
2. 表格需正確結構
- 使用
<th>。 - 必要時使用
scope或headers。
3. ARIA 僅在必要時使用
- 優先使用原生 HTML 。
- 避免錯誤使用 role 造成干擾。
1. 給圖片一個名字：替代文字 (Alt Text)
螢幕閱讀器（給視障者使用的軟體）無法「看見」圖片，只能讀取背後的文字說明。
❌ 錯誤做法： 圖片完全沒有描述，或檔名設為 IMG_20240303.jpg 。
✅ 正確做法： 在圖片屬性填寫簡短明確的描述。
- 活動照：「校慶運動會，三年二班學生正在進行大隊接力。 」
- 公告圖：「113 學年度上學期課表，請點擊下方 PDF 下載詳細內容。」
- 純裝飾圖：（如分隔線）替代文字留空即可，讓閱讀器自動跳過。
2. 建立清晰的層級：使用正確的標題 (Heading)
請不要用「字體放大」或「加粗」來當標題。視障者會利用標題標籤（ H1-H6 ）來快速跳轉網頁內容。
❌ 錯誤做法： 內容雜亂無章，重要標題只用 加粗。
✅ 正確做法： 嚴格遵守 H1 -> H2 -> H3 的階層。
H1: 學校公告
H2: 10 月份行事曆
H3: 期中考日程
H3: 戶外教學注意事項 3. 連結名稱要有意義 (Meaningful Links)
避免使用「按這裡」或「更多內容」，因為當使用者列出網頁所有連結時，他們會不知道這些連結要去哪裡。
❌ 錯誤做法： 下載報名表，請按此。
✅ 正確做法： 請下載 113 年校慶報名表 (PDF)。
4. 色彩對比與資訊傳達
WCAG 2.3 AA 要求文字與背景的對比度至少要達到 4.5:1 。此外，不能只靠顏色來傳達訊息。
❌ 錯誤做法： 「請注意：紅色字的同學代表缺席過多。」（色盲使用者無法辨識）
✅ 正確做法： 「請注意：紅色字且加上星號（*）的同學代表缺席過多。」
5. 表格結構化 (Data Tables)
表格應該用於呈現數據，而非用來排版。必須設定「標題列 (Header)」，讓導讀軟體知道每一列代表什麼。
提示：在網站後台編輯表格時，請務必勾選「第一列為標題」。
| 時間 (標題列) | 課程名稱 (標題列) | 地點 (標題列) |
| 09:00 | 國語 | 三樓教室 |
6. 影片必須提供字幕或文本
如果要在網頁嵌入教學影片或致詞影片：
- 如果是預錄影片，必須提供精確的字幕。
- 若有重要操作流程，建議在影片下方提供文字稿。
快速檢查清單 (Checklist)
我所有的圖片都有寫alt 描述嗎？我的標題層級（ H1, H2...）順序正確嗎？
連結文字能讓人一眼看出連往哪裡嗎？
表格有設定標題列嗎？
文字顏色會不會太淡，導致看不清楚？
