Technique technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels:Using CSS to ensure targets are at least 44 by 44 CSS pixels

About this Technique

This technique is not referenced from any Understanding document.

This technique applies to all technologies that support CSS and pointer input.

Description

The objective of this technique is to ensure that links in pagination components are large enough to meet the requirements of Success Criterion 2.5.5, Target Size (Enhanced). The aim is to provide an adequate target size to prevent accidental pointer activation of adjacent targets.

Examples

The following example can be seen as a working example.

Example 1: 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 has no sufficiently large equivalent, that isn't in a sentence or otherwise constrained by the line-height of non-target text, that has had its size modified by the author, and whose presentation isn't essential:

Check that the target has a size of at least 44px width and 44px height.

Expected Results

#1 is true