達成基準 1.4.10: リフローを理解する

達成基準 1.4.10 リフロー (レベル AA): コンテンツは、情報又は機能を損なうことなく、かつ、以下において 2 次元スクロールを必要とせずに提示できる:

利用や意味の理解に 2 次元のレイアウトが必須である一部のコンテンツを除く。

320 CSS ピクセルは、1280 CSS ピクセル幅を 400 %ズームで見た場合の最初の表示幅に相当する。横スクロールになるように設計されたウェブコンテンツ (例えば、縦書きのテキスト) では、256 CSS ピクセルは、高さ 1024px を 400 %ズームで見た場合の最初の表示の高さに相当する。

2 次元のレイアウトを必要とするコンテンツの例としては、画像、マップ、図解、ビデオ、ゲーム、プレゼンテーション、データテーブル、及びコンテンツを操作している間にツールバーを表示しておく必要のあるインタフェースが挙げられる。

意図

この達成基準の意図は、テキストを拡大して 1 カラムにまとめて読む必要があるロービジョンの人を支援することである。ブラウザのズーム機能を利用してコンテンツを 400 %に拡大するとリフローされる。それにより、1 カラムで表示されるため、複数の方向にスクロールする必要はない。

ロービジョンの人は、リフローとともに拡大されたテキストを読むことができる。拡大によって文字が知覚できるようになり、リフローによってトラッキングができるようになる。トラッキングは、1 行の終わりから次の行の始めまでを含む、テキストの行に沿って行われる。

ビューポートによって切り取られた行を表示するために、読み方向にスクロールする必要性を回避することは重要である。そのようなスクロールは読むために必要な労力を著しく増加させるからである。また、コンテンツが画面外に隠れないようにすることも重要である。例えば、縦方向にスクロールするページを拡大することで、コンテンツが片側に隠れるべきではない。

リフローのしくみ

HTML / CSS、PDF、ePub などの技術向けのユーザエージェントには、ウィンドウ (ビューポート) の幅に合わせてコンテンツをリフローするための手法がある。適切に作成されている場合、利用者がコンテンツのサイズを拡大するためにズームインしたときに、ページコンテンツはウィンドウの境界内 (ビューポート) に収まるようにリフロー (包むこと) 可能である。利用者がズームするときに、コンテンツの空間的な関係性が変わる可能性があるが、全ての情報及び機能は引き続き利用できるようにすべきである。

コンテンツのリフローをサポートすることは 「レスポンシブウェブデザイン」 とも呼ばれる。これは、タブレットやスマートフォンなどのモバイルデバイス向けに最適化されたレイアウトを提供するために、さまざまなビューポートの幅で (特定のブレークポイントで) ウェブコンテンツを再フォーマットする CSS メディアクエリによって有効にされる。重要なのは、これらのブレークポイントは、狭いビューポートだけでなく、利用者がブラウザのズーム機能を使用してページを拡大するときにも発生することである。

100 % (デフォルト) の倍率のデスクトップブラウザでは、リフローをサポートする一般的なウェブページは 2、3、又はそれ以上のカラム割りでコンテンツを表示する。ズームインするとレイアウトが変更されるため、コンテンツの表示カラム数が少なくなる。200 %以上の高倍率では、コンテンツは通常 1 カラムで表示される。ナビゲーションメニューや補足コンテンツのように、はみ出したカラムにあったコンテンツの一部は、通常、メインコンテンツの上又は下に表示される。

視距離とディスプレイ解像度

320 CSS ピクセルの値は、コンテンツ制作者が実現可能である合理的な最小サイズとして挙げられている。この値は、一般的なモバイルデバイスの小型ディスプレイのビューポート幅と一致している。320 CSS ピクセルは 1280 ピクセルの幅に設定され、400 %に拡大されたデスクトップブラウザウィンドウの幅に相当する。400 %は領域ではなく次元に適用されることに注意すべきである。つまり、デフォルトの幅の 4 倍、デフォルトの高さの 4 倍を意味する。

小さいスクリーンのデバイスは近づけ、大きなスクリーンのデバイスは遠ざけて、網膜上に同じ像を映すための視距離によって必要とされる文字の大きさを示す図。
図 1: 異なる解像度の異なるディスプレイ上の同じ CSS ピクセルサイズの文字

何かを読む際に、表示の大きさは目の網膜に映し出される像ほどは重要ではない。電話機は近くで見るように設計され、デスクトップは離れてみるよう設計されている。結果として、電話機の 16px 表示はデスクトップの 16px 表示より物理的に小さくなる。自分の意図した距離で見た場合、どちらの表示サイズも同じ像を網膜に投影するため、問題にはならない。

コンテンツの可視性と可用性

どの程度の量のコンテンツが表示されるかは、縮尺によって異なる。例えば、デスクトップレイアウトで完全に表示されるナビゲーションメニューは、画面のスペースが少なくて済むため、少数の項目、又は 1 つのメニューボタン (「ハンバーガー」アイコンのパターン) にまとめられて表示されることがある。

全てのコンテンツと機能が直接、又はアクセス可能なコントロールを介して、又は直接リンクのいずれかを介して完全に利用可能である限り、達成基準は満たされる。

リフローにおけるコンテンツの例外

利用や意味の理解のために 2 次元レイアウトを必須とするコンテンツは、意味を失うことなくリフローすることはできない。したがって、この達成基準の範囲外となる。例えば、画像及び動画は性質上 2 次元である。画像を切り取って縦に並べるとコンテンツは使用できなくなるため、範囲外となる。ただし、ズームレベルを 400 %にすると、これらの要素をビューポートの境界内に収めることができる。(Advisory Techniquesを参照)。

複雑なデータテーブルは、見出しとデータセルの間に 2 次元の関係がある。この関係性はコンテンツの意味を伝えるために不可欠である。したがって、この達成基準はデータテーブルには適用されない。

コンテンツを編集するためのツールバーのあるインタフェースは、ビューポートにコンテンツとツールバーの両方を表示する必要がある。ツールバーのボタン数に応じて、ツールバーはテキストの方向にスクロールする必要があるかもしれない (例えば、縦スクロールするページで横方向に)。したがって、この達成基準はツールバーのあるインタフェースには適用されない。

モバイルオペレーティングシステムのブラウザ

モバイルオペレーティングシステムにおける最も一般的なブラウザのレイアウト方法は、デスクトップブラウザの場合と同じようにはリフローを提供しない。これらのブラウザでは、ピンチジェスチャを使用してコンテンツを拡大したり、特定の列をダブルタップしてビューポートの幅いっぱいに表示するなど、さまざまな方法でコンテンツを拡大できる。つまり、モバイルブラウザは通常、コンテンツ制作者の意図に関係なく横スクロールを示すことを意味する。

原則として、Android のドルフィンブラウザで証明されているように、モバイルユーザエージェントは、利用者がコンテンツにズームインしたときにも同様にリフローを提供できる。したがって、モバイルオペレーティングシステムにおいてリフローへの対応不足であることは、ユーザエージェント対応の問題と見なすことができる。

レスポンシブウェブデザイン及びこの達成基準を満たすその他の方法

レスポンシブウェブデザインの手法を取り入れることは、利用者が 400 %にズームインできるようにするという目的を達成するための最も効果的な方法である。同じ URL である (CSS ブレークポイントによる) ページのバリエーションは適合している必要がある (WCAG 2.1 の適合性を比較)。

旧来のシステムを使用しているか、何らかの理由でレイアウト方法を更新できない組織の場合、代替の適合バージョンは、320px 幅の固定レイアウトを持つモバイルサイトである。利用者はデフォルトのウェブサイトからそのバージョンを見つけることができるようにすべきである。

横書き及び縦書きの言語でのスクロールの回避

達成基準は、横書きと縦書きの両方の言語に適用される。英語などの横書きの言語にとって、デフォルトで縦方向にスクロールするページをズームする場合、横方向のスクロールを発生させるべきではない。縦書きの言語にとって、デフォルトで横方向にスクロールするページをズームする場合、縦方向のスクロールを発生させるべきではない。

リフローと達成基準 1.4.4 テキストのサイズ変更の関係

リフローの達成基準の焦点は、利用者が 2 方向にスクロールしなくてもズームインできるようにすることである。達成基準 1.4.4 テキストのサイズ変更も適用することで、リフローの要件を同時に満たしながら、全てのテキストのサイズを少なくとも 200 %に拡大することができる。利用者がズームインしたとき (又は小さなスクリーンで利用しているとき) にテキストのサイズが縮小された場合でも、200% の拡大率を得ることは可能であるべきである。例えば、ウィンドウの幅が1280px のときにテキストが 20px に設定されている場合、200 %ズームでは最低 20px (デフォルトサイズの 200 %) になるが、400 %ズームでは (デフォルトの 100 %表示の まだ 200 %であるので) 10px に設定できる。全てのブレークポイントで 200 %の拡大を可能にする必要はないが、何かしらの方法で 200 %の拡大を可能にすべきである。

訳注

「リフローと達成基準 1.4.4 テキストのサイズ変更の関係」の説明には不明瞭な箇所があるが、この箇所の翻訳は原文に忠実な形で行った。なお、最新の原文の該当箇所は大幅に加筆されている。Understanding WCAG 2.1 The relation of Reflow to the Success Criterion 1.4.4 Resize Text もあわせて参照のこと。

メリット

事例

例1: レスポンシブデザイン

ズーム率があがると、ナビゲーションが最初に変更されて 「More」 ドロップダウンメニューの背後にあるオプションが非表示になることに注意する。ズームを続けると、ほとんどのナビゲーションオプションは 「ハンバーガー」 メニューボタンの後ろになる。全ての情報及び機能はまだこのウェブページで利用可能である。横スクロールもない。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成方法

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの 「その他の達成方法」 を参照のこと。

十分な達成方法

参考達成方法

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、全ての状況において、全ての達成方法が使用可能、又は効果的であるとは限らない。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

  • @@ Using fixed sized containers and fixed position content (CSS)
  • @@ "Interfering with a user agent's ability to zoom" i.e., author using: maximum-scale or minimum-scale or user-scalable=no or user-scalable=0 in the meta element ?? @@ Note: In Pinch zoom thread on the WCAG list people did not seem to be in favor of this as a failure.
  • @@ (HTML) Using preformatted text or excluding preformatting text as an exception to no two dimensional scrolling.

重要な用語

CSS ピクセル (CSS pixel)

New

約 0.0213 度の視野角。

CSS ピクセルは、CSS における全ての長さ及び測定のための規範的な測定単位である。この単位は密度非依存で、ディスプレイに存在する実際のハードウェアピクセルとは異なる。ユーザエージェント及びオペレーティングシステムは CSS ピクセルが、ディスプレイの物理的な寸法と予想される視距離 (コンテンツ制作者は決定できない要因) を考慮した CSS Values and Units Module Level 3 reference pixel [css3-values] にできるだけ沿うように設定されていることを確認すべきである。