Swiperの勝手に挿入されてしまうrole属性を削除したい

Swiperを使用し、スライダーを作成しています。

javascript
1window.addEventListener('DOMContentLoaded', function() {
2    var Slide = new Swiper('.slide', {
3        autoplay: {
4            delay: 10000,
5            stopOnLastSlide: false,
6            disableOnInteraction: false,
7            reverseDirection: false
8        },
9        slidesPerView: 1,
10        breakpoints: {
11            768: {
12                slidesPerView: 1
13            },
14            1024: {
15                slidesPerView: 2
16            },
17            1401: {
18                slidesPerView: 3
19            }
20        },
21        loopedSlides: 6,
22        loop: true,
23        pagination: {
24            el: ".pagination",
25            clickable: true
26        },
27        speed: 500,
28    });
29}, false);

上記のようにコントロール用のjsを記述していますが、paginationを使用した場合、ディペロッパーツールで確認すると、以下のように対象のスライド部分へ勝手にrole属性が付与されてしまっています。

HTML
1<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1">

Swiper公式のParameters部分や、Pagination・Accessibility (a11y)などを見てもこの該当部分の削除の仕方が分からず、こちらに相談させていただきました。
もし分かる方がいればご教示いただけませんでしょうか。
よろしくお願いいたします。

回答1件

javascript
1pagination: {
2    el: ".pagination",
3    clickable: true
4 },

の**clickableがtrueになっていることが原因**ですので、

javascript
1pagination: {
2    el: ".pagination",
3    clickable: false
4 },

のようにclickableをfalseにすればrole属性は挿入されません。

role=buttonが挿入される理由は、ページネーションをクリックすることによるスライドの遷移を行うためです。
ページネーションが、何枚目のスライドなのかを示すだけの表示で、クリックによるスライドの選択が必要ないのならclickable: falseにしてください。
もし、クリックによるスライドの選択が必要ならこのrole属性はそのためのものですので放置でOKです。

投稿2022/09/23 08:29

task58

総合スコア26

回答へのコメント

Gin_nosuke

2022/09/23 09:00

早々にご回答いただき誠にありがとうございます。また、説明が不足していたようで申し訳ございません。ページネーションのクリックの機能は残しつつ、自動挿入のroleだけ削除出来ないものか、という質問でした。 clickableをtueの状態ではやはりrole属性の挿入は消せないのですかね・・。現在制作中のサイトで、クライアント側のデザイン仕様上、該当部分のbuttonサイズが大きく出来ず、LighthouseスコアでのMOBILE FRIENDLY項目で「Tap targets are not sized appropriately」の表示が出ており、role属性を削除出来れば、解決するかなと思い、上記のような方法で対応できないかと考えました。構造化的に無理やりな感じでしたので、やはり厳しいですかね、、。