無障礙設計與可操作的元件契約

無障礙（Accessibility）不是在完成頁面後加幾個 ARIA 屬性，而是從元件選擇開始。原生 HTML 元素通常已經提供比自製互動更可靠的鍵盤與讀屏器行為。

優先使用語意元素

<!-- 不建議：需要自己補上鍵盤、焦點和語意 -->
<div class="button" onclick="submitForm()">提交</div>

<!-- 建議：瀏覽器提供基本互動行為 -->
<button type="submit">提交</button>

只有在原生元素無法表達需求時才使用 ARIA；ARIA 可以補充語意，不能修好錯誤的互動模型。

建立可用的表單欄位

<label for="email">電子郵件</label>
<input
  id="email"
  name="email"
  type="email"
  aria-describedby="email-help email-error"
  aria-invalid="true"
/>
<p id="email-help">我們會寄送確認信到這個地址。</p>
<p id="email-error" role="alert">請輸入有效的電子郵件地址。</p>

label 告訴使用者這是什麼欄位，aria-describedby 關聯補充說明與錯誤，aria-invalid 表示目前狀態。錯誤文字仍必須在畫面上可見，不能只依賴讀屏器。

一個對話框至少要處理：

開啟時把焦點移到標題、第一個欄位或關閉按鈕。
使用 Tab 時不穿透到背景內容。
按 Escape 可以關閉。
關閉後把焦點還給觸發按鈕。

<dialog aria-labelledby="dialog-title">
  <h2 id="dialog-title">刪除專案？</h2>
  <p>刪除後無法復原。</p>
  <button type="button">取消</button>
  <button type="button">確認刪除</button>
</dialog>

使用原生 <dialog> 時仍要測試瀏覽器支援和 focus 行為；不要以為元素本身就完成所有產品需求。

對比度與非色彩訊號

錯誤不應只有紅色邊框，成功不應只有綠色背景。加入文字、圖示、位置或形狀，並實際在兩種主題和不同螢幕上檢查。焦點輪廓也不能為了「乾淨」而移除：

:focus-visible {
  outline: 3px solid rgb(var(--focus-ring));
  outline-offset: 3px;
}

常見錯誤

使用 tabindex="1" 人為改變焦點順序。
以 aria-label 取代畫面上本來應該存在的標籤。
用 aria-hidden="true" 隱藏仍然可以操作的元素。
只跑自動化掃描，沒有真正用鍵盤完成任務。

課後練習

挑一個表單或 Modal，先關閉滑鼠操作，只用 Tab、Enter、Space 和 Escape 完成任務，再用讀屏器檢查標題、欄位、錯誤和結果是否連貫。

這四課完成後，就能進入 workflows，學習如何把設計規則組合成一個完整頁面。