アクセシビリティ

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)