responsive-accessibility

レスポンシブなアクセシビリティ

レスポンシブデザインは画面サイズだけの問題ではありません。あらゆるビューポート、ズーム倍率、画面の向きでアクセシビリティを確保することが重要です。 1440pxでは問題なくても、200％のズームで崩れるレイアウトは、特にズームを必要とするユーザーにとって機能していません。

主な要件

200％のズーム時のテキストのリフロー

• 200％のズーム時には、すべてのコンテンツを横スクロールなしで1列にリフローする必要があります
• これは WCAG 2.1 レベル AA（達成基準 1.4.10）です
• ブラウザーのズームを200％、ビューポートを1280pxに設定してテストします。 横スクロールなしで問題なく使えることを確認してください
• 例外：データテーブル、地図、図は、情報が失われない場合に限り、 横スクロールを許可できます

テキストの200％拡大

• すべてのテキストは200％に拡大しても読みやすさを保つ必要があります
• テキストが切れたり、省略されたり、ほかの要素と重なったりしてはいけません
• テキストには固定ピクセルではなく、相対単位（rem、em、%）を使用します
• 行の高さと間隔も比例して拡大するようにします

画面の向きの自由

• コンテンツは縦向きと横向きのどちらでも機能する必要があります
• 機能上不可欠な場合を除き、画面の向きを固定してはいけません （ピアノアプリでは横向きが必要な場合がありますが、フォームでは必要ありません）
• 物理的な設置環境により、デバイスを固定の向きで取り付けるユーザーもいます。 画面の向きを固定すると、アクセスを完全に妨げる場合があります

デザインパターン

流動的なレイアウト

• 固定のブレークポイントで切り替えるのではなく、柔軟に適応するグリッドを使用します
• コンテンツコンテナーに読みやすさを保つ最大幅を設定します （1行あたり45～75文字）
• コンテンツがリフローする前に、余白が縮小するようにします
• 横スクロールを強制する固定幅の要素は避けます

コンテンツの優先順位

• 各ブレークポイントで必須となる要素を定義します
• 小さな画面では、中心となるコンテンツを表示し、残りにもアクセスできるようにします
• 重要な機能を「デスクトップ専用」の機能の背後に隠さないでください
• ナビゲーションは適応させます（ハンバーガーメニューでも問題ありません）が、 すべての移動先にアクセスできる必要があります

タッチ操作とポインターへの適応

• 小さなビューポートでは、タッチターゲットを最低48pxにします
• 大きなビューポートでは、ポインター操作に適したサイズでもかまいません （最低24px）
• タッチ操作を優先したサイズ設定には、@media (pointer: coarse) でポインターの種類を検出します
• タッチデバイスでは、ターゲット間の間隔を広げます

ズームに対応したパターン

• ズーム時に固定ヘッダーが縦方向のスペースを使いすぎないようにします （200％のズーム時にビューポートの30％を占めるヘッダーは障壁になります）
• 固定位置の要素は200％のズーム時にテストする必要があります
• ツールチップやポップオーバーは、ズーム時にも表示され、アクセスできる必要があります
• モーダルダイアログ内のコンテンツがズーム時のビューポートを超える場合は、スクロールできるようにします

テスト手順

1. ビューポートを1280pxにして、ブラウザーのズームを100％、150％、200％でテストします
2. ビューポート幅320px（モバイル相当）でテストします
3. 縦向きと横向きの両方でテストします
4. システムのフォントサイズを最大に設定してテストします
5. 各テストで、横スクロールがないこと、テキストが切れていないこと、 要素が重なっていないこと、すべての操作が機能することを確認します

評価チェックリスト

• 200％のズーム時に、横スクロールなしでコンテンツがリフローする
• テキストは200％に拡大しても読みやすい
• 縦向きと横向きの両方に対応している
• 小さなビューポートではタッチターゲットが大きくなる
• ズーム時に固定／固定位置の要素がビューポートを占有しすぎない
• 対応するどのビューポートサイズでも機能が失われない
• すべてのテキストに相対単位を使用している