Tarragon

"Accessibility"

• 2026-04-25 動態 DOM 移動時的 focus 管理 Filter slot 跨 viewport 搬節點、scope filter 隱藏結果 — 這類 DOM 變動會讓鍵盤 focus 跑掉或停在不可見位置。本文盤點動態 DOM 對 focus 的影響與檢查方法。
• 2026-04-25 Screen reader 與動態內容變動的 live region 設計 Scope filter 切換、結果數量變動 — screen reader 使用者看不到視覺變動、需要 aria-live region 主動朗讀。本文盤點 live region 的設計選擇與適用情境。
• 2026-04-25 Native HTML element 優先於 ARIA role 的取捨 用 `<fieldset><legend>` 比 `<div role="radiogroup">` 安全、用 `<button>` 比 `<div role="button">` 直接 — native element 自帶完整無障礙語意與行為。本文盤點 ARIA role 是 fallback、不是 default。
• 2026-04-25 視覺輔助：對比度、放大、字型 zoom 的 layout 適配 色弱、低對比敏感、低視力使用者跟一般使用者「看到的不是同一個 UI」 — 對比度足夠嗎、絕對定位元件在放大模式下是否可達、字型放大 200% 後 layout 還好嗎。本文盤點視覺呈現面的 a11y 風險點。
• 2026-04-25 鍵盤可達性：focus indicator、tab 順序、escape 路徑 鍵盤使用者用 tab / shift+tab 導航、enter / space 激活、esc 退出。三件事決定可不可用：focus 是否可見、tab 順序是否合理、modal / overlay 有沒有 escape 路徑。本文盤點搜尋頁的鍵盤 a11y 風險點。
• 2026-04-25 Motor 可達性：hit target、間距、誤點防護 Hit target 太小會讓行動裝置使用者誤點、motor 障礙使用者更甚。WCAG AAA 建議 ≥ 44×44px、間距足夠避免誤觸。本文展開 hit target 設計與相關 motor a11y 風險點。
• 2026-04-26 Tab Order = DOM Order = Mental Model 三者對齊 Tab 順序由 DOM 順序決定（除非用 tabindex 強制覆寫）。三者該對齊：DOM 順序、tab 順序、使用者 mental model 的互動順序。三者不一致時、優先重排 DOM 而非用 tabindex — tabindex > 0 是反模式（[#52]）。
• 2026-04-26 Accessibility and Focus — A11y 三道防線 frontend-with-playwright reference：鍵盤可達性三要素、focus management on DOM move、aria-live 動態廣播、Native HTML > ARIA、視覺 / motor a11y。