Watch this 3-minute video of Todd Stabelfeldt using a switch device to navigate an iOS interface
As web designers, we often focus on visuals — typography, layout, animation, colour — all the details that make a website feel polished. But true design excellence lies in building experiences that work for everyone, regardless of ability.
That’s something I’ve been reflecting on more and more recently, especially after learning about Todd Stabelfeldt — a quadriplegic tech entrepreneur who uses a switch control device to navigate digital interfaces. In the short video linked above, Todd demonstrates how he uses his iPhone with just head movements and a single-button switch. It’s insightful, moving, and frankly essential viewing for any designer or developer committed to accessibility.
This kind of assistive technology relies heavily on keyboard navigation accessibility — meaning users can access every part of a website using only the Tab, Enter, and Arrow keys (or switch devices mapped to those functions). It made me realise how many websites — especially those built with visual page builders like Divi on WordPress — overlook this critical part of accessibility.
When a website lacks proper keyboard support:
-
Menus, buttons, and forms become inaccessible
-
Users can get “trapped” with no way to move forward or back
-
Essential actions (like submitting a form) become impossible
Inclusion isn’t optional — it’s a design responsibility. If we truly believe in building an internet for all, then accessibility must be baked into our design systems, not bolted on afterward.
That’s why I’ve started learning how to improve keyboard navigation accessibility on Divi sites — one of the most popular WordPress visual builders.
In the next part of this article, I’ll walk you through:
-
How to test your site’s keyboard navigation
-
What to look for in terms of accessibility issues
-
The exact code snippet and settings you can apply in Divi to make your site keyboard accessible and friendly for switch device users
Because great design isn’t just what looks good — it’s what works well for everyone.
Making the Web a Better Place — One Line of Code at a Time
At The Design Mentor, accessibility isn’t an afterthought — it’s a core principle. That’s why we’re offering a simple but powerful keyboard navigation accessibility code snippet to enable keyboard navigation on your Divi website — completely free.
Why? Because we believe inclusion is a responsibility, not a luxury.
Millions of users worldwide rely on keyboard navigation — from those with motor disabilities to people using assistive technologies. Making sure your site works for everyone isn’t just good design — it’s the right thing to do.
We want to see a web where everyone can move, click, explore, and engage — without barriers. If sharing a few lines of code helps one more person feel seen, empowered, or included online… it’s worth it.
Want the code? It’s yours — no forms, no cost, no gatekeeping.
Let’s build a better web together. (If you need help making your website fully accesible to as many different types of people as possible take a look at our website accessibility audit and we will be more than happy to help you.)
Step 1 Keyboard Navigation Accessibility: Add This CSS Code
Add this CSS to Divi > General > Custom CSS.
Change the colour codes in border and box-shadow to the correct brand colour. Ensure good contrast with predominant background colour.
a:focus-visible,
button:focus-visible,
input:focus-visible {
border: 2px solid #ffff00 !important;
outline: none !important;
border-offset: 4px !important;
}
.et_pb_button:focus-visible,
.et_pb_button:focus {
outline: none !important;
box-shadow: 0 0 0 3px #ffff00 !important;
}
Step 2 Keyboard Navigation Accessibility: PHP Snippet
Download the plugin Code Snippets and add a php file with the following code. Ensure you select display on front-end only. : –
<?php
add_action('wp_footer', function () {
?>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dropdownItems = document.querySelectorAll('.menu-item-has-children');
dropdownItems.forEach(item => {
const link = item.querySelector('a');
const submenu = item.querySelector('.sub-menu');
if (!link || !submenu) return;
const submenuLinks = Array.from(submenu.querySelectorAll('a'));
link.setAttribute('aria-haspopup', 'true');
link.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === 'ArrowDown') {
e.preventDefault();
item.classList.add('et-show-dropdown', 'et-hover');
submenu.style.display = 'block';
submenu.style.visibility = 'visible';
submenu.style.opacity = '1';
submenu.style.pointerEvents = 'auto';
submenu.style.height = 'auto';
if (submenuLinks.length) submenuLinks[0].focus();
}
if (e.key === 'Escape' || e.key === 'ArrowUp') {
e.preventDefault();
item.classList.remove('et-show-dropdown', 'et-hover');
submenu.style.display = '';
submenu.style.visibility = '';
submenu.style.opacity = '';
submenu.style.pointerEvents = '';
submenu.style.height = '';
link.focus();
}
});
item.addEventListener('focusout', () => {
setTimeout(() => {
if (!item.contains(document.activeElement)) {
item.classList.remove('et-show-dropdown', 'et-hover');
submenu.style.display = '';
submenu.style.visibility = '';
submenu.style.opacity = '';
submenu.style.pointerEvents = '';
submenu.style.height = '';
}
}, 100);
});
submenuLinks.forEach((subLink, index) => {
subLink.addEventListener('keydown', e => {
if (e.key === 'ArrowDown') {
e.preventDefault();
const nextIndex = (index + 1) % submenuLinks.length;
submenuLinks[nextIndex].focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
const prevIndex = (index - 1 + submenuLinks.length) % submenuLinks.length;
submenuLinks[prevIndex].focus();
} else if (e.key === 'Escape') {
e.preventDefault();
item.classList.remove('et-show-dropdown', 'et-hover');
submenu.style.display = '';
submenu.style.visibility = '';
submenu.style.opacity = '';
submenu.style.pointerEvents = '';
submenu.style.height = '';
link.focus();
} else if (e.key === 'Tab' && e.shiftKey && index === 0) {
e.preventDefault();
link.focus();
item.classList.add('et-show-dropdown', 'et-hover');
submenu.style.display = 'block';
submenu.style.visibility = 'visible';
submenu.style.opacity = '1';
submenu.style.pointerEvents = 'auto';
submenu.style.height = 'auto';
}
});
});
});
});
</script>
<?php
});
?>