Skip to content
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

Open
simon-eller opened this issue Aug 6, 2024 · 2 comments · May be fixed by #79
Open

Improve accessibility of swiper (no keyboard trap) #78

simon-eller opened this issue Aug 6, 2024 · 2 comments · May be fixed by #79

Comments

@simon-eller
Copy link

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
Copy link
Member

crftwrk commented Aug 13, 2024

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 added a commit to simon-eller/bs-swiper that referenced this issue Aug 15, 2024
Added option on card swipers to control via keyboard for better accessibility.
@simon-eller simon-eller linked a pull request Aug 15, 2024 that will close this issue
@simon-eller
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Todo
Development

Successfully merging a pull request may close this issue.

2 participants