스와이퍼 웹 접근성 tab키
본문
[웹 접근성]
키보드 탭 키를 통해 링크 포커스를 이동시킬 때, 다른 곳은 잘 작동하는데 스와이퍼 영역에서 탭 키를 반복해서 눌러도 링크 포커스가 스와이퍼를 벗어나지 못하고 내부 슬라이더에서 무한으로 탭 키가 이동하는 문제를 겪고 있습니다. ㅠㅠ
// html
<slide>
<button type = "button"> // 계속 포커스 되는 요소
<button type = "button">
<slide>
// js
var swiper = new Swiper(".mainSwiper", {
slidesPerView : 'auto',
centeredSlides: false,
slidesBetWeen : 16,
loop: true,
loopAdditionalSlides : 1,
autoplay: {
delay: 3000,
},
답변 1
loop를 풀어서 해결하거나 자바스크립트를 통해 직접 구현하셔야 합니다.
- Tab 키를 눌러 swiper 슬라이드의 마지막 객체에 포커스가 발생했을때 다음 객체로 포커스 이동
swiper가 loop일 경우 복제된 슬라이드의 마지막으로 포커스가 설정됩니다.
swiper 플러그인 자체에서 해결하지 않는 문제로 이미 해외에서도 많이 제보 & 이슈가 된 문제입니다.
stackoverflow 뿐만 아니라 해외 여러 개발자 커뮤니티와 swiper 깃허브에 수 차례 제보 되었지만
제작자 쪽에서는 보완할 생각이 없어 보입니다.
잘 해결되시면 채택 한번 부탁드립니다^^
감사합니다 ^^ 덕분에 잘해결했어요
답변을 작성하시기 전에 로그인 해주세요.