「リストには＜li＞要素とスクリプト対応要素（＜script＞と＜template＞）以外も含まれています。」エラーの対策

ウェブサイトの品質向上を目指す中で、多くの開発者が直面するのが「リストには、<li> 要素と、スクリプト対応要素（<script> と <template>）以外も含まれています。」というエラーメッセージです。

このエラーは、GoogleのLighthouseツールによるアクセシビリティ診断で頻繁に検出される問題の一つであり、ウェブアクセシビリティの観点から非常に重要な指摘となっています。

このエラーメッセージが示すのは、HTML文書の構造的な問題です。本記事では、この問題の根本原因から具体的な解決策まで、実際の開発現場で役立つ情報を詳しく解説していきます。

HTML5におけるリスト要素の正しい仕様

ul要素とol要素の基本的な役割

HTMLにおけるリスト要素は、情報を整理し、構造化するための重要な機能を担っています。特に、ul（順序なしリスト）とol（順序付きリスト）は、多くのウェブサイトで使用される基本的な要素です。

ul要素（Unordered List）は、項目の順序が重要でない場合に使用されます。例えば、特徴の一覧や、ナビゲーションメニューなどが代表的な使用例です。一方、ol要素（Ordered List）は、手順や順位など、項目の順序が意味を持つ場合に使用されます。

HTML5仕様における許可されたコンテンツ

HTML5の仕様によると、ul要素とol要素が直接含むことができる子要素は、以下の通りです：

li要素（リスト項目）
script要素（スクリプト）
template要素（テンプレート）

これらの要素以外は、ul要素やol要素の直接の子要素として配置してはいけません。つまり、div要素やp要素、span要素などを直接ul要素やol要素の子要素として配置すると、このエラーが発生することになります。

エラーが発生する具体的な原因

よくある間違ったHTMLの書き方

このエラーが発生する典型的なケースを見てみましょう：

間違った例：

Copy<ul>
  <div class="list-item">
    <li>項目1</li>
  </div>
  <div class="list-item">
    <li>項目2</li>
  </div>
</ul>

この例では、ul要素の直接の子要素としてdiv要素が配置されています。これは、HTML5の仕様に違反しており、Lighthouseのアクセシビリティ診断でエラーとして検出されます。

プラグインやライブラリによる問題

特に問題となるのが、JavaScriptプラグインやライブラリによって自動生成されるHTMLです。カルーセルプラグインやスライダーライブラリなど、多くのツールがリスト要素を使用してコンテンツを表示しますが、これらのツールが生成するHTMLが正しい構造になっていない場合があります。

例えば、Swiperやowl-carouselなどの人気のプラグインでは、設定によってはul要素の直接の子要素として追加のdiv要素を生成することがあります。これにより、知らないうちにHTML構造が不正になってしまうケースが多発しています。

Lighthouseによる診断とエラーの検出

Lighthouseツールの役割

Googleが提供するLighthouseは、ウェブサイトの品質を多角的に評価するツールです。パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWAの5つの観点から、ウェブサイトの状態を100点満点で評価し、具体的な改善点を提示してくれます。

アクセシビリティ診断では、視覚障害者向けのスクリーンリーダーが正しく動作するか、色覚異常のあるユーザーが利用しやすいかなど、多様なユーザーのニーズを考慮した評価を行います。

エラーの発見方法

このエラーを発見する最も効果的な方法は、Google ChromeのDevToolsを使用することです。以下の手順で診断できます：

Google Chromeでウェブサイトを開く
右クリックして「検証」を選択
「Lighthouse」タブを開く
「アクセシビリティ」をチェック
「レポートを生成」をクリック

診断結果で「Lists do not contain only <li> elements and script supporting elements (<script> and <template>)」という項目が表示された場合、このエラーが発生していることが確認できます。

具体的な解決方法とベストプラクティス

基本的な修正方法

エラーを修正する最も直接的な方法は、HTML構造を正しく書き直すことです。先ほどの間違った例を修正してみましょう：

正しい例：

Copy<ul>
  <li class="list-item">項目1</li>
  <li class="list-item">項目2</li>
</ul>

このように、ul要素の直接の子要素はli要素のみとし、スタイリングが必要な場合はli要素にクラスを追加します。

複雑な構造が必要な場合の対応

もし、より複雑な構造が必要な場合は、以下のように記述します：

Copy<ul>
  <li>
    <div class="item-wrapper">
      <h3>項目タイトル</h3>
      <p>項目の説明文</p>
    </div>
  </li>
  <li>
    <div class="item-wrapper">
      <h3>項目タイトル</h3>
      <p>項目の説明文</p>
    </div>
  </li>
</ul>

この方法では、li要素の内部に複雑な構造を配置することで、HTML5の仕様に準拠しつつ、デザイン要件を満たすことができます。

プラグインとライブラリへの対応

既存のプラグインやライブラリを使用している場合は、以下のような対応を検討してください：

設定の見直し：多くのプラグインには、生成されるHTML構造を制御するオプションがあります。
カスタムテンプレートの使用：プラグインによっては、カスタムテンプレートを使用して出力HTML を制御できます。
代替プラグインの検討：現在使用しているプラグインが構造的な問題を解決できない場合、別のプラグインへの移行を検討します。

ウェブアクセシビリティの重要性

アクセシビリティがもたらす恩恵

正しいHTML構造を維持することは、単なる技術的な要件ではありません。視覚障害者がスクリーンリーダーを使用してウェブサイトを利用する際、正しい構造のHTMLは情報の理解を大幅に助けます。

また、検索エンジンのクローラーも、構造化されたHTMLを理解しやすく、SEO効果の向上にも繋がります。つまり、アクセシビリティ対応は、ユーザビリティとSEO両方の観点から重要な取り組みなのです。

障害者差別解消法との関連

2024年より改正された障害者差別解消法では、民間事業者にも合理的配慮の提供が義務付けられました。ウェブアクセシビリティの確保は、この法的要件を満たすための重要な取り組みの一つです。

表示速度改善との関連性

正しいHTML構造がパフォーマンスに与える影響

正しいHTML構造は、アクセシビリティだけでなく、ウェブサイトの表示速度にも良い影響を与えます。不正な構造のHTMLは、ブラウザの解析処理を複雑にし、レンダリング時間の増加を招く可能性があります。

特に、リスト要素の構造が正しく記述されていると、CSSの適用が効率的になり、結果的にページの読み込み速度が向上します。これは、Core Web Vitalsの改善にも繋がる重要な要素です。

LandingHub（https://www.landinghub.net/）での最適化事例

弊社が提供するLandingHubでは、このようなHTML構造の最適化を含む包括的なウェブサイト最適化サービスを提供しています。実際の事例では、リスト要素の正しい構造化により、Lighthouseスコアが20%向上し、同時にページ読み込み速度も15%改善された例があります。

その他の表示速度改善テクニック

画像最適化の重要性

HTML構造の最適化と併せて実施したいのが、画像の最適化です。WebP形式の採用、適切な圧縮、レスポンシブ画像の実装などにより、大幅な表示速度向上が期待できます。

CSSとJavaScriptの最適化

不要なCSSやJavaScriptの削除、ファイルの圧縮、CDNの活用なども、表示速度向上に効果的です。特に、使用していないCSSルールの削除は、レンダリング時間の短縮に直結します。

キャッシュの活用

ブラウザキャッシュの適切な設定により、リピートユーザーの体験を大幅に改善できます。静的ファイルの適切なキャッシュ設定は、サーバー負荷の軽減にも繋がります。

検証とテストの重要性

継続的な品質管理

HTML構造の修正後は、継続的な検証が重要です。開発プロセスにLighthouseテストを組み込むことで、新たな問題の発生を防ぐことができます。

複数ツールによる検証

Lighthouseだけでなく、WAVE、axe、miCheckerなど、複数のアクセシビリティ検証ツールを使用することで、より包括的な品質管理が可能になります。

まとめ：持続可能な品質改善のために

「リストには、<li> 要素と、スクリプト対応要素（<script> と <template>）以外も含まれています。」というエラーは、単純な技術的な問題に見えますが、実際にはウェブアクセシビリティ、SEO、パフォーマンス向上すべてに関わる重要な課題です。

正しいHTML構造の維持は、すべてのユーザーにとって使いやすいウェブサイトを構築するための基本的な要件です。そして、この基本を押さえることで、検索エンジンの評価向上や表示速度の改善といった、ビジネス上の成果にも繋がります。

もし、ウェブサイトの包括的な最適化をお考えであれば、LandingHub（https://www.landinghub.net/）では、HTML構造の最適化から表示速度改善、アクセシビリティ対応まで、ワンストップでのサポートを提供しています。技術的な課題を解決し、ユーザー体験の向上とビジネス成果の両立を実現しませんか。

継続的な品質改善により、より多くのユーザーに愛されるウェブサイトを目指していきましょう。