While working on accessibility adjustments for an existing website, I encountered an issue with the Elementor Flip Box widget—a popular tool for displaying content in a dynamic and interactive manner. In its original configuration, the button on the flip box’s backside couldn’t be accessed using keyboard navigation; when the flip box was focused, it would flip to the front side, making it impossible for keyboard users to interact with the backside content.
Committed to preserving the website’s original design while ensuring it meets accessibility standards, I developed a solution to make the Flip Box fully accessible with keyboard navigation. This fix allows the flip box to remain accessible and functional, aligning with web accessibility guidelines without compromising the site’s visual appeal.
You can easily apply this fix by copying and pasting the code into Elementor’s custom code area, ensuring it’s included on every page featuring a flip box. Enjoy a more accessible web experience, thanks to a simple yet effective adjustment.
See example (use tab to keyboard navigate):
This is the heading
<script>
jQuery(document).ready(function($) {
// Function to handle focus event
$('.elementor-flip-box__button').on('focus', function() {
// Navigate to the .elementor-flip-box relative to the focused button
var $flipBox = $(this).closest('.elementor-flip-box');
$flipBox.find('.elementor-flip-box__back').css({
'opacity': '1',
'z-index': '9',
'backface-visibility': 'visible'
});
if ($('.elementor-flip-box--effect-flip').length) {
$('.elementor-flip-box__back').css('transform', 'rotateX(0) rotateY(0)');
}else{
$flipBox.find('.elementor-flip-box__back').css({
'transform': 'none',
});
}
});
// Function to handle blur event
$('.elementor-flip-box__button').on('blur', function() {
// Navigate to the .elementor-flip-box relative to the blurred button
var $flipBox = $(this).closest('.elementor-flip-box');
$flipBox.find('.elementor-flip-box__back').css({
'opacity': '',
'z-index': '',
'transform': '',
'backface-visibility': ''
});
});
// Check if the element with the specific class exists
if ($('.elementor-flip-box--effect-flip').length) {
// Set up event listeners for focus and blur events on the button
$('.elementor-flip-box__button').on('focus blur', function() {
$('.elementor-flip-box__front').css('transform', 'rotateX(0) rotateY(0)');
});
}
});
</script>
