WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

G146: リキッドレイアウトを使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

全てのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、表示領域幅の広狭に順応するレイアウト手法を用いることで、横スクロールバーが挿入されることなしに、コンテンツを表示できるようにすることである。オンスクリーン・ディスプレイ【訳注:ディスプレイの本体側面などに調節用のつまみがついているのではなく、画面上で各種設定を行うディスプレイ】に対応できるように、必要に応じてテキストサイズが変更できること、テキストを流し込み直せることの両方が可能なレイアウト領域を、リキッドレイアウトによって定義する。したがって、きっちりと決まったレイアウトとはならないが、各要素の関係と描画の順序は同じままである。さまざまなデバイスで問題なく表示できたり、通常とは異なるフォントサイズに設定変更している利用者に対するデザイン制作という面で、リキッドレイアウトは効果的な手法である。

リキッドレイアウトの基本原則は次のとおりである。

  1. レイアウト領域を、テキストに応じてサイズが変わるユニットを利用して定義する。つまり、テキストの拡大縮小と同じように、レイアウト領域が広まったり狭まったりする。

  2. レイアウト領域を、フロートボックスを隣り合わせで横に並べたように配置する。つまり、パラグラフの中の各単語とほぼ同じような方法で、必要に応じて行送りされる。

複雑なリキッドレイアウトの実現には、入れ子にしたレイアウト領域、つまり大きな領域の中に部分ごとの複数の領域を入れ込む方法を利用する場合がある。単純なリキッドレイアウトであっても、テキストサイズの違いに関わらず見た目のよさを損なわないようにデザインを工夫する必要があるとはいえ、十分に計画したリキッドレイアウトは最も効果的なページデザインとなるだろう。

事例

事例 1: HTMLとCSSでの単純なリキッドレイアウト

以下は、リキッドレイアウトの実現にHTMLとCSSを利用した、かなり単純な事例である。3つの列はテキストサイズが変わるのと同じようにサイズ調整される。もし全ての列を足した幅が、3つの列で利用できる幅の合計を超えてしまった場合、最後の列は前の列の横に置かれるのではなく、下に送られる。列に含まれるテキストの中で最も長い単語が列の幅におさまっている限り、フォントサイズを大きくすることができ、ブラウザの横スクロールバーへの影響はない。この事例では列の幅指定にパーセントを利用しており、「float」プロパティを利用して列をフロート領域として定義している。

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>単純なリキッドレイアウトの例</title>
<style type="text/css">

.column
	{
	border-left: 1px solid green;
	padding-left:1%;
	float: left;
	width: 32%;
	}
#footer
	{
	border-top: 1px solid green;
	clear: both;
	}
</style>

</head>
<body>
   <h1>WCAGの例</h1>
   <h2>3つの列に含まれるテキスト</h2>
      <div title="1列目" class="column">
        <h3>Block 1</h3>
        <p> この達成方法の目的は、表示領域幅の広狭に順応するレイアウト手法を
            用いることで、横スクロールバーが挿入されることなしに、コンテンツ
            を表示できるようにすることである。
        </p>
      </div>

      <div title="2列目" class="column">
        <h3>Block 2</h3>
        <p> これはとても簡単な例であり、テキストサイズの変化に順応するページ
            レイアウトである。
        </p>
      </div>

      <div title="3列目" class="column">
      <h3>Block 3</h3>
        <p> より複雑なページレイアウトに関する達成方法については、以下の参考
            リソースを参照のこと。
        </p>
      </div>

      <p id="footer">Footer text</p>
</body>
</html>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. ユーザエージェントでコンテンツを表示する。

  2. テキストサイズを200%に拡大する。

  3. ブラウザの横スクロールバーが表示されることなしに、すべてのコンテンツが表示され、すべての機能が利用できるか確認する。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。