アクセシビリティ要件
本ドキュメントは、TASHIKAプラットフォームのアクセシビリティおよび国際化に関する要件を定義します。
NOTE
IPA 6大項目に直接対応しない横断的な品質要件です。
AC-001: 多言語対応 (i18n)
国税庁が公開している外国語版申告書と同等の言語に対応。 対応範囲: 従業員向けポータルのみ（管理者・代行事業者向けポータルは日本語のみ）
対応言語
| 言語 | 備考 |
|---|---|
| 日本語 | 標準 |
| 英語 (English) | 国税庁対応 |
| 中国語 (Chinese) | 国税庁対応 |
| ポルトガル語 (Portuguese) | 国税庁対応 |
| スペイン語 (Spanish) | 国税庁対応 |
| ベトナム語 (Vietnamese) | 国税庁対応 |
| フィリピノ語 (Filipino) | 国税庁対応 |
翻訳対象
従業員向けポータルにおいては、基本的にすべてのテキストを翻訳対象とする。
翻訳対象外の範囲
| 対象外項目 | 理由 |
|---|---|
| 管理者・代行事業者向けポータル | 日本語ネイティブの利用を想定。翻訳コスト削減 |
| 提出データ（e-Tax/eLTAX向け） | 法定フォーマットは日本語必須 |
| 監査ログ・操作履歴 | システム内部記録。日本語で統一し検索性を確保 |
| 利用規約・プライバシーポリシー | 法的拘束力のある文書は日本語版を正とする（参考訳は別途提供可） |
| システムエラーメッセージ（技術系） | 開発者向けの詳細エラー。ユーザー向けメッセージは翻訳対象 |
| マスターデータ（住所、金融機関名等） | 日本の地名・機関名は翻訳しない。入力ミス防止のため |
翻訳品質・メンテナンス
- 国税庁公式翻訳の優先使用: 税務用語は国税庁が公開している外国語版申告書で使用されている単語・表現を優先的に採用し、用語の一貫性を確保。
- 専門家監修: リリース前に税務・翻訳の専門家による監修を実施。誤訳による申告ミスを防止。
- 法改正時の更新フロー: 税制改正に伴う用語変更は、国税庁の外国語版更新を確認後に反映。
言語切り替えの仕様
- ユーザー設定保存: 選択した言語をユーザープロファイルに保存し、次回ログイン時に自動適用。
- ブラウザ言語自動検出: 初回アクセス時はブラウザの言語設定から自動判定。
- 途中での言語変更: セッション中いつでも言語を切り替え可能。入力中のデータは保持。
AC-002: 認知的アクセシビリティ
年末調整は手続きが複雑であり、認知負荷を軽減するための設計が不可欠である。
- 進捗の可視化: 入力完了までのステップ数、残り項目数を常に表示し、ユーザーが現在地を把握できるようにする。
- エラーメッセージの明確化: 何が問題で、どう修正すべきか具体的に示す。エラー箇所へのジャンプ機能も提供。
- 平易な言葉づかい: 税務用語には補足説明（ツールチップ等）を添え、専門知識がなくても理解できるようにする。
- 一貫したレイアウト: 画面間でナビゲーション、ボタン配置、情報の構造を統一し、学習コストを最小化する。
AC-003: デバイス・環境対応
従業員の多くがスマートフォンから入力することを前提に、多様なデバイスと通信環境に対応する。
- レスポンシブデザイン: スマホ・タブレット・PC全対応。モバイルファースト設計とする。
- 低帯域/オフライン対応: 通信環境が悪い場所でも入力途中データをローカルに保持し、復帰後に同期。
- 対応ブラウザ: Chrome、Safari、Edge、Firefox の最新2バージョンをサポート対象とする。
AC-004: 操作性アクセシビリティ
マウスやタッチ操作が困難なユーザーでも全機能を利用できるようにする。
- キーボードナビゲーション: マウスなしで全操作可能。Tab/Shift+Tab/Enter/Escキーでの操作をサポート。
- フォーカス管理: 現在のフォーカス位置を視覚的に明示（フォーカスインジケーター）。モーダルやフォーム遷移時のフォーカス制御。
- スキップリンク: メインコンテンツへのスキップリンクを提供し、キーボードユーザーのナビゲーション効率を向上。
- フォーカストラップ: モーダルダイアログ表示中はフォーカスをモーダル内に閉じ込め、背景要素への誤操作を防止。
AC-005: 視覚的アクセシビリティ
WCAG 2.2 Level AA 準拠を達成し、視覚障害のある従業員も取り残さない。
コントラスト・色彩
- コントラスト比: 通常テキスト 4.5:1 以上、大テキスト（18px以上 / 14px太字以上）3:1 以上を確保すること。
- 色だけに依存しない情報伝達: エラー表示やステータス表示は、色に加えてアイコン・テキスト・パターンで識別可能とする。
ダークモード
- 全画面でシステム設定（
prefers-color-scheme）に応じたダークテーマを実装。 - コントラスト比を維持しつつ、セマンティックカラーシステムにより保守性を担保。
フォントサイズ
- ユーザー設定で文字サイズを調整可能。ブラウザのズーム機能（200%まで）にも対応し、レイアウトが崩れないこと。
AC-006: スクリーンリーダー対応
スクリーンリーダー利用者が全機能を操作できることを保証する。
- セマンティックHTML:
divの代わりにnav,main,section,article等のセマンティック要素を使用し、文書構造を正しく伝達する。 - ARIA属性: 動的コンテンツに
aria-liveを設定し、状態変化をスクリーンリーダーに通知する。カスタムUIコンポーネントには適切なroleとaria-*属性を付与する。 - ランドマーク: ページ内の主要領域（ヘッダー、ナビゲーション、メインコンテンツ、フッター）にランドマークロールを設定する。
- 画像の代替テキスト: すべての意味のある画像に
altテキストを付与する。装飾画像はalt=""として読み上げをスキップする。 - 見出し階層:
h1からh6まで論理的に一貫した見出し階層を維持し、文書構造を正しく伝達する。
AC-007: モーション・アニメーション制御
前庭障害やアニメーション過敏症のユーザーに配慮し、動きの制御を提供する。
prefers-reduced-motion対応: OS/ブラウザの「視差効果を減らす」設定を検知し、不要なアニメーション・トランジションを無効化する。- 必須アニメーションの代替: ローディングスピナー等の機能的なアニメーションは、
prefers-reduced-motion有効時に静的な代替表示（プログレスバー、テキスト表示等）に切り替える。 - 自動再生の禁止: 動画や自動スクロールは自動再生しない。ユーザーの明示的な操作で開始すること。
AC-008: タッチターゲットサイズ
モバイルデバイスでの操作性を確保し、運動障害のあるユーザーにも配慮する。
- 最小サイズ: すべてのインタラクティブ要素（ボタン、リンク、チェックボックス、ラジオボタン等）のタッチターゲットは 44x44px 以上を確保すること（WCAG 2.2 Level AA, Success Criterion 2.5.8）。
- 十分な間隔: 隣接するタッチターゲット間には誤タップを防止するための十分な間隔を設けること。
- インラインリンクの例外: 文中のテキストリンクはこの制約の例外とするが、可能な限り操作しやすいサイズを確保する。
AC-009: フォームアクセシビリティ
年始調整の中核であるフォーム入力を、すべてのユーザーがストレスなく完了できるようにする。
- ラベル関連付け: すべてのフォームコントロールに
<label>を関連付ける（for/idまたは入れ子構造）。プレースホルダーテキストをラベルの代替としない。 - エラー通知: バリデーションエラー発生時、エラーメッセージを該当フィールドに隣接して表示し、
aria-describedbyで関連付ける。エラーサマリーをフォーム上部にも表示し、フォーカスを移動させる。 - 入力支援: 適切な
type属性（email,tel,number等）とautocomplete属性を設定し、ブラウザやスクリーンリーダーの入力支援機能を活用する。日付・金額・収入所得変換にはネイティブ入力型を使用せず、Roselliパターンのカスタム入力コンポーネントを使用する。 - ドメイン特化入力の確認表示: 日付・金額・収入所得変換の各入力フィールドには
<output>要素による確認表示を提供する。<output>はネイティブライブリージョン（role="status"）として機能し、スクリーンリーダーが入力値の解釈結果を自動読み上げする。確認表示にはコンテキストに応じた付加情報を含める（生年月日: 満年齢、金額: 閾値との関係、収入: 所得への変換結果）。 - 必須フィールドの明示: 必須項目は
required属性と視覚的なマーク（*等）の両方で明示する。aria-required="true"も併用する。 - グループ化: 関連するフォームコントロール（ラジオボタングループ等）は
<fieldset>と<legend>でグループ化し、文脈を明確にする。