aria-labelledby

Sample:

Code:

<nav aria-labelledby="pagination_heading" class="pagination">
  <h2 id="pagination_heading">Pages</h2>
  
  <ol>
    <li>
      <a href="/results/1" aria-current="page">1</a>
    </li>
    <li>
      <a href="/results/2">2</a>
    </li>
    <li>
      <a href="/results/3">3</a>
    </li>
    <li>
      <a href="/results/4">4</a>
    </li>
    <li>
      <a href="/results/5">5</a>
    </li>
    <li>
      <a href="/results/6">6</a>
    </li>
    <li>
      <a href="/results/7">7</a>
    </li>
  </ol>
</nav>

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

  .pagination a {
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    text-decoration: none;
    width: 2em;
  }

  .pagination a:is([aria-current="page"], :hover, :focus-visible) {
    background-color: #3c843f;
    color: #ffffff;
  }
</style>