Key takeaways
- In addition to focus manipulation, focus trapping increases the accessibility of elements like pop ups by restricting the user's focus and prevents them from getting lost on the site.
- Keyboard Navigation Challenges: Users who navigate websites with a keyboard, rather than a mouse or touchscreen, may struggle with certain interactions, such as menus or pop-ups.
- Focus Manipulation Benefits: Moving the user’s focal point to newly opened elements like pop-ups makes navigation smoother and more intuitive for keyboard users and those using assistive technology.
- Focus Trapping for Accessibility: Focus trapping restricts the user’s navigation to within a specific element (e.g., a pop-up), preventing them from accidentally losing focus and getting lost on the site.
- Breaking UI Development Rules for Accessibility: While it’s generally advised not to alter a user’s perspective, strategically moving focus points can significantly enhance accessibility.
- Easy Implementation: Focus manipulation and trapping can be implemented with simple code, available as an ES Module in TypeScript on GitHub, making it easy to integrate into your projects.
Navigating a website shouldn't be a challenge for anyone, regardless of how they interact with it. While many users rely on a mouse or touchscreen, others depend on a keyboard or assistive technology. Ensuring an accessible user interface is crucial for these individuals. This can be done effectively with focus manipulation and focus trapping—techniques that enhance the accessibility of web elements like pop-ups and menus. But in UI development, there's fundamental rule is to avoid interfering with the user’s perspective—don’t move focus, scroll the page, or reposition the cursor without user input. However, when it comes to accessibility, breaking this rule can sometimes be beneficial. This is the intersection where UX best practices and accessibility meet.
Navigating with a keyboard
Not everyone uses a mouse or touchscreen to interact with a website; many users rely on a keyboard. This could be due to a permanent disability affecting their ability to use a mouse, or a temporary condition such as having an arm in a cast. Additionally, visually impaired users often use a keyboard or assistive technology that mimics keyboard functionality.
Keyboard users navigate websites by moving from one link or button to another using the tab key. The focus point, usually highlighted in blue, indicates their current position on the site. For links that open new pages, this works seamlessly. However, issues arise when a link opens a menu or triggers a pop-up without loading a new page. This is where focus manipulation and focus trapping become essential for accessibility. Here's how navigating via a keyboard looks:
Focus manipulation
Imagine you’re using a keyboard to navigate and add an item to your cart. A pop-up message confirms the addition. If we don’t adjust the focus point, it remains on the ‘add to cart’ button. To navigate to the pop-up using the keyboard, you’d have to press the tab key multiple times. This is especially disorientating for blind users who cannot see the pop-up.
To address this, we move the focus point to the pop-up. This allows users to navigate the pop-up easily using the tab key or close it with the escape key. This adjustment makes pop-ups significantly more accessible for keyboard users and those using assistive technology.
Focus trapping
Focus trapping takes accessibility a step further. When a pop-up appears, if we don’t implement focus trapping, users can accidentally navigate away from the pop-up and get lost on the site.
To prevent this, we create a list of all focusable elements within the pop-up. When the user reaches the end of this list (e.g., the last button or link in the pop-up), the focus loops back to the first element. This ensures the user’s focus remains within the pop-up, enhancing navigation and preventing disorientation.
Implementing focus manipulation and trapping
The code for focus manipulation and trapping is surprisingly simple and available on GitHub as an ES Module, written in TypeScript. You can easily integrate it into your projects by using setTrap() when the pop-up opens and releaseTrap() when it closes.
Enhancing website accessibility through focus manipulation and trapping ensures a smoother, more intuitive navigation experience for keyboard and assistive technology users. By thoughtfully implementing these techniques, you can create a more inclusive online environment that meets the needs of all users.
Next steps
No matter what stage you're at in your search for the perfect web platform or digital marketing tool for your venue, we'll help you get the information you need to make the right decision.
- Join our community of venues and get insider insights.
Learn how to get the most out of Peppered, gain insights from other venues, and add new features to the Peppered development roadmap. Visit CultureHub. - Want to see how Peppered works?
We’re proud of how easy we make it for venues to manage their website. That’s why live event venues around the world trust Peppered. Book a personalised demo. - Looking to partner with us?
If you’re a technology provider, design agency or supplier for the arts and culture sector, we’d love to hear from you. Contact us here. - Want to learn more about digital tools for venues?
Explore our industry insights and expert advice by heading over to our resources page, YouTube channel or subscribing to our newsletter.
