Accesserty UI Kit
原生元素無法完整處理複合互動時，使用可重複運用的鍵盤操作、狀態與無障礙語意。元件採 MIT 授權，可整合至純 HTML 與主要前端框架。
什麼時候適合使用 UI Kit？
重複使用互動行為：元件集中處理各種互動模式需要的鍵盤操作、狀態同步與語意，減少每個專案重新實作造成的不一致。
配合既有設計與語言：透過 CSS variables、Shadow Parts 與可傳入的介面文字，整合產品的視覺規範與多國語系。
跨框架使用：元件可用於純 HTML、Vue、React 與 Angular。不同框架仍可能需要 custom element 設定、事件綁定或薄包裝，導入前應在目標技術環境驗證。
誰最適合使用這套 UI Kit？
- 設計系統架構師
可把已測試的互動模式、文字介面與樣式變數當作設計系統的參考基礎，再依組織技術棧建立整合層。
- 前端開發者
使用元件既有的鍵盤與狀態行為，避免每次重寫 accordion、tabs、tree 或 dropdown；整體頁面是否無障礙仍取決於內容、流程與整合方式。
- 外包接案團隊
可重複使用相同元件與測試基礎，減少不同專案各自維護互動模式的成本；交付前仍需針對完整網站進行人工與輔助科技測試。
如何開始構建？
先確認元件適用，再整合與驗證
- 步驟 1. 先使用原生 HTML 判斷需求
若 button、input、select、dialog 等原生元素已能處理需求，優先使用原生；需要複合互動模式時再選擇 UI Kit 元件。
- 步驟 2. Playground 取樣
在 Playground 查看元件、調整可用參數，並取得 HTML 與 CSS variables 作為整合起點。
- 步驟 3. 隨處皆可運行
在純 HTML 或目標框架中引入套件，傳入翻譯文字並套用設計 Token；最後用鍵盤、螢幕閱讀器與實際流程驗證整合結果。
Playground前往 GitHub
常見問題
Accesserty UI Kit 是一套以原生 HTML 優先的開源 Web Components。它提供可重用的鍵盤操作、狀態管理、語意結構、多國語言文字介面與樣式調整入口，協助團隊建立較一致的互動元件。
可以用在純 HTML、React、Vue 與 Angular，但各框架仍可能需要設定自訂元素 schema、事件型別或薄包裝元件。導入前應依實際框架版本驗證表單、事件與伺服器端渲染行為。
UI Kit 將重複的鍵盤操作、狀態同步與語意結構放進元件，減少每個專案重新實作的成本。但元件無法自動讓整個頁面符合 WCAG；內容、標籤、流程、整合方式與人工測試仍由使用者負責。
是。原始碼以 MIT 授權公開在 GitHub（github.com/Accesserty/UI-Kit），並提供 CSS Variables、CSS Parts、多國語言文字屬性、示範頁與測試，方便團隊依自己的設計系統整合。