Technique C44:Using CSS to ensure targets are at least 44 by 44 CSS pixels

About this Technique

This technique relates to 2.5.5 Target Size (Enhanced) (Sufficient).

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

Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. Content can satisfy the normative requirements of WCAG even if it does not use any of the documented techniques. See About WCAG Techniques.

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-inline-size and min-block-size on the targets.

a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted. — Figure 1. 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-block-size: 44px;
  min-inline-size: 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