アクセシビリティ

AnimaTimeはすべてのユーザーが快適に利用できるよう、アクセシビリティの向上に取り組んでいます。

準拠目標

実装済みの対応

スキップナビゲーション

ダッシュボード画面にはスキップナビゲーションリンクを設置しています。 Tabキーを押すと「メインコンテンツへスキップ」リンクが表示され、 サイドバーのナビゲーションを飛ばしてメインコンテンツに直接移動できます。

キーボードナビゲーション

すべての主要操作はキーボードのみで実行できます。

• ●Tabキーによるフォーカス移動
• ●Enter / Spaceキーによるボタン・リンクの操作
• ●Escapeキーによるモーダル・ポップオーバーの閉じる操作
• ●矢印キーによるドロップダウン・リスト内の移動

フォーカスインジケータ

キーボード操作時にフォーカスされた要素には、2pxのプライマリカラーのアウトラインが 表示されます（:focus-visible）。マウス操作時には表示されないため、 視覚的なノイズを最小限に抑えています。

スクリーンリーダー対応

ARIA属性を使用し、スクリーンリーダーでの読み上げに対応しています。

• ●ガントチャートのアイコンボタンにaria-label属性を設定
• ●トグルボタンにaria-pressed属性で状態を通知
• ●ツールバーにrole="toolbar"とaria-labelを設定
• ●フォームの入力欄にLabel要素を関連付け

テスト済みのスクリーンリーダー:

• ●VoiceOver（macOS / iOS）
• ●NVDA（Windows）

カラーコントラスト

主要なテキスト色（foreground: #252525）は背景色（background: #efede8）に対して 十分なコントラスト比を確保しています。 補助テキスト色（muted-foreground: #6f6b62）は一部の背景色との組み合わせで WCAG AA基準（4.5:1）を下回る場合があり、改善を検討中です。

既知の制限事項

• ●ガントチャートのドラッグ&ドロップ操作はキーボードのみでの操作が制限されます（代替手段としてモーダルからの日付入力が可能）
• ●ラッシュチェックのフレーム単位アノテーションはマウス操作が必要です
• ●一部の複雑なデータテーブルでスクリーンリーダーの読み上げ順が最適でない場合があります
• ●muted-foreground色（#6f6b62）のコントラスト比が一部の背景色で4.5:1を下回る可能性があります