CSS widthmax-width、及び flexbox を用いたラベルと入力欄の配置

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

この達成方法は、カスケーディング スタイル シート/HTML の技術に、適用される。

この達成方法は、達成基準 1.4.10: リフロー (十分) に関連する。

解説

この達成方法の目的は、垂直方向のスクロールを意図したコンテンツにおいて、320 CSS ピクセル相当の幅での表示時に、ラベルと入力欄を水平のスクロールバーを要さず表示できるようにすることである。ビューポート中のスペースが限られ、ラベルと入力欄を水平方向に並べて表示するのが困難な場合は、垂直方向に並ぶように切り替わる。これは、ビューポートの使用可能なスペースに適応する、widthmax-width、及び flexbox CSS プロパティを使うことで実現される。

レスポンシブなレイアウトはカラム又はレイアウトブロックを追加又は削除ができ、また、レイアウトの各構成要素のある時点での幅を広く又は狭く調整することができる。これにより、水平方向のスクロールが通常発生する単一カラムのレイアウトにおいても、ラベルと入力欄がそのレイアウト領域からはみ出ないことを保証する。

ラベルと入力欄をフィッティングするための基本的なアプローチは次のとおり:

  1. flexbox プロパティ及び特定のビューポートサイズに対応するメディアクエリを用いてレイアウト領域のサイズを定義することで、使用可能なスペース内で拡大、縮小又は折り返し、及びズームレベルに応答する。
  2. flexbox コンテナ内のレイアウト領域を隣接する flexbox ボックスアイテムの行として配置する。これは、段落中の単語とほぼ同様に、適宜新しい行に折り返してもよい。
  3. ラベルと入力欄それぞれの width と max-width プロパティを定義することで、使用可能なスペース内で拡大又は縮小する、及びズームレベルに応答するようする。

幅広いビューポートサイズとズームレベルで見た目の良い結果を得るには、全てのラベルと入力欄の元のサイズが利用可能なスペースの中で最大のサイズに収まるようなデザインの精巧さを必要とする。flexbox の詳細については、MDN の Flexbox についてのページを参照のこと。

事例

事例 1: HTML と CSS を使用した、ラベル、入力欄、及び flexbox レイアウトの配置

次の事例では、HTML と CSS を用いて、ビューポートを含む可変幅のコンテナの中にラベルと入力欄を配置する。レイアウト領域は、ビューポートの調整に合わせてサイズが調整される。その後、ラベルと入力欄は、レイアウト領域のコンテナ内に収まるようにサイズが調整される。

水平方向のスクロールを必要とすることなくズームレベルを 400% に上げることができる。この事例ではラベルと入力欄の widthmax-width にパーセントサイズを使用している。また、select のような置換要素は内在寸法を持つため、要素がグリッドからはみ出るのをクロスブラウザ的に防ぐため max-width を指定している。



<style>

/* Fitting Inputs Styling */

.form-group {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1rem 1rem -1rem;
}

[class*="form-col"] {
  flex: 0 1 100%;
  padding: 0 1rem;
}

@media (min-width: 576px) {
  .form-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  
  .form-col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  
  .offset-form-col-4 {
    margin-left: 33.33333%;
  }
  
}

input {
  display: block;
  width: 100%;
}

label,
select {
  display: block;
  width: 100%;
  max-width: 100%;
}

</style>

<div class="form-group">
  <div class="form-col-4">
    <label for="fname">First Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="fname" autocomplete="given-name">
  </div>
</div>

<div class="form-group">
  <div class="form-col-4">
    <label for="lname">Last Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="lname" autocomplete="family-name">
  </div>
</div>

<div class="form-group">
  <div class="form-col-4">
   <label for="favorite-fruit">Favorite fruit</label>
  </div>
  <div id="favorite-fruit" class="form-col-8">
    <select>
      <option>Banana</option>
      <option>Pineapple</option>
      <option>Strawberry</option>
    </select>
  </div>
</div>

<div class="form-group">
  <div class="offset-form-col-4 form-col-8">
    <button>Submit</button>
  </div>
</div>

動作例: Using Adjustable Labels and Inputs for Reflow

検証

手順

  1. コンテンツを 400% ズームが可能なユーザエージェント上で、ビューポートサイズを 1280x1024 CSS ピクセルに設定してウェブページを表示する。
  2. 400% ズームする。
  3. 垂直方向にスクロールするコンテンツにおいては、全てのラベルと入力欄が水平方向にスクロールを要さず表示可能スペースに収まること。

注意: ブラウザが 400% までズームが可能でない場合、ブラウザの幅を相対的に狭めることも可能である。例えば、300% ズーム時はビューポートの幅を 960px にする。

期待される結果

上記3の結果が真である。