響應式與無障礙
互動示範（與本規範網站人類閱讀版相同）：
/docs/responsive-accessibility
示範對應規則
以下章節與人類版頁面互動示範所涵蓋的規則一致（文字版，供 Agent 複製）。
Responsive / Mobile
Breakpoints
| 名稱 | min-width | 對應裝置 |
|---|---|---|
| xs | < 576 | 手機直 |
| sm | 576 | 手機橫 |
| md | 768 | 平板直 |
| lg | 992 | 平板橫 / 小筆電 |
| xl | 1200 | 桌機 |
| xxl | 1600 | 大桌機 |
Mobile 變形通則
- Sidebar → hamburger / off-canvas drawer（從左滑入）。
- Topbar → 收成 logo + hamburger + 1 個主要 icon，其他塞 menu。
- 雙欄佈局 → 單欄堆疊。
- Modal → full-screen 或 bottom sheet。
- Data table → card view 或橫向 scroll + sticky 第一欄。
- Tooltip → tap 或 long-press 觸發。
- Hover 互動 → 一定要有 tap 替代。
- 主要 CTA 放拇指可達區（screen 下 1/3）。
Touch target
- iOS（HIG）：44×44pt。
- Android（Material）：48×48dp。
- 視覺可以小，但 hit area 要夠。
- 相鄰可點元素間距 ≥ 8px。
Bottom Sheet（Mobile 上的 modal 替代）
- 從底部滑上。
- 有 drag handle 指示可向上拖。
- 可半開 / 全開 / 關閉。
內容優先順序
- Mobile 上空間少，優先顯示 80% 使用者最常用的功能。
- 次要功能放 overflow menu。
- 不要把所有 desktop 功能全塞進 mobile。
Accessibility
鍵盤可達
- 所有 interactive 元素 keyboard reachable（Tab 可到、Enter / Space 可觸發）。
- Tab order 跟視覺順序一致。
- 不用
tabindex > 0（會打亂順序）。 - 提供 Skip link「Skip to main content」（Tab 第一下出現，跳過 sidebar）。
- Modal / drawer 開啟時 focus trap。
- 關閉時 focus 回到觸發元素。
Focus Indicator
- 所有 focusable 元素必須有可見 focus ring。
- Focus ring 對比 ≥ 3:1 vs 周圍底色（WCAG 1.4.11）。
- 自訂 focus 樣式時，indicator 至少跟元素邊長一樣大（WCAG 2.4.13）。
- 不要
outline: none然後沒補替代。 - Focus 樣式 light / dark mode 都要明顯。
文字對比
- Normal text（< 18pt 或 < 14pt bold）：≥ 4.5:1。
- Large text（≥ 18pt 或 ≥ 14pt bold）：≥ 3:1。
- UI 元件（border、icon）：≥ 3:1。
- Decorative 元素無要求。
顏色
- 顏色不能是唯一傳達狀態的方式（WCAG 1.4.1）。
- Success / error / warning 要配 icon + 文字。
- Link 不能只靠藍色（要加底線或粗體）。
- Charts 用 pattern + 顏色雙保險。
Semantic HTML
- 用對的 tag：
<button>、<a>、<nav>、<main>、<section>、<article>、<aside>、<header>、<footer>。 - 不要
<div onclick>當按鈕用。 - 表格用
<table>，不要用 div 拼。 - 表單欄位有
<label>。
ARIA
- 預設用 semantic HTML，ARIA 補強。
- Modal：
role="dialog" aria-modal="true" aria-labelledby="..."。 - Alert dialog：
role="alertdialog"。 - Toast 一般訊息：
role="status"+aria-live="polite"。 - Toast 錯誤：
role="alert"+aria-live="assertive"。 - Tab：
role="tab"/role="tabpanel"+aria-selected。 - Tooltip：
role="tooltip"+ 元素aria-describedby="tooltip-id"。 - Disabled 按鈕：
aria-disabled="true"（保留焦點，可解釋原因）。 - Icon button：
aria-label="Delete"。 - Form field：
<label>連結；error 用aria-describedby指到 error message。 - Progress：
role="progressbar" aria-valuenow=78 aria-valuemin=0 aria-valuemax=100。
Screen reader 友善
- 圖片
alt文字（裝飾用alt=""）。 - 圖示按鈕
aria-label。 - 更新內容用
aria-live讓 SR 唸出。 - 隱藏內容用
hidden或aria-hidden="true"（CSSdisplay: none也行）。 - 視覺隱藏但 SR 可讀：
.sr-onlyclass（position: absolute; clip: rect(0,0,0,0)等）。
Form a11y
- 每個 input 必有
<label>（visible 或aria-label）。 - Required 用
aria-required="true"+ 視覺*。 - Error message
aria-describedby連到欄位。 - Error 加
role="alert"即時通知 SR。 - Fieldset / legend 包群組（radio group、checkbox group）。
Motion
- 尊重
prefers-reduced-motion，減少動畫或關閉。 - 不用快速閃爍（避免癲癇風險，閃爍 < 3Hz）。
- Auto-play 內容必有暫停按鈕。
Touch target
- iOS：44×44pt。Android：48×48dp。
- 視覺可小，但 hit area 要夠。
字體大小
- Body text 建議 ≥ 14px（小於 14 對中年使用者吃力）。
- 行高 ≥ 1.5。
- 段落寬度 ≤ 75 字元（適合閱讀）。
Zoom / 縮放
- 支援瀏覽器 zoom 到 200% 不破版。
- 不寫死
font-size: 12px之類（用 rem）。
語言
<html lang="zh-TW">必須設。- 跨語言段落用
lang="en"。
測試清單
- 只用鍵盤跑一遍主流程。
- 螢幕閱讀器（VoiceOver / NVDA）唸過一遍。
- 對比測試（axe DevTools、Stark）。
- 反白文字 / dark mode 對比測試。
- 縮放 200% 測試。