metafizzy / metafizzy/flickity

Not accessible when used as a content slider

Open
#776 13 comments 5 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.6k
Forks
593
PR merge metrics
No merged PRs in 30d

Description

Hello David, I've tried to use flickity as a content slider (e.g. where slides have actual content, links, etc.) and seems to be not accessible at all.

First of all, I understand there is not your fault because there are no stable conventions on that. But within current setup you can focus the slides that are not in the viewport which seems to be very confusing. I also created a question on StackExchange:
https://ux.stackexchange.com/questions/118607/content-slider-carousel-accessibility-best-practices

# Slide out of the view
**Test case:** https://codepen.io/runnick/pen/MXKqLY
E.g. try moving slide 1 off the screen and then focus: it will focus on the link but since slide is invisible there is no cue it's focused. One workaround is to only allow focus slides that are currently on the screen.

# asNavFor
**Test case:** https://codepen.io/runnick/pen/QxyZwL

This one also doesn't work because even if you add tabindex=0 to the navigation slide to make it focusable, Enter does nothing, and to get back to the active slide you need to tab back through all previous nav item (but that seems to be a behavior for all sliders with the navigation).

# Carousel (groupCells)
I'm still researching here, but if someone has suggestions on how it should work, please do so.

Do you think you're interested in working on the solution? If not, I understand, but maybe you could provide some suggestion on what will be the best way to make it better. Thanks!

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the off-screen focus case in the linked MXKqLY CodePen and the asNavFor keyboard case in QxyZwL, then review the related carousel and groupCells behavior described in the issue. Define expected keyboard and focus behavior for invisible slides, navigation slides, and grouped cells; the work is done when those cases have an agreed accessible behavior and the regressions are covered.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.