テクニック G225:垂直にスクロールするページで 320 CSS ピクセルの幅に収まるように設計されている、水平にスクロールするセクションパネル
このテクニックについて
このテクニックは 1.4.10: リフロー (十分なテクニック) に関連する。
このテクニックは全ての技術に適用される。
解説
このテクニックの目的は、水平にスクロールするセクション内のテキストを利用者が拡大表示できるようにする一方で、各パネルの内容を読むために水平スクロールを必要としないことを保証することである。セクション全体ではパネル間をナビゲートするために水平スクロールが必要であるが、各パネルは 320 CSS ピクセルの固定幅に収まるように設計されている。これにより、320 CSS ピクセル幅のビューポートを使用して、カードがビューポート内にある場合でも、各カードの内容を読むために追加の水平スクロールを必要とせずに、カード全体が常に表示される。
事例
事例 1: 製品のカルーセル
あるオンライン小売ウェブサイトのホームページには、複数の情報セクションが含まれており、その中には注目の製品を紹介するカルーセルが配置されている。これらのカルーセルは水平スクロールを必要とし、計算される高さは 256 CSS ピクセルを超えている。各パネルの幅は 320 CSS ピクセルで、利用者は水平スクロールすることなくカードの全幅を見ることができる。そのため、利用者は垂直スクロールだけでカード全体を閲覧でき、このセクションは達成基準 1.4.10 リフローを遵守している。
検証
手順
- レイアウトに、垂直にスクロールするページ内で水平にスクロールするコンテンツセクションが含まれているかどうかをチェックする。
- 水平にスクロールする各セクションが個別のパネルに分割されているかどうかをチェックする。
- 400% ズームをサポートするユーザエージェントでウェブページを開き、ビューポートの幅を 1280 CSS ピクセルに設定する。
- ズーム機能を有効にして、ビューを 400% に拡大する。
- 水平にスクロールするセクション内の各パネルのコンテンツが、追加の水平スクロールを必要とせずに完全に読めることチェックする。
ブラウザのネイティブスクロールバーはビューポートの幅に含まれない。したがって、垂直にスクロールするページでビューを 1280 CSS ピクセルの幅に設定する場合、スクロールバーの幅を除外する。
期待される結果
- 全てのチェックが真である。