Product design skills

references/report-format.md

A supporting file of the a11y-check-code skill.

レポートの形式

チェック結果は Markdown ファイルとして出力し、会話には要約のみを出す。

出力先

./a11y-report/YYYY-MM-DD-<対象名>.md
  • <対象名> は、ソースコード対象ならコンポーネント名やディレクトリ名、実ページ対象なら パス由来の識別しやすい名前にする(例: 2026-07-20-checkout-form.md2026-07-20-settings-notifications.md)。
  • 同名のファイルが既に存在する場合は、上書きせずに連番を付ける。
  • a11y-report/ ディレクトリがなければ作成する。実ページ対象のチェックでスクリーンショットを 保存する場合は a11y-report/assets/ に置き、レポートから相対パスで参照する。

会話への出力

会話には以下のみを出す。全指摘を会話に列挙してはならない(長くなり、かえって読まれない)。

  • レポートファイルのパス
  • 重篤度別の件数
  • Critical と Major の指摘のタイトルの一覧
  • 「要追加確認」の件数と、特に重要なもの
  • 実施できなかった手順があればその旨

レポートの構成

# アクセシビリティチェック結果: <対象>

## 対象と実施内容

- 対象: <URL、またはファイルパスの一覧>
- 実施日: <YYYY-MM-DD>
- 実施方法: <a11y-check-code / a11y-check-page、使用したツールとバージョン>
- 確認した画面・状態: <列挙。モーダル開閉やエラー表示など状態ごとに>

### 実施した手順

<チェックした観点の範囲>

### 実施しなかった手順

<なぜ実施しなかったかの理由とともに列挙する。以下は必ず該当を明記する>

- スクリーンリーダー実機による確認: 実施していない
- ハイコントラストモードでの確認: 実施していない
- <対象の性質上、実施できなかったもの>

## サマリ

| 重篤度 | 件数 |
| --- | --- |
| Critical | 0 |
| Major | 0 |
| Normal | 0 |
| Minor | 0 |

要追加確認: 0 件

## 指摘事項

### [Major] A-001 モーダルダイアログを Esc キーで閉じられない

- **観点**: KBD-05(WCAG SC 2.1.2 レベル A)
- **該当箇所**: `src/components/SettingsDialog.tsx:48` / `dialog.settings-modal`
- **原因フェーズ**: 実装
- **利用者に生じる問題**:
  キーボードのみを使う利用者は、ダイアログを開いた後に閉じる手段がない。閉じるボタンは
  ダイアログ内にあるが、フォーカスがダイアログ外へ抜けてしまうため到達できず、この画面から
  先に進めなくなる。
- **修正方法の提案**:
  <具体的な修正内容。コード例を添えられる場合は添える>
- **根拠**: 手動確認(キーボード操作)/ axe-core rule: <ルール ID>

<以降、重篤度の高い順に並べる>

## 要追加確認

この手段では判定できなかった観点。確認するには以下が必要である。

| 観点 | 内容 | 必要な確認手段 |
| --- | --- | --- |
| VIS-09 | ヒーロー画像上のテキストのコントラスト比 | 実ページでの実測 |
| SEM-01 | `hero.png` の代替テキストの内容の妥当性 | 製作者への確認 |

## 重篤度の定義

| 重篤度 | 定義 |
| --- | --- |
| Critical | その問題があることで、そのページの閲覧に留まらない問題を生じる |
| Major | その問題があることで、そのページの主要な目的を達成することができない |
| Normal | その問題があっても、そのページの主要な目的を達成することができる。ただし、利用者は不便を被る |
| Minor | その問題を解消することで、利用者はより快適にそのページを利用することができる |

重篤度の判定には、影響するユーザーの多さを考慮に入れていない。アクセシビリティの問題により
影響を受けるのは常にマイノリティであり、1人でも目的を達成できない状況になるのであれば
問題として扱っている。

## 確認した観点の一覧

<観点 ID ごとに 問題あり / 問題なし / 判定不能 / 対象なし を記録した表>

| 観点 | 結果 | 備考 |
| --- | --- | --- |
| SEM-01 | 問題あり | A-003, A-007 |
| SEM-02 | 問題なし | |
| SEM-05 | 対象なし | 個人情報を入力する欄がない |
| VIS-09 | 判定不能 | 色が実行時に決まるため実ページでの確認が必要 |

## このチェックについて

このチェックの目的は、アクセシビリティに関して優先的に対処するべき問題を発見することにある。
このチェックは完全なものではない。

- このチェックを行ったからといって、WCAG 2.2 のいずれの基準に準拠していることを
  確認・保証するものではない
- このチェックで問題がなかったからといって、まったく問題がないということにはならない
- WCAG 2.2 や ISO/IEC 40500、JIS X 8341-3 などの基準への準拠を確認するには、
  達成基準ごとの確認が必要である

チェックの基準は WCAG 2.2 のレベル AA を目安としている。

なお、この結果には、アクセシビリティに留まらない一般的なユーザビリティの問題や、実害はない
ものの HTML や WAI-ARIA などの仕様やベストプラクティスに反するものも含まれる。前者は主に
設計での考慮不足、後者は主に実装上のミスや知識不足に起因する可能性が高い。

指摘の書き方

各指摘には、以下の4項目を必ず含める。

  1. 発見された問題の内容 — タイトルと該当箇所で示す
  2. 問題の重篤度severity.md の手順で判定する
  3. ユーザー側に発生する問題の具体例 — 「スクリーンリーダーのユーザーは、この要素が ボタンであることを知覚できない」のように、誰が、何をできなくなるかを具体的に書く。 達成基準の文言を言い換えただけの説明にしてはならない
  4. 修正方法の提案 — 対象の目的に沿った修正を提案する。axe-core のドキュメントの提案を そのまま転記しない(筋の悪い解決方法も紹介されているため)

指摘 ID

A-001 のような連番を振る。レポート内で参照しやすくするためのものであり、レポートを またいで一意である必要はない。

まとめ方

  • 同じ原因による同種の問題が多数ある場合は、1つの指摘にまとめ、該当箇所を列挙する (「代替テキストのない画像が12箇所」)。ただし、重篤度が異なるものは分ける
  • 逆に、1箇所に複数の異なる問題がある場合は、観点ごとに分けて書く
  • 推測を断定として書かない。確認できていないことは「要追加確認」に回す

出力してはならないもの

  • ログイン情報、トークン、セッション ID、個人情報などの資格情報
  • 実在の利用者のデータ
  • 未確認の内容を確認済みであるかのように書いた記述

On this page