Make your Elementor Pro Flipbox widgets accessible to everyone.
Elementor Pro's Flipbox widget is a popular interactive element that reveals content when users hover over it. However, out of the box, Flipboxes are completely inaccessible to:
- Keyboard users who cannot use a mouse
- Screen reader users who rely on assistive technology
- Users with motor impairments who use alternative input devices
- Power users who prefer keyboard navigation
Without this plugin, Flipbox content is effectively hidden from millions of users with disabilities.
- 15% of the world's population lives with some form of disability (WHO)
- 2.2 billion people have vision impairments globally
- Web accessibility is a legal requirement in many jurisdictions (ADA, WCAG, EAA)
- Accessible websites rank better in search engines
- Inclusive design improves UX for all users, not just those with disabilities
This lightweight plugin automatically enhances all Elementor Flipbox widgets with full keyboard and screen reader support—no configuration required.
- Full Keyboard Navigation — Tab to focus, Enter/Space to flip, Escape to close
- ARIA Attributes — Proper
role="button",aria-expanded, andaria-hiddenstates - Screen Reader Announcements — Clear feedback when flipboxes open and close
- Focus Management — Intelligent focus handling that doesn't trap users
- Multiple Flipbox Support — Works flawlessly with any number of flipboxes on a page
- High Contrast Mode — Enhanced visibility for users with low vision
- Reduced Motion Support — Respects
prefers-reduced-motionfor users sensitive to animation - Visible Focus Indicators — Clear, WCAG-compliant focus outlines
| User Type | Before This Plugin | After This Plugin |
|---|---|---|
| Keyboard-only users | Cannot access flipbox content at all | Full keyboard control with Enter/Space/Escape |
| Screen reader users | Content is invisible to assistive tech | Announced as interactive button with state changes |
| Motor impairment users | Hover-only interaction is impossible | Click or keyboard activation works equally |
| Low vision users | No visible focus indicator | High-contrast focus ring with 3px outline |
| Vestibular disorders | Animations may cause discomfort | Reduced motion automatically respected |
- Legal Compliance — Meet WCAG 2.1 AA requirements for interactive elements
- Broader Audience — Reach users who were previously excluded
- Better SEO — Accessible sites are favored by search engines
- Reduced Liability — Avoid accessibility lawsuits and complaints
- Professional Quality — Demonstrate commitment to inclusive design
Before (Inaccessible):
User tabs through page → Flipbox is skipped entirely
Screen reader: [silence]
Keyboard user: Cannot reveal back content
After (Accessible):
User tabs through page → "Learn More. Press Enter or Space to flip."
User presses Enter → Flipbox flips, focus moves to back content
Screen reader: "Learn More, button, expanded"
User presses Escape → Returns to front, ready to continue
- Download the latest release
- Go to WordPress Admin → Plugins → Add New → Upload Plugin
- Upload the ZIP file and click Install Now
- Click Activate
- Download and extract the plugin
- Upload the
accessible-flipbox-elementorfolder to/wp-content/plugins/ - Activate via WordPress Admin → Plugins
- WordPress 5.0+
- Elementor Pro (with Flipbox widget)
- PHP 7.0+
No configuration needed. Once activated, the plugin automatically enhances all Flipbox widgets on your site.
| Key | Action |
|---|---|
Tab |
Navigate to/between flipboxes |
Enter or Space |
Flip the focused flipbox |
Escape |
Return to front side |
Shift + Tab |
Navigate backwards |
- Keyboard Test: Tab through your page—each flipbox should receive visible focus
- Activation Test: Press Enter or Space—the flipbox should flip to reveal back content
- Screen Reader Test: Use NVDA, JAWS, or VoiceOver—state changes should be announced
- Escape Test: Press Escape while flipped—should return to front and maintain focus
The plugin injects accessible behaviors into Elementor's Flipbox widget:
- Makes containers focusable with
tabindex="0" - Adds semantic role with
role="button" - Manages expanded state with
aria-expanded - Hides inactive content with
aria-hidden - Controls tab order by toggling
tabindexon back content - Provides visible focus with CSS focus indicators
| Class | Purpose |
|---|---|
.afe-flipped |
Applied when flipbox is showing back side |
[data-afe-init="true"] |
Marks initialized flipboxes |
- Chrome, Firefox, Safari, Edge (latest 2 versions)
- Works with all major screen readers (NVDA, JAWS, VoiceOver, Narrator)
- Enhanced README documentation with accessibility benefits
- Added GPL-2.0 license file
- Reorganized plugin file structure
- Fixed multiple flipbox navigation bug
- Flipbox container is now focusable (not just the front)
- Tab order no longer breaks when a flipbox is flipped
- Each flipbox maintains independent state
- Focus management separated for mouse vs keyboard users
- Added ARIA attributes and keyboard support
- Initial release
Contributions are welcome! Please feel free to submit issues or pull requests.
GPL v2 or later — https://www.gnu.org/licenses/gpl-2.0.html
Stephen Kinzey, PhD
sk-america.com
Making the web accessible, one widget at a time.