HubSpot module documentation
Accessible Testimonial Carousel
A testimonial carousel that a keyboard and a screen reader can both drive. The arrows are real buttons, each slide announces its position, and autoplay stops the moment a visitor takes control.
Why this one rather than any carousel
A carousel is one of the easiest things to build badly. Moving content that cannot be paused, controls that are not reachable by keyboard, and slides that a screen reader reads all at once are the usual failures. This one is built against them.
- Previous and next are
buttonelements, reachable by Tab and operable by Enter and Space. - Each slide is a
groupwitharia-roledescription="slide"and a label that says which slide it is, so a screen reader announces "3 of 5" rather than reading everything at once. - A live region announces the change when the slide moves, so a visitor who cannot see the transition still knows it happened.
- Autoplay is off unless you turn it on, and there is a play and pause control when it is on.
- The focus outline on the controls is visible rather than removed.
The European Accessibility Act has applied since June 2025, so for many companies selling into the EU this is a compliance question rather than a preference.
Set up the content
| Field | What it does |
|---|---|
| Accessible name for the carousel | What a screen reader announces when it reaches the carousel. "Testimonials" or "What our customers say" is usually right. |
| Testimonials | A repeating group, at least one. Each entry has an Image, a Name, a Role and company, and the Quote. |
Give every image real alt text describing what it shows. If a photo adds nothing beyond decoration, leave the image empty rather than adding a description of nothing; the slide renders without it.
Keep the quotes roughly the same length. A carousel reserves the height of its tallest slide, so one very long quote makes every slide that tall.
Playback
- Autoplay starts the carousel moving on its own.
- Autoplay interval is the time each slide holds, in milliseconds. 5000 is five seconds, which is about the shortest that is comfortable to read.
- Loop back to the first slide continues past the last slide instead of stopping.
If you turn autoplay on, leave the play and pause control visible. Content that moves on its own for longer than five seconds has to be pausable to meet WCAG 2.2 at level A. That is the single rule most carousels on the web fail.
Style it
| Group | Controls |
|---|---|
| Text | The quote and the name. Inherits your theme's secondary colour until you change it. |
| Background | Behind each slide. |
| Accent | The highlight colour. Inherits your theme's primary colour. |
| Corner | Corner radius on the slide. |
| Arrows | Icon and background of the previous and next controls. Check both against your slide background; a light arrow on a light slide is invisible, and it is the control someone needs most. |
| Indicators | The dot colour, and the colour of the dot for the slide you are on. Those two need to differ clearly, otherwise the indicator tells nobody anything. |
Check it before you publish
- Press Tab until focus reaches the previous or next control. The outline should be obvious.
- Press Enter. The slide changes and focus stays where it is.
- If autoplay is on, confirm the pause control works and that pausing sticks.
- Shrink the window to phone width and check the controls are still reachable and large enough to tap.
Support
Email support@freelopers.com. We answer in English, Monday to Friday, 10:00 to 17:30 CET.
Please include the page URL, your browser and device, and the steps that reproduce the problem. Please do not send passwords or API keys.