アクセシビリティ
CodeConnect Design Systemは、すべてのユーザーがアクセスできる包括的なデジタル体験を提供することを目指しています。WCAG 2.1 レベルAAに準拠し、アクセシブルなコンポーネントとパターンを提供します。
WCAG準拠
WCAG 2.1 レベルAA準拠
知覚可能: 情報とUIコンポーネントをユーザーが認識できる
操作可能: UIコンポーネントとナビゲーションが操作可能
理解可能: 情報とUIの操作が理解可能
堅牢: 支援技術を含む様々な方法で解釈可能
カラーコントラスト
すべてのテキストとUIコンポーネントは、適切なカラーコントラストを確保しています。
通常テキスト
コントラスト比 4.5:1 以上
プライマリテキスト
7.2:1セカンダリテキスト
4.8:1大きなテキスト
18pt以上: 3:1 以上
見出し
7.2:1ブランドテキスト
5.1:1キーボードナビゲーション
すべてのインタラクティブ要素はキーボードでアクセス可能です。
キーボード操作のサポート
Tab次の要素にフォーカス移動
Shift + Tab前の要素にフォーカス移動
Enterボタンやリンクを実行
Spaceチェックボックス・スイッチのトグル
Escモーダルやメニューを閉じる
↑ ↓ ← →メニューやラジオボタン内の移動
フォーカス管理
明確で視認性の高いフォーカスインジケーターを提供します。
フォーカスインジケーター
デフォルトのフォーカススタイル（ブランドカラー、2pxアウトライン）:
実装: すべてのインタラクティブ要素に focus:ring-2 focus:ring-brand を適用
フォーカストラップ
モーダルやドロワーなど、フォーカスを閉じ込める必要がある場合は、Radix UIのフォーカストラップ機能を使用しています。ユーザーが誤ってモーダルの外にフォーカスを移動することを防ぎます。
ARIA属性とセマンティックHTML
適切なARIA属性とセマンティックHTMLを使用して、スクリーンリーダーのサポートを提供します。
セマンティックHTML優先
✅ 正しい例
<button onClick={handleClick}>クリック</button>
<a href="/about">会社情報</a>
<nav aria-label="メインナビゲーション">...</nav>
<main>...</main>
<article>...</article>❌ 避けるべき例
<div onClick={handleClick}>クリック</div>
<div className="link">会社情報</div>
<div className="nav">...</div>
<div className="main">...</div>ARIA属性の使用例
aria-label
視覚的にラベルがない要素に、スクリーンリーダー用のラベルを提供します。
<button aria-label="メニューを開く">
<Icon name="menu" />
</button>aria-labelledby / aria-describedby
既存の要素を参照してラベルや説明を提供します。
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<h2 id="dialog-title">確認</h2>
<p id="dialog-desc">本当に削除しますか？</p>
</div>aria-live
動的に更新されるコンテンツをスクリーンリーダーに通知します。
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>
{/* 緊急度の高い通知 */}
<div aria-live="assertive" role="alert">
{errorMessage}
</div>aria-hidden
装飾的な要素をスクリーンリーダーから隠します。
<button>
<Icon name="check" aria-hidden="true" />
<span>保存</span>
</button>コンポーネント別のアクセシビリティ
各コンポーネントは、Radix UIまたは独自実装により、アクセシビリティがビルトインされています。
Button
- • キーボードアクセス（Enter, Space）
- • 明確なフォーカスインジケーター
- • disabled時のaria-disabled
Input / Textarea
- • label要素との適切な関連付け
- • エラー時のaria-invalid
- • 説明文のaria-describedby
Dialog (Radix UI)
- • フォーカストラップ
- • Escでクローズ
- • aria-modal, role=“dialog”
Select (Radix UI)
- • 矢印キーでオプション選択
- • Enter/Spaceで開閉
- • aria-expanded, aria-controls
Checkbox (Radix UI)
- • Spaceでトグル
- • aria-checked状態
- • label要素との関連付け
Toast (Radix UI)
- • aria-live=“polite/assertive”
- • role=“status/alert”
- • 自動消滅タイマー
テストツール
アクセシビリティを確保するために、以下のツールを使用してテストを行います。
自動テストツール
- axe DevTools - ブラウザ拡張機能
- Lighthouse - Chrome DevTools統合
- WAVE - ブラウザ拡張機能
手動テスト
- キーボードナビゲーション - Tab, Enter, Escのみで操作
- スクリーンリーダー - NVDA, JAWS, VoiceOverでテスト
- カラーコントラスト - WebAIM Contrast Checkerで確認
アクセシビリティチェックリスト
新しいコンポーネントやページを実装する際の確認項目：
参考リソース
WCAG 2.1 クイックリファレンス
W3C公式ガイドライン
Radix UI アクセシビリティ
Radix UIのA11yベストプラクティス
WebAIM Contrast Checker
カラーコントラスト検証ツール
The A11Y Project
コミュニティ主導のA11yリソース