ユニバーサルデザインとは
このデザインシステムは、WCAG 2.1 AA基準に準拠し、すべてのユーザーが快適に利用できるように設計されています。
WCAG 2.1 AA準拠
Web Content Accessibility Guidelines 2.1のレベルAA基準に準拠
色覚特性対応
色だけに依存しない情報伝達
キーボード操作
すべての機能をキーボードのみで操作可能
スクリーンリーダー対応
適切なARIA属性とセマンティックHTML
カラーコントラスト比
WCAG AA基準では、通常テキストで4.5:1以上、大きなテキスト（18px以上または14px太字以上）で3:1以上のコントラスト比が必要です。
UD準拠カラー
text-ud-text-primary
#1F2937 on #FFFFFF - コントラスト比: 14.6:1 ✓
text-ud-link-default
#0369A1 on #FFFFFF - コントラスト比: 5.9:1 ✓
text-ud-error
#DC2626 on #FFFFFF - コントラスト比: 5.9:1 ✓
フォーカスインジケーター
キーボードナビゲーションのユーザーが現在の位置を把握できるよう、明確なフォーカスインジケーターを提供します。
インタラクティブデモ
Tabキーで各要素にフォーカスして、フォーカスリングを確認してください。
実装方法
focus:outline-none focus-visible:ring-4 focus-visible:ring-accent-blue-500/50 focus-visible:ring-offset-2タッチターゲットサイズ
WCAG 2.1では、タッチターゲットの最小サイズを44×44ピクセルと推奨しています。すべてのインタラクティブ要素はこの基準を満たしています。
✓ 44px高さ
min-h-[44px]
✓ 44px高さ
min-h-[44px]
✓ 48px高さ
min-h-[48px]
ARIA属性とセマンティックHTML
スクリーンリーダーや支援技術が正しく情報を伝えられるよう、適切なARIA属性とHTML要素を使用します。
ランドマーク
<header> - サイトヘッダー
<nav aria-label="メインナビゲーション"> - ナビゲーション
<main id="main-content"> - メインコンテンツ
<aside> - 補足情報
<footer> - サイトフッターフォーム
<label for="email">メールアドレス</label>
<input
id="email"
type="email"
aria-required="true"
aria-invalid="false"
aria-describedby="email-help email-error"
/>
<p id="email-help">例: user@example.com</p>
<p id="email-error" role="alert">エラーメッセージ</p>アラート
<div role="alert" aria-live="polite">
<span class="sr-only">成功:</span>
保存が完了しました。
</div>スクリーンリーダー専用テキスト
<span class="sr-only">
スクリーンリーダーにのみ読み上げられるテキスト
</span>Tailwindクラス: sr-only
色覚特性対応
色だけに依存せず、アイコンやテキストラベルを併用して情報を伝えます。
良い例
✓ アイコン、色、テキストの3要素で情報を伝達
✓ 色覚特性の違いに関わらず理解可能
キーボードナビゲーション
すべての機能をキーボードのみで操作できます。
| キー | 動作 |
|---|---|
| Tab | 次の要素にフォーカスを移動 |
| Shift + Tab | 前の要素にフォーカスを移動 |
| Enter | ボタンやリンクを実行 |
| Space | ボタンを実行、チェックボックスを切り替え |
| Esc | モーダルやドロップダウンを閉じる |
| ↑↓←→ | メニューやラジオボタン内を移動 |