問題

自身のブログにページネーションを次のように実装しました。

sample.html

<!-- 実装例は簡略化しています -->
<ul>
  <a>
    <li>1ページ目</li>
  </a>
  <a>
    <li>2ページ目</li>
  </a>
  <a>
    <li>3ページ目</li>
  </a>
</ul>

するとサイト評価をしてくれるGoogle Lighthouseから、アクセシビリティの観点で注意されました。

いわく、

「リスト（<ul>や<ol>）は<li>しか含んじゃいけませんよ」

つまり、<a>で<li>を囲うことはそのルールに反していました。

対応

次のようにcssを使うことで回避することができました。

sample.css

li a {
  display: block;
}

sample.html

<!-- 実装例は簡略化しています -->
<ul>
  <li>
    <a>1ページ目</a>
  </li>
  <li>
    <a>2ページ目</a>
  </li>
  <li>
    <a>3ページ目</a>
  </li>
</ul>