:::
Playground前往 GitHub
Accesserty UI Kit
前端框架會過時，但無障礙標準不會。Accesserty UI Kit 是一套基於原生 Web Components 的元件庫，協助開發者跨越框架限制，直接調用符合 WCAG 規範的互動元件。
為什麼選擇原生 Web Components？
封裝無障礙智慧：我們將繁瑣的 ARIA 狀態與鍵盤互動邏輯，封裝在 Shadow DOM 之中。即便是初級開發者，也能像使用 HTML 標籤一樣，輕鬆寫出大師級的無障礙代碼。
設計與開發的通用語言：透過 CSS Variables 與 Figma 變數的完美映射，我們消除了「設計稿」與「程式碼」之間的翻譯誤差。讓無障礙從設計階段就開始發生。
超越框架的壽命：前端生態每三年就大洗牌。Accesserty UI Kit 基於瀏覽器原生標準，無論您未來遷移到哪個新框架，這些底層元件都能無痛移植，成為您資產庫中的永恆基石。
誰最適合使用這套 UI Kit？
- 設計系統架構師
正在尋找一套不被特定框架綁架的底層系統？利用我們的 Kit 作為核心，您可以更輕易地在公司內部推動跨技術（React/Vue/Angular）的 UI 統一。
- 前端開發者
不懂 `aria-expanded` 怎麼切換？沒關係。直接複製貼上我們的元件，您就已經完成了約 50% 的無障礙合規工作。
- 外包接案團隊
客戶要求無障礙網站，但預算有限？使用 Accesserty UI Kit 快速組裝，無需從零刻刻元件，用最低成本交付高品質的合規網站。
如何開始構建？
從設計變數到程式碼，無縫接軌
- 步驟 1. 同步 Figma 變數
參照 Accesserty 的變數規範進行設計，確保對比度與間距在起跑點就符合標準。
- 步驟 2. Playground 取樣
在我們的遊樂場中調整參數，所見即所得。一鍵複製生成的 CSS Variables 與 HTML 標籤。
- 步驟 3. 隨處皆可運行
無論是原生 HTML 還是現代框架，引入腳本即可使用。它是瀏覽器的一部分，無需複雜的編譯設定。
Playground前往 GitHub