Accesserty UI Kit
無障礙 Web Components
為無障礙而做的元件，不綁定單一前端框架。
MIT 授權、免費，直接用 HTML 試用。
什麼時候適合使用 UI Kit？
不想從頭處理每個無障礙細節
頁籤要能用方向鍵切換，選單要能用鍵盤開啟與關閉，選取狀態也要讓輔助科技知道。這些常見操作已寫在元件裡，讓你有基礎可以沿用，不必每個專案都從頭做。
不想換個框架，就重新做一套元件
元件本身使用瀏覽器的 Web Components，不依賴 Vue 或 React，也不需另外載入執行期套件。一般 HTML 與不同框架可以沿用同一份元件實作；換環境或升級時，仍要檢查載入方式、資料與事件的設定。
不想改個外觀，還要學另一套主題設定
顏色、間距、邊框等外觀，直接在樣式表裡用 CSS 變數調整，不必另設 UI Kit 專用的主題系統。需要改更多細節時，再查看各元件開放的 CSS Parts。
用 HTML 標籤放進頁面，元件處理本身的操作；資料如何帶入、操作後要更新什麼，接上你專案裡的程式。
表單與輸入
- Input
au-input - Textarea
au-textarea - Checkbox
au-checkbox - Radio group
au-radio-group - Switch
au-switch - Rating
au-rating - File upload
au-file-upload
導覽與選擇
- Tabs
au-tabs - Dropdown
au-dropdown - Pagination
au-pagination - Breadcrumbs
au-breadcrumbs - Tree
au-tree
原生 HTML 能完成的功能，就先用原生 HTML。Button、Select、Dialog 保留 button、select、dialog 元素，另有可選的樣式；不包含在這 15 種自訂元件裡。
先在 HTML 試試，再接進你的專案
先操作這裡的頁籤，再照範例放進自己的測試頁。已有 Vue／Nuxt 或 React／Next 專案，也可以直接展開對應設定。
服務資訊
先試試這組頁籤。按 Tab 移到頁籤，再用左右方向鍵切換；再按 Tab 可以進入內容。
我們協助團隊檢查網站的操作流程。
請使用網站的聯絡表單提出問題。
下方 HTML 就是這個例子的寫法。
純 HTML 範例
這段程式碼會載入 UI Kit，並建立兩個頁籤。想存成檔案試跑，可以展開下方的完整 HTML；不需要 npm 或建置工具。
載入 JavaScript，放上兩個頁籤
<script src="./accesserty-ui-kit.min.js" defer></script>
<h1 id="service-title">服務資訊</h1>
<au-tabs class="example-tabs" aria-labelledby="service-title">
<div class="au-tab-panel" slot="panel" label="服務內容">
<p>我們協助團隊檢查網站的操作流程。</p>
</div>
<div class="au-tab-panel" slot="panel" label="聯絡方式">
<p>請使用網站的聯絡表單提出問題。</p>
</div>
</au-tabs>查看完整 HTML，存成檔案試跑
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>服務資訊頁籤</title>
<script src="./accesserty-ui-kit.min.js" defer></script>
</head>
<body>
<main>
<h1 id="service-title">服務資訊</h1>
<au-tabs class="example-tabs" aria-labelledby="service-title">
<div class="au-tab-panel" slot="panel" label="服務內容">
<p>我們協助團隊檢查網站的操作流程。</p>
</div>
<div class="au-tab-panel" slot="panel" label="聯絡方式">
<p>請使用網站的聯絡表單提出問題。</p>
</div>
</au-tabs>
</main>
</body>
</html>沒有看到頁籤？先檢查這裡
完整範例存成 index.html，與下載的 accesserty-ui-kit.min.js 放在同一資料夾，再用瀏覽器開啟。應看到兩個頁籤，預設顯示「服務內容」；方向鍵切換後，內容也會跟著切換。
如果只看到兩段文字，先檢查 JavaScript 的檔名與相對路徑是否和範例相同，再確認瀏覽器沒有擋住程式執行。這個例子已有基本樣式，不需要額外 CSS。
這是一般 HTML 範例。Vue／Nuxt、React／Next 專案請看本節的對應設定。
第一次使用的三個步驟
挑一個需要的元件
從上方清單挑選，在 Playground 預覽元件與調整樣式；點元件名稱，可以到 GitHub 看 HTML 範例。
在測試頁載入元件
使用純 HTML，就下載 JavaScript，將完整範例存成 index.html，放在同一資料夾後用瀏覽器開啟。Vue／Nuxt、React／Next 專案依下方設定載入元件。
換上自己的內容再試一次
改成你網站的文字與資料，再接上功能和樣式。用鍵盤完成一個實際任務，例如填完表單並送出，再用螢幕閱讀器測試。
Vue / Nuxt
- Nuxt：把 UI Kit 的 dist 資料夾複製到專案（例如 vendor/accesserty/，不要放在 public/），再於 nuxt.config.ts 加一個 module。不需要自己寫外掛、設定 isCustomElement 或包 <ClientOnly>。
- Vue＋Vite：載入元件、安裝 AccessertyVue 外掛，Vite 設定改用 UI Kit 提供的 isCustomElement。表單元件可以直接寫 v-model，多個 checkbox 也能共用同一個陣列。
Nuxt：nuxt.config.ts
export default defineNuxtConfig({
modules: ['./vendor/accesserty/accesserty-ui-kit-nuxt.js']
})React / Next
- React 19：表單元件有對應的 React 元件（AuInput、AuCheckbox 等），和原生欄位一樣用 value／checked 與 onChange 控制。其他元件直接寫成 au-* 標籤。
- Next：在用戶端元件呼叫一次 defineElements()；伺服器會輸出元件標籤與初始值。使用自架的 Next 伺服器時，accordion、tabs、breadcrumbs 也能在伺服器先畫好。
範例從 vendor/ 載入複製過來的 dist，和實際專案的做法相同；請把路徑換成你放檔案的位置。
接上資料，調整成網站需要的樣子
取得資料、回應操作
使用者填完欄位、勾選項目或切換頁籤後，你的程式要取得資料並做出回應。依元件文件接上屬性、事件與表單處理。檔案元件只處理選取；上傳要接自己的程式，伺服器也要驗證。
查看資料與表單範例直接用 CSS 調整外觀
範例頁籤有 example-tabs 這個 class。把下面的 CSS 放進樣式表，就能改它的顏色，不需要另一份主題設定檔。更多變數與可用的 CSS Parts，見各元件文件。
.example-tabs { --au-tabs-bg: #f5f5f5; --au-tabs-selected-bg: #222; --au-tabs-selected-text-color: #fff; }也可以在 Playground 預覽元件與調整樣式，再複製產生的 CSS；它只輸出你改過的變數，不包含 HTML 或 JavaScript。請把產生的範例 class 換成自己的名稱，並套到對應元素。
查看樣式調整方式換上自己的文字與翻譯
把「服務內容」「聯絡方式」換成你的頁籤名稱，欄位標籤與提示也由你提供。網站切換語言時，一起更新元件上的文字；可以使用原本的翻譯工具，UI Kit 不會自動翻譯。
查看文字設定方式
看得到原始碼，也查得到測試
原始碼、一般 HTML 示範與測試都能在 GitHub 查看，方便你評估實作、排查問題。框架升級時，檢查自己的載入與綁定設定；換過內容或樣式後，也要重測實際頁面。
整合測試使用 Nuxt 4、Vue＋Vite，以及 Next 16 與 React 19；React 整合需要 React 19。這些是特定情境的檢查，不涵蓋每個框架版本或完整應用。
元件不能讓整個網站自動符合 WCAG。用自己的內容與流程，檢查鍵盤操作、可見焦點、文字對比和手機版，並用螢幕閱讀器測試。
常見問題
希望同一份無障礙操作能繼續用在不同專案，而不是為每個框架重寫元件。UI Kit 使用瀏覽器的自訂元素，元件內部不依賴 Vue 或 React；接進框架時仍要設定載入、資料與事件，框架升級後也要檢查這些設定。
可以從純 HTML 開始，也有 Vue／Nuxt、React／Next 的導入範例。Nuxt 加一個 module 就能用，表單元件支援 v-model；React 19 有對應的表單元件。伺服器會輸出元件標籤與初始值，內部控制項在瀏覽器執行 JavaScript 後建立；accordion、tabs、breadcrumbs 可以在伺服器先畫好。實際測試版本與情境列在測試文件中。
元件 JavaScript 沒有執行期套件依賴，也包含基本樣式。一般 HTML 範例不需要 npm 或建置工具；外觀直接用 CSS 變數調整。原生按鈕、select、dialog 的共用樣式另外提供，可以選擇不使用。開發與測試 UI Kit 本身仍需要工具套件。
可以。UI Kit 的 dist/components/ 有 15 個單一元件檔（各有一般版與 min 版），每個都已包含需要的共用程式，可以只複製需要的元件。官網的 JavaScript 下載是整套元件；只用部分元件時，升級由你的專案自行管理。
需要。換上自己的內容、顏色與功能後，操作結果可能改變。請用鍵盤完成實際任務，檢查可見焦點、文字對比與手機版，並用螢幕閱讀器確認。元件測試不等於整個網站符合 WCAG。
可以。UI Kit 使用 MIT 授權，可免費使用與修改；散布程式碼時須保留版權與授權聲明。最新原始碼、完整授權條件、示範與測試都可在 GitHub 查看。