CSS
All technologies that support CSS and pointer input.
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.
The following example can be seen as a working example.
This example uses min-width
and min-height
on the targets.
<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>
.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;
}
For each target that is not inline and is not covered by the essential exception: