Using CSS to ensure sufficient target size

Metadata

CSS

When to Use

All technologies that support CSS and pointer input.

Description

The objective of this technique is to ensure that navigation or pagination links measure at least 44 by 44 CSS pixels. The aim is for target sizes to be large enough for users to easily activate them.

Examples

The following example can be seen as a working example.

Making pagination links at least 44px wide and 44px high

This example uses min-width and min-height on the targets.

a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted.
Example of using CSS to ensure sufficiently large target size

The HTML

<nav aria-label="pagination">
  <ol class="pagination-list">
    <li><a>previous</a></li>
    <li><a aria-current="page"><span class="visually-hidden">page </span>1</a></li>
    <li><a href="/page-2"><span class="visually-hidden">page </span>2</a></li>
    <li><a href="/page-3"><span class="visually-hidden">page </span>3</a></li>
    <li><a href="/page-4"><span class="visually-hidden">page </span>4</a></li>
    <li><a href="/page-5"><span class="visually-hidden">page </span>5</a></li>
    <li><a href="/page-2">next</a></li>
  </ol>
</nav>

The CSS

.pagination-list{
  display: flex;
  gap: 0.5em;
  list-style: none;
  padding: 0;        
}

.pagination-list li{
  padding: 0.25em;
}

.pagination-list a{
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5em;
}

Tests

Procedure

For each target that is not inline and is not covered by the essential exception:

  1. Check that the target measures at least 44px width and 44px height.

Expected Results