Carousel controls can be visually understandable while still being unusable for visitors who rely on screen readers. In this case, an accessibility audit found that an Owl Carousel implementation in WordPress used previous, next, and pagination controls without accessible names. A custom child-theme script named owl-a11y.js was added to improve the carousel controls without editing the plugin directly. The same audit also identified videos without captions, which required a separate content strategy rather than the JavaScript fix used for the carousel.
Issue background
A WordPress accessibility review used AudioEye to identify manual issues that could not be resolved automatically.
The findings included:
- Videos without captions on several pages
- Previous and next buttons without accessible names
- Carousel pagination controls without accessible names
- Older or duplicate pages that needed editorial review
The button issues appeared inside an Owl Carousel generated by a plugin. Because the controls were created dynamically, they were not directly editable through the normal WordPress page editor.
The audit specifically flagged the carousel’s:
- Previous button
- Next button
- Radio-style pagination controls
Diagnosis
The visible carousel arrows and pagination dots did not provide enough information to assistive technology.
A sighted user could infer that an arrow moved the carousel backward or forward. A screen reader, however, needed an accessible name such as “Previous slide” or “Next slide.” Pagination dots also needed labels that explained which slide each control selected.
The issue was generated by the plugin’s frontend markup rather than by editable page content. Modifying the plugin files directly would have been risky because future updates could overwrite the changes.
The safer solution was to add a child-theme JavaScript file that enhanced the rendered Owl Carousel controls after the plugin created them.
The audit also found missing video captions, but that was a separate issue. The task did not document that captions were added. The recommendation was to move or upload the videos to a platform such as YouTube or Vimeo, where captions could be generated and reviewed, or to provide properly synchronized captions through another supported video workflow.
Resolution steps
- Reproduce the scanner finding. Open the affected page and confirm which carousel controls are reported as missing accessible names.
- Inspect the generated markup. Use browser developer tools to identify the Owl Carousel navigation and pagination selectors.
- Test with a screen reader or accessibility tree. Confirm that the controls are announced without useful names before applying the fix.
- Avoid editing the plugin directly. Place the accessibility enhancement in a child theme or custom plugin so updates do not overwrite it.
- Create a dedicated script. Add a file such as
owl-a11y.jsto keep the accessibility logic separate from unrelated theme code. - Label the previous control. Add an appropriate
aria-labelsuch as “Previous slide” when the plugin does not provide one. - Label the next control. Add an appropriate
aria-labelsuch as “Next slide.” - Label pagination controls. Give each dot or button a meaningful label such as “Go to slide 1,” “Go to slide 2,” and so on.
- Confirm button semantics. If the plugin uses non-button elements, verify whether they need a role, keyboard support, or a markup adjustment.
- Preserve visible focus. Make sure keyboard users can see which carousel control currently has focus.
- Handle dynamically initialized carousels. Run the enhancement after Owl Carousel initializes, and repeat it if the plugin rebuilds the controls.
- Enqueue the script through WordPress. Load the child-theme file only where needed and after the carousel dependency.
- Retest with AudioEye. Run the same page scan and verify that the missing-accessible-name finding is resolved.
- Test manually with a keyboard. Confirm that previous, next, and pagination controls can be reached and activated without a mouse.
- Review video issues separately. Identify every video without captions and choose a captioning workflow rather than treating the carousel script as a complete accessibility fix.
A simplified JavaScript approach might look like this:
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.owl-prev').forEach(function (button) {
button.setAttribute('aria-label', 'Previous slide');
});
document.querySelectorAll('.owl-next').forEach(function (button) {
button.setAttribute('aria-label', 'Next slide');
});
document.querySelectorAll('.owl-dot').forEach(function (button, index) {
button.setAttribute('aria-label', 'Go to slide ' + (index + 1));
});
});The production script should match the plugin’s actual markup and initialization behavior. Some Owl Carousel implementations rebuild their navigation dynamically, which may require running the labeling function after carousel events rather than only on the initial page load.
Final outcome
A custom owl-a11y.js file was created and added to the WordPress child theme.
The script addressed the Owl Carousel controls identified by the accessibility scan, including the previous, next, and pagination elements. The completed task confirmed that the carousel issue was resolved.
The video-caption findings remained separate recommendations and were not documented as completed changes. Those videos still required an approved captioning or hosting workflow.
The key lesson is that plugin-generated accessibility issues should be corrected in a maintainable layer. A child-theme script can enhance dynamic controls without creating an update-fragile modification inside the plugin itself.
For help improving WordPress accessibility, fixing Owl Carousel controls, or reviewing caption and keyboard-navigation issues, contact Freshy.
