Accessible Image Slider

Responsive Upgrades
Go To Project ↗

Making a carousel you can navigate however you want

The Challenge

The default slider component (provided by the Oxygen plugin) is visually fine. However, when I audited my own About page, I discovered that it wasn’t accessible at all. Keyboard users could tab past the entire carousel, and the bottom navigation dots had low contrast and couldn’t be resized through the Oxygen GUI. Standard accessibility tools like WAVE didn’t flag the keyboard navigation issue, so this was a problem only discovered through manual testing.

My Solution

I wrote a custom script to enhance the slider’s accessibility without altering any server-rendered HTML. Key improvements included:

  • Making slider arrows and navigation dots keyboard-focusable.
  • Adding ARIA roles and accessible names to arrows and dots.
  • Enabling keyboard interaction (Enter/Space) for all interactive elements.
  • Keeping ARIA state in sync with slide changes and hiding non-active slides from screen readers.
  • Custom CSS to increase the size and contrast of the bottom navigation dots.
  • Used a MutationObserver to automatically apply these enhancements if the slider’s DOM changed dynamically.

Results & Impact

The slider is now fully navigable via keyboard, touch, or mouse, making it inclusive for all users. Screen readers can correctly interpret and announce slides, while the improved contrast of the navigation dots addresses visual accessibility concerns. The enhancements required no changes to the backend or templates, preserving site stability.

Key Takeaways

  • Manual testing is essential; automated accessibility tools are helpful, but they may not catch all issues.
  • Plugins can be great for integrating useful components quickly, but even highly professional plugins still miss key accessibility features once in a while.
  • Progressive enhancement can make dynamic components accessible without rewriting underlying HTML.
  • Combining JavaScript and CSS allows for fine-grained control over interactive UI elements, even for UI elements provided by page builder interfaces.
  • Accessibility improvements often benefit all users, not just those relying on assistive technology.
← return to case studies