Swiperアクセシビリティ問題：li要素へrole="group"属性が付与される問題

症状

swiperを使用した際liタグにrole=groupが存在する

<ul class="swiper-wrapper">
  <li class="swiper-slide" role="group">アイテム</li>
  <li class="swiper-slide" role="group">アイテム</li>
  <li class="swiper-slide" role="group">アイテム</li>
  ...
</ul>

エラー内容

• <ul>および<ol>の直下には<li>、<script>または<template>要素のみを含まなければならない
• リスト要素内に許可されていない直接の子要素 [role=group] が存在する

問題の本質

1. HTML仕様上の制約

   • リスト要素（<ul>/<ol>）の直接の子として許可されるのは基本的に <li> のみ
   • 例外的に <script> と <template> も許可されている

2. 二重の役割の矛盾

   • <li> 要素に role="group" を追加することで、一つの要素に異なる2つのセマンティック役割を持たせている
   • これは論理的に矛盾していて支援技術が混乱する原因になる

アクセシビリティへの影響

• スクリーンリーダーがリスト構造を正しく認識できない
• 不正確なナビゲーション情報が伝達される

修正案

• javascriptでrole="group"属性を削除する
• swiperを使用しない。他のライブラリを使用する。または自作する。