リストを<a>で囲ったらGoogle Lighthouseに叱られた

問題

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

sample.html

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

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

• Lists do not contain only <li> elements and script supporting elements(<script> and <template>)

いわく、

「リスト（<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>

参考

• 参考にした記事
  • 要素全体をリンクにする方法
• 実装例（自身のブログ）
  • koboriakira.com