-
-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve accessibility of swiper (no keyboard trap) #78
Comments
Thank you for pointing this out! Unfortunately, we cannot fix this here, this has to be addressed to the Swiper library. It's also possible that this is just a logical issue, let me explain: If you go to the plugins site https://bootscore.me/documentation/bs-swiper/, all templates are using the infinite loop. The first example has 5 posts, showing 4 cards in desktop view. The 6th post is then the first one, but Swiper creates virtual slides for infinite loop. If you tab through the cards, you will see that always the first item card is active and the next one is already visible. In that case you are trapped inside the slides and will never come to the next arrow. To understand how this works, shrink your browser to mobile view that only one slide is visible. Now tab through the 5 cards. Because the 6th (1st virtual) card is not visible, the tab goes then through each pagination bullet, then the next and then the previous arrow. Same effect you can see on the two hero templates in desktop view. This is the same as in the official Swiper demo https://swiperjs.com/demos#infinite-loop. This example has just one slide per view, but if you change this for example to 2, same behaviour happens. Another option is to enable the arrow keys in the keyboard: {
enabled: true,
}, Then we can use the keys instead the tab. If that is an acceptable solution for you, it would be great if you are just add it and create a pull request. If you have questions, you can ask any time. |
Added option on card swipers to control via keyboard for better accessibility.
Thanks for your quick reply @crftwrk. :) |
Big praise! All the Bootscore elements that I have tested so far are great in terms of accessibility.
Unfortunately, the swiper is not completely accessible: When navigating using the TAB key, the heading, button, and tags from the cards are focused on - that's great so far. However, you are then trapped in the swiper, i.e. there is no way to get to the next element.
This is a WCAG success criterion, see https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html
Is there any way to improve this in the future?
Thank you for this great theme!
The text was updated successfully, but these errors were encountered: