無障礙存取

lh-ui-plus 致力於為全球使用者提供無障礙的 UI 體驗。

鍵盤導覽

所有互動元件均支援鍵盤操作：

按鍵	動作
Tab	在可聚焦元素間切換
Enter / Space	啟用按鈕/開關
Escape	關閉 Dialog/Select 彈出層
Arrow Up/Down	在 Select/Cascader 選項中上下移動

ARIA 屬性

元件按需輸出 ARIA 屬性（以下為實際繪製結果）：

<!-- Button 禁用態：原生 disabled，可被 Tab 跳過 -->
<button disabled>...</button>

<!-- Switch 開關：button + role/aria-checked -->
<button role="switch" aria-checked="false">...</button>

<!-- Checkbox：原生 input，語義由標籤提供 -->
<input type="checkbox" />

<!-- Dialog 對話框：aria-modal + aria-label 指向標題 -->
<div role="dialog" aria-modal="true" aria-label="對話框標題">
  ...
</div>

原生語意優先：Button 用原生 disabled、Checkbox 用原生 <input type="checkbox">，不再重複添加 aria-disabled / role="checkbox" —— 給原生元素疊加冗餘 ARIA 反而違反規範。

螢幕閱讀器

• 純圖示按鈕需手動傳 aria-label（見下方開發建議）
• Dialog 關閉按鈕自帶 aria-label="close"
• 元件透傳原生屬性：任何未顯式處理的特性會落到根元素，可按需補充 aria-*

顏色對比度

正文與主色調按 WCAG 2.1 AA 目標選取（正常文字 ≥ 4.5:1，大文字與非文字元素 ≥ 3:1）；國風低飽和配色下建議用主題定製的 --lh-text-color-* 層級而非自選顏色，以保證對比度。

焦點管理

• 根元素統一提供 :focus-visible 焦點環：鍵盤導覽時顯示、滑鼠點選不顯示
• Dialog/Select 彈出層支援 Escape 關閉
• 鍵盤可操作性：可聚焦元素均為原生 <button> / <input>，天然支援 Tab 遍歷

焦點陷阱與焦點還原（開啟 Dialog 時聚焦首個元素、關閉後回到觸發按鈕）尚未實現，歡迎在 Issue 中跟進。

開發建議

為元件添加 aria-label

<LhButton aria-label="关闭对话框" @click="close">
  <LhIcon name="close" />
</LhButton>

使用活區公告

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div aria-live="polite">{{ message }}</div>
</template>

Skip Navigation

<a href="#main" class="skip-link">Skip to main content</a>

測試工具

推薦使用以下工具檢測無障礙問題：

• axe DevTools — 瀏覽器擴充功能
• WAVE — Web Accessibility Evaluation Tool
• lighthouse — 內建無障礙稽核

---

無障礙不是可選功能，而是基本人權。 — Web Accessibility Initiative (WAI)