Accessibility
Radix Primitives と Field システムによる自動アクセシビリティ対応のガイドラインです。
WCAG 2.2 AA
Radix Primitives
Field System
Focus Management
focus-visible:focus-ring で統一。Input / Textareaのみキーボード検出による独自制御
通常フォーカス
--color-focus-ringuser@example.com
エラー時フォーカス
--color-focus-ring-errorinvalid-email
:focus-visible はキーボードフォーカスのみで発火します。 マウスクリック時にはフォーカスリングが表示されません。Input / Textareaはさらに独自のキーボードフォーカス検出を行い、Tab操作時のみリングを表示します。
Color Contrast
WCAG 2.2 AA では、テキストとUIコンポーネントに最低コントラスト比が要求されます。
4.5:1AA
テキスト（通常）
3:1AA
テキスト（大）
18px+ / 14px bold+
3:1AA
UI要素
7:1AAA
テキスト（強化）
良い例
見出しテキスト
text-foreground on bg-background-muted
アクションラベル
text-background on bg-foreground
悪い例
見出しテキスト
低コントラスト — opacity-30
見出しテキスト
さらに低コントラスト — opacity-40
Touch Targets
WCAG 2.5.8 は最小 24px を推奨。default（40px）以上で充足します。デスクトップではマウス操作のため、小さいサイズも実用的です。
xs
28px
sm
32px
default
40px
lg
48px
xl
56px
より良い操作性のためのヒント:
- • 要素間に十分な間隔（8px以上）を確保する
- • Checkbox / Switch / RadioGroupはラベルクリックで切り替え可能 — ラベル領域がタッチターゲットを補完
- • モバイル向け画面では lg 以上のサイズを検討する
Screen Reader
各コンポーネントが自動管理するARIA属性の一覧です。
Button
aria-busyloading=true 時に自動付与aria-pressedselected=true 時に自動付与disablednative disabled属性（aria-disabledではない）IconButton
aria-labelテキストがないため必須手動aria-hidden内部SVGアイコンに自動付与Input（Field連動）
aria-invaliderror=true 時に自動付与aria-describedbyField内でFieldErrorに自動接続Checkbox / Switch / Radio
roleRadixが自動設定（checkbox / switch / radiogroup）aria-checked状態に応じて自動管理FieldError
role="alert"エラーメッセージをスクリーンリーダーに即時通知装飾 SVG
aria-hidden="true"Button leftIcon/rightIconで自動付与Web Guidelines
コンポーネントに限らず、Web全般で推奨されるアクセシビリティのベストプラクティスです。
セマンティックHTML
- • <button>、<nav>、<main> 等の適切な要素を使用
- • <div onClick> ではなく <button> を使う
- • リストは <ul> / <ol> でマークアップ
見出し階層
- • h1 → h2 → h3 の順序を守る（レベルを飛ばさない）
- • ページに h1 は1つだけ
- • 見出しはスクリーンリーダーのナビゲーションポイントになる
ランドマーク
- • <header>、<footer>、<aside> でページ構造を明示
- • メインコンテンツを <main> で囲む
- • スクリーンリーダーがページ内をジャンプできるようになる
代替テキスト
- • すべての意味のある画像に alt 属性を設定
- • 装飾的な画像は alt="" で非表示
- • alt テキストは画像の内容を簡潔に説明する
色だけに依存しない
- • エラー表示は赤色＋アイコン＋テキストを併用
- • グラフはパターンやラベルで区別できるようにする
- • リンクは色だけでなく下線やアイコンで区別
動的コンテンツ
- • aria-live で動的更新をスクリーンリーダーに通知
- • トースト・通知には role="alert" または role="status"
- • ページ遷移時にフォーカスを適切に管理する