# 観点表: 視覚的な確認とマウスポインタによる操作

画面を見ながら、マウスポインタを中心とした操作を行って確認する観点。

---

### VIS-01: 収録済み動画のキャプション

- WCAG: SC 1.2.2 (A)
- 確認手段: `both`
- 判定: 収録済みの動画に、音声なしで内容が理解できるキャプションが提供されていること。
  キャプションには、映像に映る人物の発話だけでなく、ナレーション、効果音、音楽など、
  内容の理解に必要なものが含まれていること。
- `code` からの判定: `<video>` に `<track kind="captions">` があるか。動画プレイヤー
  ライブラリを使っている場合は字幕トラックの指定があるか。YouTube 等の埋め込みの場合は
  埋め込み元に字幕があるかを実ページで確認する必要がある。
- `page` からの判定: 実際に再生し、キャプションの有無と内容の充分さを確認する。
- 判定不能になりやすい点: キャプションの内容が充分かどうかは、動画を視聴して判断する必要が
  あり、自動では判定できない。トラックの有無までを確認し、内容の妥当性は「要追加確認」とする。
- 重篤度の目安: 動画が主要なコンテンツであったり、動画を視聴しなければ理解できないものであるなら Major。
  動画が補足的であったり、代替コンテンツが提供されているなら Normal。
  キャプションが YouTube 等の自動生成によるもののみであるなら Minor。

### VIS-02: 収録済み動画の代替（テキストまたは音声）

- WCAG: SC 1.2.3 (A)
- 確認手段: `both`
- 判定: 収録済みの動画の内容が、映像なしで理解できるよう、テキストまたは音声で解説されて
  いること。
- `code` からの判定: 動画の近傍に書き起こしテキストへのリンクや、内容を説明するテキストが
  あるかを確認する。
- 重篤度の目安: VIS-01 に準ずる。

### VIS-03: 収録済み動画の音声解説

- WCAG: SC 1.2.5 (AA)
- 確認手段: `both`
- 判定: 収録済みの動画の内容が、映像なしで理解できるよう、音声で解説されていること。
- `code` からの判定: `<track kind="descriptions">` や、音声解説付きの代替動画の提供を探す。
- 重篤度の目安: VIS-01 に準ずる。

### VIS-04: ライブ動画のキャプション

- WCAG: SC 1.2.4 (AA)
- 確認手段: `both`
- 判定: ライブ配信される動画に、音声なしで内容が理解できるキャプションが提供されていること。
- 重篤度の目安: VIS-01 に準ずる。

### VIS-05: 表示の向き

- WCAG: SC 1.3.4 (AA)
- 確認手段: `both`
- 判定: ディスプレイの向きを縦向き・横向きのいずれかに制限していないこと。
  - 端末を縦向き・横向きのどちらに持っても画面が回転し、向きを変えることを強制する
    メッセージが表示されない
  - 利用者環境として想定される解像度（たとえば iPhone SE 第2〜3世代の 375×667px）で、
    縦向き・横向きそれぞれの表示に崩れや、操作が困難なほどの狭さがない
- `code` からの判定: CSS の `@media (orientation: ...)` によるコンテンツの出し分けや
  非表示化、Web App Manifest の `orientation` 指定、画面回転を促すオーバーレイの実装を探す。
- `page` からの判定: 375×667 と 667×375 の両方で表示を確認する。
- 重篤度の目安: 一方の向きで利用できないなら Major。

### VIS-06: 色のみによる情報伝達

- WCAG: SC 1.3.1 (A) / SC 1.4.1 (A)
- 確認手段: `both`
- 判定: 情報の伝達、動作の指示、反応の提示、視覚的な要素の判別を、色のみに依存して行って
  いないこと。テキストや形状による差が併せて提供されていること。
- `code` からの判定: 状態によって色だけが変わる実装（`className={isError ? 'text-red' :
  'text-gray'}` のような、色以外に差がないもの）、凡例が色だけのグラフ、必須項目を赤字だけで
  示すフォームを探す。
- `page` からの判定: グレースケールでスクリーンショットを見比べる、または色以外の手がかりが
  あるかを目視する。
- よくある問題: エラーが赤枠だけで示される。グラフの凡例が色のみ。リンクが色だけで
  本文と区別されている（下線がない）。
- 重篤度の目安: 状態やエラーが識別できないなら Major。装飾的な区別なら Normal。

### VIS-07: 感覚的な特性

- WCAG: SC 1.3.3 (A)
- 確認手段: `both`
- 判定: コンテンツを理解し操作するための説明が、形、色、大きさ、視覚的な位置、方向、音と
  いった感覚的な特性のみに依存していないこと。
- よくある問題: 「右のボタンを押してください」「丸いアイコンをクリック」「下記の緑の欄に
  入力」。位置や色に加えて、ラベル名など他の手がかりを併記する。
- 重篤度の目安: 操作方法がわからなくなるなら Major。それ以外は Normal。

### VIS-08: 音声の自動再生

- WCAG: SC 1.4.2 (A)
- 確認手段: `both`
- 判定: 音声が自動的に再生されて3秒以上続く場合、音声を停止できるか、システム全体の
  音量とは独立して音量を調整できること。
- `code` からの判定: `<audio autoplay>` `<video autoplay>`（`muted` でないもの）、
  JavaScript による `play()` の自動呼び出しを探す。
- 重篤度の目安: スクリーンリーダー利用者は読み上げが聞き取れなくなるため Major。

### VIS-09: テキストのコントラスト比

- WCAG: SC 1.4.3 (AA)
- 確認手段: `both`
- 判定: テキストおよび文字画像に、4.5:1 以上のコントラスト比があること。大きなテキスト
  （18pt 以上、または 14pt 以上の太字。日本語では概ね 24px 以上、または 18.66px 以上の太字）
  は 3:1 以上。
- `code` からの判定: 前景色と背景色が静的に決まる箇所（Tailwind のクラス、CSS 変数、
  デザイントークン、styled-components のリテラル）について色を解決し、コントラスト比を
  **計算して**判定する。目視や暗算で判断してはならない。色が実行時に決まる箇所は「判定不能」
  として実ページでの確認に回す。
- `page` からの判定: axe-core が大部分を検出する。axe-core が `incomplete` を返した箇所
  （背景が画像・グラデーション、重なりがある場合など）と、テキストが画像化されている箇所は
  手作業で確認する。
- 背景が画像やグラデーションの場合は、その中で最も明るい色・最も暗い色と文字色との
  コントラスト比を検討する。
- 設計書でテキスト色と背景色の組み合わせが限定されている場合は、利用可能な組み合わせを
  あらかじめ定義しておき、例外的な色が使われる箇所のみを検査すればよい。
- 重篤度の目安: 本文や重要な情報が読めないなら Major。補足的な文言なら Normal。

### VIS-10: 非テキストのコントラスト比

- WCAG: SC 1.4.11 (AA)
- 確認手段: `both`
- 判定: ユーザーインターフェースコンポーネント（入力欄の枠線、ボタン、チェックボックス、
  フォーカスインジケーターなど）と、コンテンツの理解に必要なグラフィカルオブジェクト
  （アイコン、グラフの要素など）は、それらを識別するのに必要な部分が隣接する色との間に
  3:1 以上のコントラスト比を持つこと。
- `code` からの判定: 入力欄の `border` 色、アイコンの `fill` / `color`、フォーカスリングの
  色を背景色に対して計算する。
- よくある問題: 入力欄の枠線が薄いグレーで背景と 3:1 未満。プレースホルダーのみで
  枠線がない入力欄。薄い色のアイコン。
- 重篤度の目安: 入力欄やボタンの存在が認識できないなら Major。

### VIS-11: 追加コンテンツ（ホバー）を消去できる

- WCAG: SC 1.4.13 (AA)
- 確認手段: `both`
- 判定: マウスオーバーによってツールチップ等の追加コンテンツが表示される場合、
  マウスポインタを動かさずにそれを非表示にできること（`Esc` キーなど）。
  ただし、入力エラーを伝えるものや、他のコンテンツを隠したり置換したりしない場合は対象外。
- `code` からの判定: ツールチップ/ポップオーバーの実装に `Esc` キーによる非表示の
  ハンドラがあるかを確認する。
- `page` からの判定: ホバーで表示させ、ポインタを動かさずに `Esc` を押して消えるかを見る。
- 重篤度の目安: 他のコンテンツが隠され続けるなら Major。それ以外は Normal。

### VIS-12: 追加コンテンツ（ホバー）にポインタを移動できる

- WCAG: SC 1.4.13 (AA)
- 確認手段: `both`
- 判定: マウスオーバーで表示された追加コンテンツの上にマウスポインタを移動でき、
  その間も追加コンテンツが表示され続けること。
- よくある問題: トリガー要素と表示されたコンテンツの間に隙間があり、ポインタを移動する
  途中でコンテンツが消える。拡大表示している利用者は、この移動ができないと内容を読めない。
- 重篤度の目安: 内容を読めないなら Major。

### VIS-13: 追加コンテンツ（ホバー）が持続する

- WCAG: SC 1.4.13 (AA)
- 確認手段: `both`
- 判定: 追加コンテンツは、ホバーが解除されるか、利用者の意図によって非表示にされるか、
  内容が無効になるような変化が起きるまで表示され続けること。
- よくある問題: 数秒で自動的に消えるツールチップ。読み終える前に消えてしまう。
- 重篤度の目安: 内容を読み切れないなら Normal。重要な情報なら Major。

### VIS-14: 動き・点滅・スクロールの停止

- WCAG: SC 2.2.2 (A)
- 確認手段: `both`
- 判定: 動きのある、点滅している、スクロールするコンテンツは、利用者が一時停止、停止、
  または非表示にできること（自動的に開始して5秒以上続き、他のコンテンツと並行して
  表示されるものが対象）。
- `code` からの判定: 自動再生カルーセル、マーキー、アニメーション GIF、無限ループする
  CSS アニメーションを探し、停止操作の実装があるかを確認する。
  `prefers-reduced-motion` への対応も併せて確認する（これは SC 2.2.2 の要件そのものでは
  ないが、対応していることが望ましい）。
- 重篤度の目安: 集中を妨げ内容を読めなくなるため、原則 Major。

### VIS-15: 自動更新の停止

- WCAG: SC 2.2.2 (A)
- 確認手段: `both`
- 判定: 自動的に更新され、他のコンテンツと並行して表示されるものは、利用者が一時停止、
  停止、非表示にできるか、更新頻度を調整できること。
- `code` からの判定: ポーリングによる自動更新、自動リロード、リアルタイム更新される
  フィードを探す。
- よくある問題: 一覧が自動更新され、読んでいる位置や操作対象がずれる。
- 重篤度の目安: 操作対象がずれて誤操作を誘発するなら Major。

### VIS-16: 閃光

- WCAG: SC 2.3.1 (A)
- 確認手段: `page`（実質的に `判定不能` になることが多い）
- 判定: 1秒間に3回を超える閃光を放つものがないこと。
- 補足: WCAG SC 2.3.1 では、1秒間に3回を超える閃光があっても「一般閃光閾値および
  赤色閃光閾値を下回っている」なら適合と読み取れるが、この判定は難しい。通常のチェックでは
  この例外は考慮せず、3回を超える閃光があれば問題として扱う。閃光を放つものを扱うときにのみ、
  閾値について検討する。
- 自動での判定はできない。閃光を含むコンテンツがある場合は「要追加確認」とする。
- 重篤度の目安: 光感受性発作を誘発しうるため Critical。

### VIS-17: ページタイトル

- WCAG: SC 2.4.2 (A)
- 確認手段: `both`
- 判定: そのページに固有の部分に基づいたページタイトルが指定されていること。
  - `<title>` 要素または `document.title` で指定する
  - ページタイトルは見出しではないが、そのページ固有の部分の冒頭にある見出しと共通の文言を
    含み、何の Web サイト内のページであるのかが明確になっていることが望ましい
  - 何の Web サイト内のページであるのかの表現方法は、サイト内の各ページで共通であること
- `code` からの判定: `<title>` の指定、SPA では遷移時に `document.title` が更新されるか
  （ルーティング後に更新されないままになる実装が多い）を確認する。
- よくある問題: 全ページが同じタイトル。SPA で遷移してもタイトルが変わらない。
  テンプレートの初期値（"React App" など）が残っている。
- 重篤度の目安: 複数タブを開いた利用者やスクリーンリーダー利用者が現在地を識別できないため
  Normal。全ページ同一で識別不能なら Major。

### VIS-18: リンクの目的

- WCAG: SC 2.4.4 (A)
- 確認手段: `both`
- 判定: リンクのテキスト単体、またはリストやテーブルや見出しといった構造によるコンテキスト
  から、リンクの目的が推測できること。
  - 「○○はこちら」の「こちら」だけをリンクにしてはならない。目的をテキストとして記載できる
    場合はそれを記載し、その全体をリンクとする
  - リストの各項目やテーブルの各行・各列に、同じテキストで目的の違うリンクがある場合、
    その項目や行・列に関連する目的の違いであれば、目的は推測できるものとみなす
  - 同じテキストのリンクが別々の見出しで区切られた領域にある場合、見出しに関係する目的の
    違いであれば、目的は推測できるものとみなす
- `code` からの判定: 「こちら」「詳細」「もっと見る」「クリック」「Read more」といった
  テキストのリンク、テキストを持たないアイコンのみのリンクを探す。後者は
  アクセシブルネームの有無（SEM-01, SEM-11）も併せて確認する。
- 重篤度の目安: リンク先が判断できないため Normal。主要な導線なら Major。

### VIS-19: 複数の到達手段

- WCAG: SC 2.4.5 (AA)
- 確認手段: `both`
- 判定: Web サイト内のページは、特定の手順によってのみ表示せざるを得ない場合（処理途中の
  ステップやその結果など）を除いて、以下のいずれかによって到達できること。
  - 「トップ画面」に戻ることなく、どのページからも辿りつける
  - サイト内検索機能から辿りつける
  - サイトマップのようなページから辿りつける
- なるべく多数の経路で辿りつけることが望ましい。
- 重篤度の目安: 目的のページに到達できないなら Major。経路が少ないだけなら Minor。

### VIS-20: 見出しおよびラベル

- WCAG: SC 2.4.6 (AA)
- 確認手段: `both`
- 判定: 見出しやラベルの内容が、それが指し示す部分の主題や目的を適切に反映していること。
- `code` からの判定: 見出しやラベルの文言と、その配下の内容が対応しているかを読んで確認する。
- よくある問題: 「情報」「その他」のような内容を示さない見出し。入力欄のラベルが実際に
  求めている内容と食い違う。
- 重篤度の目安: 内容を誤解させるなら Major。曖昧なだけなら Minor。

### VIS-21: ポインタジェスチャ

- WCAG: SC 2.5.1 (A)
- 確認手段: `both`
- 判定: マルチポインタ（複数指の使用など）によるジェスチャーや、軌跡ベースのジェスチャー
  （スワイプ、ドラッグでの描画など）に依存する機能は、それが必要不可欠な場合を除いて、
  単一のポインタによる軌跡なしの操作でも実行できる代替手段があること。
- `code` からの判定: `touchmove`、ピンチズーム、スワイプ検出ライブラリの使用を探し、
  同等の機能を持つボタン等が併設されているかを確認する。
- よくある問題: カルーセルがスワイプでしか送れない。ピンチでしか拡大できない。
- 重篤度の目安: 代替手段がなく機能を使えないなら Major。

### VIS-22: ポインタのキャンセル（ダウンイベント）

- WCAG: SC 2.5.2 (A)
- 確認手段: `both`
- 判定: 単一のポインタで操作される機能について、以下のいずれかを満たすこと。
  - ダウンイベント（タッチ開始、マウスボタンの押下）で機能が実行されない
  - ダウンイベントで実行された機能を元に戻せる
  - アップイベントでダウンイベントの結果が反転する
  - ダウンイベントでの実行が必要不可欠である
- `code` からの判定: **`click` イベントではなく `mousedown` / `touchstart` / `pointerdown`
  で機能を実行している箇所**を探す。これがこの観点の典型的な原因である。
- 補足: 通常のボタンは、要素内でのダウンとアップの組み合わせで `click` が発火する。
  要素内でボタンを押したまま領域外へポインタを移動して離せば、`click` は発火せず機能も
  実行されない。誤って押し込んでも、領域外へ移動することでキャンセルできる。
  アップイベントによる反転とは、押している間だけヒント等が表示され、離すと消えるような
  ものを指す。
- よくある問題: 広告バナー等で、ひとつの対象をスワイプもクリックもできるようにしようとして、
  キャンセルできない「誤タップ」を誘発する実装になっている。
- 重篤度の目安: 誤操作が取り消せない、かつ結果が重大（削除・送信・課金）なら Critical。
  それ以外は Normal。

### VIS-23: ドラッグ動作

- WCAG: SC 2.5.7 (AA)
- 確認手段: `both`
- 判定: ドラッグ操作を用いる機能は、それが必要不可欠な場合を除いて、ドラッグを伴わない
  単一ポインタの操作でも完遂できること。
- `code` からの判定: HTML5 Drag and Drop API、`draggable` 属性、ドラッグ用ライブラリ
  （dnd-kit、react-beautiful-dnd、Sortable など）、`mousemove` による位置操作を探し、
  同等の操作ができるボタンやメニューが併設されているかを確認する。
- よくある問題: 並べ替えがドラッグ＆ドロップのみ。スライダーがドラッグのみで矢印キーや
  数値入力に対応していない。
- 重篤度の目安: 代替手段がなく機能を使えないなら Major。

### VIS-24: ターゲットサイズ（最小）

- WCAG: SC 2.5.8 (AA)
- 確認手段: `both`
- 判定: ポインタ操作のターゲットは 24×24 CSS ピクセル以上であるか、以下の例外のいずれかを
  満たすこと。
  - 間隔: 24 CSS ピクセル未満の小さなターゲットについて、それぞれの境界ボックスの中心に
    直径 24 CSS ピクセルの円があるとしたとき、その円が別のターゲット、または別の小さな
    ターゲットの円と重ならない
  - 同等: その機能が、この基準を満たす同一ページ上の別のコントロールでも達成できる
  - インライン: ターゲットが文中に存在する、またはそのサイズがターゲット以外のテキストに
    対する行の高さによって制約されている
  - ユーザーエージェントによる制御: サイズがユーザーエージェントによって決定され、
    コンテンツ制作者が変更していない
  - 必要不可欠: そのターゲットを特定の方法で提示することが必要不可欠であるか、
    伝達される情報に対して法的に要求されている
- `code` からの判定: アイコンボタンやクローズボタンに指定された固定サイズ（`w-4 h-4`、
  `width: 16px` など）を探す。ただし padding やヒットエリア拡張の有無で結論が変わるため、
  疑わしい箇所を挙げて実ページでの実測に回すのがよい。
- 補足: 文中のリンクテキストや、ブラウザのデフォルトスタイルのチェックボックスは例外に
  該当し対象外となる。Accessibility Visualizer には、これらの例外に近似したターゲットへ
  警告する機能がある。
- 重篤度の目安: 手の震えがある利用者が操作を誤るため Normal。誤操作の結果が重大なら Major。

### VIS-25: 一貫したナビゲーション

- WCAG: SC 3.2.3 (AA)
- 確認手段: `both`
- 判定: Web サイト内の複数のページで表示されるナビゲーションが、すべてのページで同じ順序で
  並んでいること。項目の増減は許容されるが、相対的な順序が変わってはならない。
- 重篤度の目安: 目的の項目を探し直す必要が生じるため Normal。

### VIS-26: 一貫した識別性

- WCAG: SC 3.2.4 (AA)
- 確認手段: `both`
- 判定: Web サイト内で使用されるアイコンや UI コンポーネントは、一貫して同じ意味であれば
  同じ見た目やテキストが与えられていること。
- よくある問題: 同じ「保存」の機能が、ページによって「保存」「登録」「更新」と異なる
  ラベルになっている。同じ機能に異なるアイコンが使われている。
- 重篤度の目安: 別の機能だと誤解されるなら Normal。

### VIS-27: 一貫したヘルプ

- WCAG: SC 3.2.6 (A)
- 確認手段: `both`
- 判定: Web サイト内の複数のページで、問い合わせ先・問い合わせ方法（メールフォーム、
  電話番号、チャットなど）、ヘルプ、チャットボット等が提供される場合、それらがどのページでも
  一貫して同じ順序（相対的な位置）で出現すること。
- 重篤度の目安: Normal。

### VIS-28: 入力エラーの特定

- WCAG: SC 3.3.1 (A)
- 確認手段: `both`
- 判定: 入力エラーが自動的に検出された場合、エラーが発生している箇所が特定でき、
  エラーの内容がテキストで利用者に説明されること。
- `code` からの判定: バリデーションエラーの表示実装を確認する。エラーメッセージが対象の
  入力欄と関連付けられているか（`aria-describedby`、`aria-invalid`）は SEM-11 と併せて見る。
  色や枠線の変化のみでエラーを示していないか（VIS-06）も確認する。
- `page` からの判定: 実際に不正な値を入力して送信し、エラー表示を確認する。
- 重篤度の目安: エラー箇所や理由がわからずフォームを完了できないなら Major。

### VIS-29: ラベルまたは説明

- WCAG: SC 3.3.2 (A)
- 確認手段: `both`
- 判定: 入力欄には、目的を示すラベルのほか、必要に応じて充分な説明が付けられていること。
  たとえば入力フォーマットの指定がある場合には、ラベルに括弧書きするか、書き方を説明する
  文を添える。必須項目であることも明示する。
- `code` からの判定: 入力形式の制約（`pattern`、文字数制限、バリデーションロジック）が
  あるのに、その説明が表示されていない入力欄を探す。プレースホルダーのみで説明している
  箇所も問題（入力を始めると消えるため）。
- 重篤度の目安: 入力を完了できないなら Major。試行錯誤が必要なだけなら Normal。

### VIS-30: エラー修正の提案

- WCAG: SC 3.3.3 (AA)
- 確認手段: `both`
- 判定: 入力エラーが検出され、修正方法を提案できる場合には、利用者に修正内容を提案すること
  （セキュリティや目的を損なう場合を除く）。
- よくある問題: 「入力内容に誤りがあります」だけで、何をどう直せばよいかわからない。
- 重篤度の目安: 修正方法がわからずフォームを完了できないなら Major。それ以外は Normal。

### VIS-31: エラー回避（法的、金融、データ）

- WCAG: SC 3.3.4 (AA)
- 確認手段: `both`
- 判定: 法律行為や金融取引、利用者が制御可能なデータの変更や削除、試験の解答の送信などを
  行うページでは、以下のいずれか1つ以上が提供されていること。
  - 送信を取り消しできる
  - 送信前に入力エラーがチェックされ、修正の機会が提供される
  - 送信前に内容を確認し、修正し、確定できる仕組みがある
- `page` からの判定: この確認は実際に送信しないと判定できないことがある。
  **実行前に必ず利用者の許可を取る**（`auth-and-safety.md` を参照）。許可が得られない場合は
  「判定不能」として「要追加確認」に記載する。
- 重篤度の目安: 誤った送信や削除を取り消せないなら Critical。

### VIS-32: 冗長な入力

- WCAG: SC 3.3.7 (A)
- 確認手段: `both`
- 判定: 同一の操作プロセス内で、利用者が以前に入力した情報や、利用者に対して提供された情報を
  再度入力させる場合、自動的に入力されるか、利用者が過去のものを選択できること
  （再入力が必要不可欠な場合、セキュリティ上必要な場合、以前の情報が有効でなくなった場合を除く）。
- よくある問題: 複数ステップのフォームで、前のステップで入力した住所を再入力させる。
  確認画面から戻ると入力内容が消える。
- 重篤度の目安: 記憶や入力の負担が大きく完了できないなら Major。それ以外は Normal。