経費申請の作成
- 申請作成画面を表示する
- 金額欄を axe で検査する / スクリーンリーダーでフォーカスする
期待: 「金額」というラベルが関連付けられている
✗ 実際: ラベルは視覚表示のみで、関連付けがない(axe label 違反)
obs-amount-label
解答表
- 対象の課題アプリ
- https://x.a11y-training.app/x/mmiacdet3xhzd2kuytvayhahzq/
- 保持保証期限
- 2036-09-20
裁定の分類と研修の進め方は講評資料を、生成メタ情報や検証手段の内訳は講師向けページを参照してください。
観測箇所ごとに現状と改善案を並べて実際に操作できる改善案との比較も用意しています。
障壁の一覧
金額欄の可視ラベルがプログラム的に関連付けられていない amount-label-not-associated severity: medium
- 画面
- 経費申請の作成
- WCAG 達成基準（規範的注記）
- 1.3.1: 可視ラベルとフィールドの関係がプログラム的に決定できない失敗。 結果として金額欄に名前がない状態にもなるため 4.1.2 でも指摘できるが、 原因は「関係」の欠落なので 1.3.1 を主とする。axe(label)で検出可能。
- 影響
- 可視ラベル(label 要素)はあるが for/id の紐付けがなく、支援技術からは フィールド名として関連付けられない(catalog/faults.yaml notes)。
- 修正方針
- 申請フォームの金額欄で label 要素の for と input の id を一致させる (または label で input を包含する)。NumberInput コンポーネントが id を 受け取る設計なら、呼び出し側で渡すのが正しい修正箇所。
観測箇所
候補リストを矢印キーで操作できない combobox-no-keyboard severity: high
- 画面
- 経費申請の作成 / 承認待ち一覧
- WCAG 達成基準（規範的注記）
- 2.1.1: 候補の選択がポインタ操作でしか行えないため「キーボード」の失敗。 2.1.1 は機能単位で見るので、テキスト入力自体が可能でも候補選択が できなければ失敗と判定する。
- 影響
- 全 Combobox インスタンス(3画面)に影響し、マウス操作では問題が表面化しないため 自動チェックでも見逃されやすい(catalog/faults.yaml notes)。
- 修正方針
- Combobox コンポーネント側で ↑↓ による候補移動、Enter で確定、Esc で リストを閉じるキー操作を実装する(APG Combobox パターン)。修正は コンポーネント 1 箇所で行い、全インスタンスに反映させる。個々の画面で イベントハンドラを補うのは原因への修正ではない。
観測箇所
経費申請の作成
- 申請作成画面を開き、費目コンボボックスにフォーカスする
- ArrowDown を押す
期待: 候補リストが開き、最初の候補がアクティブになる
✗ 実際: 何も起こらない(マウスでは選択できる)
obs-cbx-kbd-category
承認待ち一覧
- 承認待ち一覧の費目フィルタにフォーカスする
- ArrowDown を押す
期待: 候補リストが開き、最初の候補がアクティブになる
✗ 実際: 何も起こらない
obs-cbx-kbd-filter
経費申請の作成
- 支払先に文字を入力し、候補が表示された状態にする
- ArrowDown を押す
期待: 候補リストの最初の候補がアクティブになる
✗ 実際: 候補に移動できない
obs-cbx-kbd-payee
ソート状態(aria-sort)が列ヘッダーに公開されない datatable-sort-state-missing severity: medium
- 画面
- 承認待ち一覧
- WCAG 達成基準（規範的注記）
- 4.1.2: ソート列と方向は列ヘッダーの「状態」であり aria-sort で公開されるべき。 型単位の欠陥だが、ソート可能モードは承認一覧のテーブルだけなので 観測できるのはその 1 画面。
- 影響
- ソート状態を示す矢印は視覚的に更新されるが、支援技術には現在の ソート列・方向が伝わらない(catalog/faults.yaml notes)。
- 修正方針
- DataTable のソート可能な列ヘッダー(th)に aria-sort を付与し、現在の ソート列は "ascending"/"descending"、それ以外の列は属性なし(または "none")にする。ヘッダー内のソートボタンにも「金額で並べ替え」のような アクセシブルネームを持たせる。
観測箇所
承認待ち一覧
- 承認待ち一覧を表示する
- 「金額」列ヘッダーでソートを切り替える
期待: ソート状態(昇順/降順)が支援技術に公開される
✗ 実際: 視覚的な矢印のみ変化し、状態が公開されない
obs-sort-state
キャンセルで閉じたときフォーカスがトリガーに戻らない dialog-no-focus-return severity: high
- 画面
- 申請詳細 / 自分の申請一覧
- WCAG 達成基準（規範的注記）
- 2.4.3: 閉じた後のフォーカス先がトリガーへ戻らず文書先頭などに落ちるため フォーカス順序が意味・操作性を損なう。確定で閉じる経路は spec 未定義 のため対象外で、キャンセル経路のみを失敗とする。
- 影響
- キャンセルでダイアログを閉じた際にフォーカスがトリガーへ戻らず、 キーボード利用者が操作の起点を見失う(catalog/faults.yaml notes)。
- 修正方針
- Dialog コンポーネントが開く時点でトリガー要素(document.activeElement)を 保持し、キャンセルで閉じるときにそこへフォーカスを戻す。閉じる契機 (Esc・キャンセルボタン・背景クリック)のすべてで同じ復帰処理を通す。 トリガーが DOM から消える場合の代替先も決めておく。
観測箇所
申請詳細
- 申請詳細で差し戻しダイアログを開く
- キャンセルで閉じる
期待: フォーカスが差し戻しボタンに戻る
✗ 実際: フォーカスが body に落ちる
obs-dlg-return-reason
自分の申請一覧
- 自分の申請一覧で、承認待ちの行のメニューから「取り下げ」を開く
- Esc(またはキャンセル)で閉じる
期待: フォーカスがメニューのトリガーに戻る(spec 5.5)
✗ 実際: フォーカスが body に落ちる
obs-dlg-return-withdraw
バリデーションエラー時にフォーカスがエラー要約へ移動しない error-summary-not-focused severity: medium
- 画面
- 経費申請の作成
- WCAG 達成基準（規範的注記）
- (該当する WCAG 達成基準なし。spec 違反として指摘する)
- 影響
- バリデーションエラー時にフォーカスがエラー要約へ移動しないため エラー発生に気づけない可能性がある。spec 6章(focusTarget: error-summary) への明確な違反だが、WCAG の特定達成基準の失敗とは言い切れないため wcag は空とし spec 違反として指摘する(catalog/faults.yaml notes)。
- 修正方針
- 送信時のバリデーション失敗後、エラー要約コンテナ(tabindex="-1")へ プログラム的にフォーカスを移動する。要約には見出しと各エラーへの リンクを置き、リンクから該当フィールドへ移動できるようにする。 spec 6 章の期待挙動に合わせる修正であり、WCAG 番号を根拠にしない。
観測箇所
経費申請の作成
- 必須項目を空のまま申請フォームを送信する
- エラー要約の表示直後のフォーカス位置を確認する
期待: フォーカスがエラー要約に移動する(spec 6章)
✗ 実際: フォーカスが送信ボタンに残る
obs-error-summary-focus
操作結果の通知が支援技術に読み上げられない notification-no-live-region severity: high
- 画面
- 全画面共通
- WCAG 達成基準（規範的注記）
- 4.1.3: 申請受付・承認完了・エラーなどの操作結果通知はフォーカスを移さずに 伝えるべきステータスメッセージの典型。notification-auto-dismiss とは同じ領域に対する別の欠陥(こちらは通知されない、あちらは消える)。
- 影響
- 操作結果の通知は視覚的には表示されるが読み上げられず、申請受付・承認完了・ エラー通知のすべてに影響する(blast-radius 最大級。catalog/faults.yaml notes)。
- 修正方針
- NotificationRegion のコンテナを初期表示時から DOM に置き、成功系は role="status"(polite)、エラー系は role="alert"(assertive)で公開する。 通知の表示は既存コンテナ内の内容更新で行う。通知ごとにコンテナを 生成・破棄する実装では読み上げが安定しない。
観測箇所
全画面共通
- 承認待ち一覧で任意の申請の承認を確定する
- 処理完了を待つ
期待: 承認完了の通知が読み上げられる
✗ 実際: 読み上げられない
obs-notify-approve
全画面共通
- 申請作成画面で有効な内容を入力する
- 送信し、申請一覧へ遷移する
期待: 「申請を受け付けました」が読み上げられる
✗ 実際: 視覚的には表示されるが、読み上げられない
obs-notify-submit
リセットCSSにより全要素のフォーカスインジケーターが消えている outline-none-global severity: high
- 画面
- 経費申請の作成 / 全画面共通
- WCAG 達成基準（規範的注記）
- 2.4.7: 全要素で outline: none が指定されフォーカス表示が一切ないため、 「フォーカスの可視化」の失敗。リセット CSS 起因で個別コンポーネントの 問題ではない。composed gate はプログラム的にフォーカスを検証するため この欠陥を検出しない。
- 影響
- 全要素のフォーカスインジケーターが消えており、キーボード操作時に どこにフォーカスがあるか視覚的に分からない(blast-radius 最大級。 catalog/faults.yaml notes)。
- 修正方針
- リセット CSS の `*:focus { outline: none }` を削除する。マウス操作時の 表示を抑えたいなら :focus-visible でスタイルを定義し、ブラウザ既定と 同等以上に視認できるインジケーターを用意する。コンポーネントごとに outline を戻す修正は取り残しを生む。
観測箇所
経費申請の作成
- 申請作成画面を表示する
- Tab でフォーム項目を移動する
期待: フォーカス位置が視覚的に分かる
✗ 実際: インジケーターが表示されない
obs-focus-visible-form
全画面共通
- 任意の画面を表示する
- Tab でグローバルナビゲーションを移動する
期待: フォーカス位置が視覚的に分かる
✗ 実際: フォーカスインジケーターが表示されない
obs-focus-visible-nav
申請ステータスが色のみで区別されている status-color-only severity: medium
- 画面
- 自分の申請一覧
- WCAG 達成基準（規範的注記）
- 1.4.1: ステータスの区別が色ドットだけで、テキストや形状の手がかりがない失敗。 ドットに aria-label が付いていても、色覚特性のある晴眼者には 伝わらないため 1.4.1 の失敗は残る。
- 影響
- 申請一覧にステータス列がなく、申請ID セル冒頭の色ドットのみで区別されて おり、色を識別できない利用者はステータスを判別できない (catalog/faults.yaml notes)。
- 修正方針
- 申請一覧にステータス列を設け、「承認待ち」「承認済み」等のテキストを 表示する(色ドットは補助として残してよい)。デザインカンプ段階の判断の 修正であり、ドットに aria-label を足すだけの対応では 1.4.1 の失敗が残る。
観測箇所
自分の申請一覧
- 各ステータスの申請が混在する自分の申請一覧を表示する
- 申請一覧でステータスの表示を確認する
期待: 色以外(テキスト等)でもステータスを区別できる
✗ 実際: ステータス列がなく、申請ID セル冒頭の色ドットのみで区別されている
obs-status-color
assurance statement(証明すること・しないこと)
証明すること
- 「金額欄の可視ラベルがプログラム的に関連付けられていない」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「候補リストを矢印キーで操作できない」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「ソート状態(aria-sort)が列ヘッダーに公開されない」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「キャンセルで閉じたときフォーカスがトリガーに戻らない」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「バリデーションエラー時にフォーカスがエラー要約へ移動しない」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「操作結果の通知が支援技術に読み上げられない」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「リセットCSSにより全要素のフォーカスインジケーターが消えている」は、記録された検証環境で宣言どおりの症状が観測できた。
- 「申請ステータスが色のみで区別されている」は、記録された検証環境で宣言どおりの症状が観測できた。
証明しないこと・既知の限界
- 全環境での再現は保証しない。
- 宣言していない問題の不存在は保証しない。
- WCAG 対応や severity の分類の正しさは保証しない。
- 選ばれていない fault に対応する限定された検査は実施していない(不存在の保証をしない)。実施の再検討は将来フェーズの課題とする。
- 検証環境
- OS Linux 6.18.36-cloudflare-firecracker-2026.6.17 (linux) / Chrome 151.0.7922.34 / Playwright 1.62.1 / locale ja-JP / zoom 100%
成果物ダウンロード
機械可読データ(JSON)
- artifacts/injection.json
- 仕込んだ障壁の機械可読リスト(fault と対象 slot)
- artifacts/provenance.json
- 生成来歴(seed・カタログ / ソースのリビジョン・生成器バージョン)
- artifacts/validation.json
- 検証結果(観測箇所ごとの判定と evidence)
- artifacts/normative.json
- WCAG 達成基準の規範的注記(影響・修正方針・severity)
- artifacts/training.json
- 研修進行ガイドと講評ポイントの機械可読データ
- artifacts/assurance.json
- assurance statement(証明すること・しないこと)の機械可読データ
観測箇所の testMethods 詳細は解答表 Markdown(answer-key.md)を参照してください。