響應式與無障礙設計
緊急相關的頁面必須讓每個人在任何裝置上，即使在壓力下也能使用。清晰勝過花俏。
斷點
Tailwind 預設值：sm 640、md 768、lg 1024、xl 1280、2xl 1536。以行動裝置為優先進行設計，並針對每個範圍有意識地設計：
- 320–639： 單欄、平面手機、水平捲動快照圖庫、全寬堆疊的 CTA、摺疊面板中的選單。
- 640–1023： 內容允許的情況下使用雙欄網格；仍然沒有 3D 傾斜或固定效果。
- ≥ 1024： 不對稱 12 欄佈局、2.5D 手機、指標傾斜、可選的黏性說故事效果。
測試寬度：320、375、414、768、1024、1280、1440、1920。在任何寬度下都沒有水平頁面捲動（注意旋轉手機和過大的字體——在區段上使用
overflow-x: clip，而不是body）。
地標與結構
<a href="#main" class="skip-link">跳到主要內容</a>作為第一個可聚焦元素。<header>（導覽）、<main id="main">、每個區段使用<section aria-labelledby="…-heading">、<footer>。- 恰好一個
h1（主要標題）。每個區段以h2開頭；子項目使用h3。無跳過的層級。 - 區段
id與導覽錨點匹配：about、features（類別 + 展示區）、how-it-works、register、faq。 - 錨點目標偏移以容納黏性導覽：
scroll-margin-top: var(--nav-h)。
導覽
- 桌面版：行內連結 + 一個資訊性的 CTA（例如「探索功能」）——沒有下載/安裝的 CTA，請參閱 CLAUDE.md 中的「範圍：展示，非安裝漏斗」。
- 行動版：一個
<button aria-expanded aria-controls="mobile-menu">來切換面板。開啟時：焦點移到第一個連結；按Esc關閉並將焦點返回按鈕；點擊連結會關閉選單。主體捲動鎖定是可選的，並且必須可靠地釋放。漢堡按鈕具有可存取名稱「開啟選單」/「關閉選單」。 - 當前區段指示（可選）透過
aria-current="true"，而不是僅用顏色。
鍵盤與焦點
- 所有互動元素在視覺順序中都可透過 Tab 鍵到達。沒有正數的
tabindex。 - 所有控制元件上都有可見的焦點環：
outline: 2px solid var(--color-accent); outline-offset: 3px;——確保在深色和淺色背景上都有 ≥ 3:1 的對比度（在紅色按鈕上使用淺色環）。 - 水平圖庫：容器
tabindex="0"搭配role="region"+aria-label，方向鍵原生捲動。 - 任何停用/不可用的控制元件（例如缺少的聯絡/法律連結）：呈現為帶有說明文字的
<span aria-disabled="true">或<button disabled>，絕不能是可聚焦的假連結。
FAQ 摺疊面板
- 偏好使用原生的
<details><summary>；或者button[aria-expanded][aria-controls]+ region。摘要文字是放在相當於h3元素內的純文字問題。 - 內容存在於 DOM 中（可搜尋，無需 JavaScript 即可運作）。
觸控與指標
- 觸控目標 ≥ 44×44px（按鈕、選單項目、FAQ 切換開關）。
- 相鄰目標之間間距 ≥ 8px。
- 僅在懸停時顯示的效果絕不能隱藏資訊。
色彩與文字
- 主體文字對比度 ≥ 4.5:1，大型文字 ≥ 3:1，UI 邊界 ≥ 3:1。
- 狀態（待處理/進行中/已清除）始終附有文字標籤 + 圖示，不僅是顏色。
- 文字可放大至 200% 而不損失內容；無固定高度的文字容器。
- 主體文字行長度 ≤ ~70 字元。
圖片與媒體
- 有意義的螢幕截圖：提供事實性的
alt文字（請參閱 app-screenshot-showcase）。純裝飾性：裝飾性 SVG 使用alt=""+aria-hidden。 - 佔位符應自我宣告：「佔位符螢幕截圖：註冊畫面」。
- 伴隨文字的圖示：
aria-hidden="true"。
動態效果
- 尊重
prefers-reduced-motion（請參閱 lightweight-motion）。沒有任何內容僅透過動畫出現。 - 說明性的動畫元件（追蹤、協調）需包含可見文字說明它們是插圖，並且不使用
aria-live（非即時資料）。
緊急資訊
- 免責聲明應出現在主要 CTA 附近、FAQ 中（「SOS 是否可取代緊急熱線？」）、最終 CTA 附近以及頁尾。使用通俗易懂的語言，對比度可讀，不隱藏在極小的文字中（≥ 14px）。
審查清單
- axe / Lighthouse 無障礙評分 ≥ 95，無重大違規
- 僅使用鍵盤：跳過連結、選單開啟/關閉/Esc、所有錨點、FAQ、圖庫
- 螢幕閱讀器抽查（VoiceOver/NVDA）：標題列表合理
- 320px：無溢出、標題可容納、CTA 突出
- 200% 縮放正常
- 減少動態效果已驗證
- 行動裝置橫向模式（例如 740×360）可使用