responsive-review

レスポンシブ対応のアクセシビリティレビュー

実際のユーザーが利用する幅広い画面サイズ、ズーム倍率、画面の向きで、インターフェースのアクセシビリティが維持されるかをテストします。

プロセス

ステップ 1：ビューポートのテスト

以下のビューポート幅でインターフェースをテストします。

• 320px（小型モバイル）
• 375px（標準的なモバイル）
• 768px（タブレット）
• 1024px（小型デスクトップ／横向きタブレット）
• 1280px（標準的なデスクトップ）
• 1440px 以上（大型デスクトップ）

各ビューポートで、responsive-accessibility を使用して以下を記録します。

• コンテンツのはみ出しや非表示
• 到達できないインタラクティブ要素
• タッチ操作が可能なビューポートで 44×44px 未満のタッチターゲット
• 画面サイズに応じて変化しないナビゲーション
• 完全に表示されなくなる機能

ステップ 2：ズームのテスト

ビューポートを 1280px に設定し、以下の倍率でテストします。

• 100%（基準）
• 150%（ロービジョンユーザーがよく使う倍率）
• 200%（WCAG の要件）

以下を記録します。

• 発生する横スクロール
• コンテナーからはみ出すテキスト
• 要素の重なり
• 過剰なスペースを占める固定ヘッダー
• 画面からはみ出すモーダルやツールチップ

ステップ 3：タイポグラフィの拡大

flexible-typography を使用し、システムのフォントサイズを最大にしてテストします。 以下を記録します。

• 拡大されないテキスト
• テキストが切り取られる、または省略されるコンテナー
• テキストの拡大によって崩れるレイアウト
• 高さが固定され、拡大しない要素

ステップ 4：画面の向きのテスト

縦向きと横向きの両方でテストします。以下を記録します。

• どちらか一方の向きでしか機能しないコンテンツ
• 画面の回転を妨げる向きのロック
• どちらか一方の向きで崩れる、または余分なスペースが生じるレイアウト

ステップ 5：情報密度の確認

information-density を使用し、各ビューポートで以下を確認します。

• デフォルトの密度はデバイスに適していますか？
• ユーザーは密度を調整できますか？
• コンパクトな密度でも、タッチターゲットの最小サイズが維持されていますか？
• ゆとりのある密度でも、過剰なスクロールが発生しませんか？

出力

レスポンシブ対応のアクセシビリティレポートを作成します。

1. ビューポートの一覧表 — 各ビューポート幅での主要タスクの合否
2. ズームの結果 — 150% と 200% での問題
3. タイポグラフィの結果 — テキスト拡大に関する不具合
4. 画面の向きの結果 — 縦向き／横向きでの問題
5. 修正リスト — 重大度順に並べ、以下のグループに分類：
   • すべてのビューポートに影響する修正
   • モバイル固有の修正
   • ズーム固有の修正