Learning Objectives
- 說明無障礙設計幫助了哪些人，以及 WCAG 是什麼
- 替圖片寫出合適的替代文字，替表單欄位加上 label
- 計算或檢查文字與背景的對比是否達到 WCAG AA（一般文字 4.5:1、大字 3:1），並避免只用顏色傳達資訊
- 讓網頁可以只用鍵盤操作：用原生的 button 與連結、保留看得見的焦點樣式、寫出看得懂的連結文字
- 說明「能用原生 HTML 就不要用 ARIA」的原則
- 綜合語意化 HTML、Flexbox／Grid 與響應式設計做出一頁作品集，並知道怎麼發佈到靜態網站服務
網頁是給每一個人用的
無障礙（accessibility，常簡寫成 a11y：a 和 y 中間有 11 個字母）的意思是： 不管使用者看不看得見、能不能用滑鼠、在什麼環境下上網，都能取得網頁的資訊、完成要做的事。
想一想誰會遇到困難：
| 使用者 | 怎麼上網 | 網頁要做到 |
|---|---|---|
| 視障者 | 用螢幕閱讀器把網頁唸出來，用鍵盤跳著瀏覽 | 圖片有替代文字、標題層級正確、表單有 label |
| 色弱、色盲的人 | 某些顏色分不出來 | 對比夠、不只用顏色表示狀態 |
| 只能用鍵盤的人（手部受傷、行動不便，或只是習慣） | Tab 鍵移動、Enter 與空白鍵按下 | 每個功能都能用鍵盤操作，看得到現在在哪裡 |
| 在大太陽底下看手機的人 | 螢幕反光、顏色變淡 | 對比夠高 |
| 年長者、低視力者 | 把字放大到 200% | 版面放大後不會壞、沒有禁止縮放 |
最後兩種告訴我們：無障礙不只是「少數人」的事，每個人都可能暫時處在不方便的情況。
國際上最常引用的標準是 W3C 的 WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引）。 它把要求分成 A、AA、AAA 三個等級，許多政府與機構的規範以 AA 為目標。這一課的數字都出自 WCAG 2.2。
其實你已經做了不少：第 3 課的標題層級、第 5 課的 alt、第 7 課的 label、第 8 課的語意化，都是無障礙的一部分。 這一課把它們整理起來，再補上顏色對比與鍵盤操作。
替代文字與表單標籤
替代文字：alt 要寫「這張圖在這裡要傳達什麼」，而不是「這是一張圖」。
| 情況 | 寫法 |
|---|---|
| 有內容的圖（作品截圖、圖表） | alt="學生餐廳一週人潮的長條圖，週三中午最多" |
| 純裝飾的圖（分隔線、背景花紋） | alt=""（空的 alt）：螢幕閱讀器會跳過 |
| 當作連結或按鈕的圖 | 寫它會帶你去哪裡、做什麼：alt="回到首頁" |
| 不要這樣寫 | 沒有 alt（可能唸出檔名）、alt="圖片"、alt="IMG_0423.jpg" |
alt 屬性一定要寫；裝飾圖寫成空的，和「忘了寫」對螢幕閱讀器是兩回事。
表單標籤：每個輸入欄位都要有 <label>，用 for 對上欄位的 id（第 7 課）：
<label for="mail">Email</label>
<input type="email" id="mail" name="mail">
placeholder（欄位裡的淡色提示字）不能代替 label：一開始打字它就消失了，顏色通常也太淡。
畫面上真的放不下文字時，才用 aria-label="搜尋" 這類寫法給欄位一個名字。
顏色對比與「不只用顏色」
文字和背景的顏色太接近就讀不清楚。WCAG 用對比值（contrast ratio）量化：
- 先把每個顏色換算成相對亮度（relative luminance）L：純黑是 0、純白是 1。 換算時，紅、綠、藍三個值的比重分別是 0.2126、0.7152、0.0722（人眼對綠色最敏感）。
- 對比值 ＝ (較亮的 L ＋ 0.05) ÷ (較暗的 L ＋ 0.05)，範圍從 1:1（同色）到 21:1（黑配白）。
WCAG 2.2 的AA 等級（成功準則 1.4.3）要求：
| 文字 | 至少 |
|---|---|
| 一般文字 | 4.5:1 |
| 大字：至少 18pt（約 24px），或至少 14pt（約 18.66px）且粗體 | 3:1 |
| 圖示、輸入框的外框這類介面元件（成功準則 1.4.11） | 3:1 |
幾組實際算出來的數字：
| 文字色 | 背景 | 對比 | 一般文字 |
|---|---|---|---|
#767676 灰 |
白 | 4.54:1 | 剛好通過 |
#777777 灰 |
白 | 4.47:1 | 差一點，不通過 |
#a0aec0 淡灰 |
白 | 2.25:1 | 不通過（常見的「說明文字」顏色） |
| 白 | #3C6F9A 藍 |
5.34:1 | 通過 |
| 白 | #f6c343 黃 |
1.63:1 | 不通過；黃底請配深色字 |
不要只用顏色傳達資訊（成功準則 1.4.1）：表單裡填錯的欄位只把框改成紅色，分不出紅綠的人就看不出哪一欄錯了。 同時加上文字（「Email 格式不正確」）或圖示；圖表的線除了顏色，也可以用不同的線條樣式或直接標上名稱。
鍵盤操作、焦點與連結文字
試試看：把滑鼠放開，只用 Tab 鍵在這個網頁上移動（Shift＋Tab 往回），Enter 按連結、空白鍵按按鈕。 目前所在的元素會有一圈外框，這叫焦點（focus）。
1. 用原生的元素：<a href>、<button>、<input> 天生就能用 Tab 移到、用鍵盤按下，螢幕閱讀器也知道它們是什麼。
用 <div> 或 <span> 加上 CSS 假裝成按鈕，滑鼠點得到，鍵盤卻移不過去。
| 想做的事 | 用 |
|---|---|
| 前往另一個網址或同一頁的某一段 | <a href="…"> |
| 在這一頁做一件事（送出、開關、切換） | <button type="button"> |
2. 保留看得見的焦點樣式：千萬不要寫 *:focus { outline: none; } 而不補上替代的樣式（WCAG 2.4.7 要求鍵盤焦點看得見）。
嫌滑鼠點按時出現外框，用 :focus-visible：瀏覽器判斷使用者是用鍵盤操作時才套用。
:focus-visible {
outline: 3px solid #C8A24B; /* 和背景有足夠對比的顏色 */
outline-offset: 2px; /* 外框和元素之間留一點空隙 */
}
3. 連結文字要自己說得清楚：螢幕閱讀器可以列出整頁的連結。如果列出來是「點這裡、點這裡、更多」，沒有人知道會連到哪裡。
把要去的地方寫進連結文字：<a href="…">看全部 40 件展出作品</a>。
4. ARIA 的原則：ARIA（Accessible Rich Internet Applications）是一組屬性，例如 role、aria-label，
可以補充 HTML 表達不出來的語意。W3C 的建議第一條就是：如果原生的 HTML 元素或屬性已經有你需要的語意與行為，就用它，
不要拿別的元素加上 ARIA 來代替。<div role="button"> 還得自己處理 Tab 與按鍵，直接用 <button> 全都有了。
ARIA 用錯比不用更糟，因為它會讓螢幕閱讀器說出錯誤的資訊。
小測驗：無障礙
一般大小的內文，文字色 #949494、背景白色，對比是 3.03:1。依 WCAG 2.2 的 AA 等級，這樣可以嗎？
頁面上的分隔花紋圖片純粹是裝飾，替代文字該怎麼寫？
下面哪一種做法最符合「能用原生 HTML 就不要用 ARIA」的原則？
表單用紅色外框標出填錯的欄位。對分不出紅綠色的使用者，最好的改善是？
綜合專題：一頁個人作品集
最後用這 24 課學到的東西，做一頁個人作品集。分兩段完成：
| 階段 | 用到的課 | 要做的事 |
|---|---|---|
| 1. 結構 | 第 3、5、8 課 | 把一堆 div 改成 header、nav、main、section、article、footer；標題層級正確；圖片有 alt |
| 2. 版面與樣式 | 第 17～22 課與本課 | 導覽列用 Flexbox 排成一列、作品用 Grid 排、手機一欄寬螢幕三欄；圖片不超出卡片；鍵盤焦點看得見 |
第一段的範例只有一個 div 湯：它在瀏覽器裡看起來還可以，但螢幕閱讀器只看到一堆沒有意義的區塊，也列不出任何標題。
做完兩段以後，把 HTML 和 CSS 複製到自己電腦上的 index.html 與 style.css，換成你自己的介紹與作品。
把作品集發佈到網路上
這一軌寫的都是靜態網頁：只有 HTML、CSS 與圖片，不需要資料庫或後端程式。 這種網站可以免費放在靜態網站服務上，例如 GitHub Pages。大致流程：
- 註冊 GitHub 帳號，建立一個儲存庫（repository）。免費帳號的儲存庫要設成公開（public）才能使用 GitHub Pages。
- 把
index.html、style.css與圖片上傳到儲存庫（網頁上就能拖拉上傳；之後學了 Git 可以用指令推送）。首頁的檔名一定要是index.html。 - 在儲存庫的 Settings → Pages，選擇要發佈的分支與資料夾。
- 等幾分鐘，網址會是
https://帳號.github.io/儲存庫名稱/；儲存庫取名為帳號.github.io時，網址就是https://帳號.github.io/。
發佈之前用這張清單檢查一次：
- [ ] 把瀏覽器寬度拉到最窄（約 360px），整頁不會左右捲動
- [ ] 只用鍵盤按 Tab，每個連結與按鈕都移得到，而且看得到焦點
- [ ] 每張圖片都有合適的 alt，每個表單欄位都有 label
- [ ] 文字對比達到 4.5:1（大字 3:1）
- [ ] 標題層級正確，整頁只有一個 h1
- [ ] 把頁面放大到 200%，內容還讀得到
公開的網頁任何人都看得到。放上去的個人資料（電話、地址、學號）請想清楚；聯絡方式用 Email 就夠了。 圖片與文字要用自己有權使用的素材。
小測驗：鍵盤、焦點與專題
設計師覺得滑鼠點按鈕時出現的外框很醜。下面哪個做法最好？
螢幕閱讀器把整頁的連結列成清單。下面哪一個連結文字最好？
大字的門檻是 3:1。依 WCAG 的定義，下面哪一段文字算「大字」？
用 GitHub Pages 發佈作品集，首頁的 HTML 檔名應該是？
重點整理
- 無障礙幫助視障、色弱、只用鍵盤、低視力的人，也幫助在大太陽下、手受傷時的每一個人；常用標準是 WCAG，目標通常是 AA。
alt寫圖片要傳達的內容，裝飾圖用alt=""；每個欄位都要有 label，placeholder 不能代替。- 對比：一般文字至少 4.5:1，大字（約 24px，或約 18.66px 粗體）至少 3:1；不要只用顏色傳達資訊。
- 用原生的
a與button；不要拿掉焦點外框，用:focus-visible設計看得見的焦點；連結文字要說出目的地。 - 能用原生 HTML 就不要用 ARIA。
- 作品集：語意化結構 → Flexbox／Grid 版面 → 響應式 → 檢查無障礙 → 發佈到靜態網站服務。
HTML 與 CSS 軌到這裡結束。 你已經能寫出結構清楚、在手機與電腦上都好用、每個人都能使用的網頁。 想讓網頁回應使用者的操作（按下按鈕顯示內容、送出前檢查表單、向伺服器取資料），下一步是 JavaScript 軌。