search

bootscore / bs-swiper

WordPress plugin to show posts, child-pages, custom post types or WooCommerce products in a swiper.js carousel in Bootscore theme.
https://bootscore.me/plugins/bs-swiper/
MIT License
18 stars 9 forks source link

Improve accessibility of swiper (no keyboard trap) #78

Open simon-eller opened 3 months ago

simon-eller commented 3 months ago

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!

crftwrk commented 2 months ago

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 swiper-init.js:

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.

simon-eller commented 2 months ago

Thanks for your quick reply @crftwrk. :) It's a good solution and should fix the problem, so I created a pull request.