Skip to content

テクニック C42: min-height 及び min-width を用いてターゲットの間隔を確保する

このテクニックについて

このテクニックは、2.5.8: ターゲットのサイズ (最低限) (十分なテクニック) に関連する。

このテクニックは、CSS 及びポインタ入力をサポートする全ての技術に適用される。

解説

このテクニックの目標は、ナビゲーション又はページネーションメニュー内のリンクについて、ターゲット領域自体が 44×44 CSS ピクセルよりも小さい場合に、それ以上の大きさの領域内に収めるように配置することである。その目的は、十分なターゲットクリアランスを確保することによって、隣接ターゲットへのポインタの誤操作を防ぐのに十分な隣接ターゲットとのオフセットを設けることである。

事例

次の事例は、動作例でレンダリングされたバージョンとして確認できる。

事例 1: inline-block、min-height 及び min-width の表示値を使用する

最初の事例が示しているのは、ターゲット (ここでは、ページネーションのナビゲーション内のリンクになっている数字) が 44 × 44 CSS ピクセルより小さいという状況である。しかし、ターゲットを含むリスト項目の高さ及び幅の最小値は 44 px に設定されているため、十分なターゲットの間隔が確保されている。

検索結果のすぐ上にある水平ページネーションコンポーネント。
CSS を使用してターゲットの周囲に十分なスペースを確保する事例

HTML

<nav aria-label="pagination">
  <ol class="pagination-1">
    <li><a class="previous">previous</a></li>
    <li><a aria-current="page">1</li>
    <li><a href="/page-2">2</a></li>
    <li><a href="/page-3">3</a></li>
    <li><a href="/page-4">4</a></li>
    <li><a href="/page-5">5</a></li>
    <li><a href="/pages-6-10">next</a></li>
  </ol>
</nav>

CSS

.pagination-1 li {
  display: inline-block; 
  min-height: 44px;
  min-width: 44px;
}

事例 2: display の値に flex を使用し、かつ min-height / width を使用する

2 番目の事例では、親コンテナではなくターゲット (ページネーションメニュー内のリンクになっている数字) に min-width 及び min-height を使用しているため、このターゲットの間隔の達成基準を満たし、付随して AAA 達成基準 2.5.5 ターゲットサイズも満たしている。

検索結果のすぐ上にある水平ページネーションコンポーネント。
ターゲット内に十分なスペースを確保するために CSS を使用する事例

HTML

<nav aria-label="pagination">
  <ol class="pagination-2">
    <li><a class="previous">previous</a></li>
    <li><a aria-current="page">1</li>
    <li><a href="/page-2">2</a></li>
    <li><a href="/page-3">3</a></li>
    <li><a href="/page-4">4</a></li>
    <li><a href="/page-5">5</a></li>
    <li><a href="/pages-6-10">next</a></li>
  </ol>
</nav>

CSS

.pagination-2 {
  display: flex;
  flex-wrap: wrap;
}

ol.pagination-2 a {
  display: block;
  line-height: 44px;
  min-height: 44px;
  min-width: 44px;
}

検証

手順

メカニズムによって拡大できず、インラインでなく、必要不可欠の例外に該当しない各ターゲットに対して:

  • ターゲットの周囲のスペースが少なくとも幅 44 px、高さ 44 px となるように、十分な間隔が確保されていることをチェックする。

期待される結果

  • チェック 1 が真である。
Back to Top