質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

438閲覧

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

Gin_nosuke

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/09/23 06:32

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)などを見てもこの該当部分の削除の仕方が分からず、こちらに相談させていただきました。
もし分かる方がいればご教示いただけませんでしょうか。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

2

javascript

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

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

javascript

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

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

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

投稿2022/09/23 08:29

task58.js

総合スコア26

ka2obushi, Gin_nosuke👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Gin_nosuke

2022/09/23 09:00

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。