Not everybody uses a mouse. People navigating by keyboard, and anyone using a screen reader, need a way through a carousel that does not involve pointing at a small arrow.
Switching keyboard navigation on lets the arrow keys move the slides.
Before You Start
- Edition: Pro — the Carousel Anything block needs Nexter Blocks Pro.
- Block to enable: Carousel Anything, switched on under Nexter > Blocks in your WordPress dashboard.
- A Carousel Anything block with several slides — see the Carousel Anything guide.
- Test with several slides. A carousel with one slide has nothing to move to, so most settings will look broken when they are simply idle.
Steps
- Select your Carousel Anything block.
- Switch keyboard navigation on.
- Publish, then use the left and right arrow keys on the real page.
- Tab through the page as well, to check the carousel controls can be reached.
How It Behaves
The setting is written into the carousel configuration as a mode rather than a simple toggle.
- Measured on a published page: switching it on rendered
keyboard: "global"; with it off,keyboard: false. - Global means the whole document. Measured, the value is
globalrather than a focus-scoped mode, so the arrow keys drive the carousel without the visitor having to focus it first. - That is convenient and has a catch — see the limitations below, particularly if there is more than one carousel on the page.
- It is off by default, measured on an untouched carousel.
- Every setting ends up in one place. The block writes its whole configuration into a
data-splideattribute on the carousel, which is what the slider script reads. If a setting is not doing what you expect, that attribute is where to look. - Measured with Nexter Blocks Pro deactivated: the carousel renders nothing at all — no wrapper, no configuration and no slides. This is a Pro-only block.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, nothing renders.
- Two carousels on one page will both respond. Because the mode is global, a single arrow key press can move both. Use it on one carousel per page.
- It can interfere with other arrow-key behaviour on the page, such as a map or a custom control.
- It is not a substitute for reachable controls. Visible arrows or dots that can be tabbed to help more people than the arrow keys alone — see the arrows and dots guide.
- There is nothing on screen announcing it, so a visitor has to guess the arrow keys will work.
Troubleshooting
The arrow keys do nothing
Check the setting is on and Nexter Blocks Pro is active. Measured, it renders keyboard: "global".
Both my carousels move at once
That is the global mode doing exactly what it says. Switch keyboard navigation off on all but one carousel.
The arrow keys scroll the page instead
Another element has focus and is consuming the key press. Click on an empty part of the page first.
It interferes with another plugin
A global key handler will collide with anything else listening for arrow keys. Switch it off and rely on visible arrows instead.
