TASHIKA Docs

Appearance

国際化・アクセシビリティ設計 ​

国際化 (i18n) アーキテクチャ ​

翻訳管理 ​

項目方針
ライブラリreact-i18next + i18next
翻訳ファイル形式JSON（言語コードごとにファイル分割: ja.json, en.json, ...）
翻訳ファイルの読み込み遅延読み込み（選択された言語のファイルのみをロード）
翻訳キー規約{ポータル}.{画面}.{要素} 形式（例: employee.declaration.confirmButton）

言語切替の実装 ​

  • ユーザーの言語設定はサーバーに保存（UserProfile）
  • ブラウザの Accept-Language ヘッダーで初回自動判定
  • 言語切替時はページリロード不要（リアクティブに再レンダリング）

→ 満たす要件: アクセシビリティ 多言語対応

アクセシビリティ設計 ​

WCAG 2.2 AA準拠 ​

  • セマンティックHTML（<main>, <nav>, <section>, <form> の適切な使用）
  • キーボードナビゲーション対応（Tab/Shift+Tab/Enter/Esc）
  • スクリーンリーダー対応（aria-label, aria-describedby, role 属性）
  • カラーコントラスト比の確保（通常テキスト 4.5:1以上、大きいテキスト 3:1以上）
  • フォーカス管理: モーダル・ドロワー開閉時のフォーカストラップ

ダークモード ​

  • prefers-color-scheme メディアクエリに対応
  • セマンティックカラートークン（CSS Custom Properties）で全テーマを管理
  • ユーザー手動切替も可能（設定をLocalStorageに保存）

→ 満たす要件: アクセシビリティ要件