Elementor Anchor Link Accessibility Issue and Fix
By Anne-Mieke Bovelett on January 10, 2024
Status: up to date
Remember that skip link issue I reported in July 2022?
We have some great people in the Elementor Community with a strong understanding of coding and accessibility. Together we figured out that hundreds of thousands of sites, possibly millions, are affected by accessibility issue that leads to a world of trouble to users depending on keyboard navigation, and is still waiting for a native fix from the Elementor development team.
The script used for smooth scrolling messes with keyboard navigation
Building accessible websites is important for all your visitors, particularly for those relying on keyboards, screen readers and other assistive technologies. If you believe that this does not apply to your website, I challenge you to read this wonderful article by Rian Rietveld, called “Blind people don’t visit my website“. You’re in for a heck of a surprise!
The Elementor Community discovered a significant accessibility concern related to same-page anchor links. The good news is that we have quick solutions.
How the issue was found
The issue was initially identified in July 2022 while investigating a problem with Elementor skip links in the Hello Theme, detailed in this Github Bug Report. David Denedo brought it up in this Elementor Community Facebook Thread.
This issue is still open. Fortunately, Maxime Desrosiers responded to the Facebook thread and provided a “quick fix” which we’ll share below.
The Problem
Smooth scrolling can look visually appealing but poses challenges to keyboard users when not coded properly, as highlighted by WP Accessibility Advocate, Amber Hinds, in one of her weekly accessibility tips.
While addressing another issue I reported related to missing <main id=”content”> which breaks the skip link functionality, the Elementor Team suggested that we manually add an element with an id=”content” to restore the skip link functionality. However, we then discovered that despite the page visibly moving to the target section, the keyboard focus remained on the trigger link instead of moving to the target section. As a result, when you try to tab to the next link within the target section, the focus jumps back to the trigger link, which makes navigating with the keyboard a frustrating experience.
The Fixes
Maxime Desrosiers did some troubleshooting and proposed a couple of fixes.
The Quick Fix
To implement the quick fix across your entire website, use your preferred code snippet plugin or Elementor’s Custom Code, add the following HTML snippet:
<script>
window.addEventListener( 'elementor/frontend/init', function() {
if ( typeof elementorFrontend === 'undefined' ) {
return;
}
elementorFrontend.on( 'components:init', function() {
elementorFrontend.utils.anchors.setSettings('selectors',{});
} );
} );
</script>
<style>
html, body {
scroll-padding-top: 100px; /* adjust as needed */
}
@media (prefers-reduced-motion: no-preference) {
html, body {
scroll-behavior: smooth;
}
}
</style>Remember to adjust the scroll-padding-top value based on your specific requirements. Typically, it should be approximately the height of your sticky header, if you have one, with extra pixels to provide breathing room.
The snippet above should fix the issue across your entire website while keeping the smooth scroll functionality for users who haven’t actively set the reduce motion in their browsers.
Why it’s important to respect the “reduced motion” setting
Users can set their operation system to tell apps and browsers to reduce motion. Some users experience mild to heavy discomfort when things slide and move on a screen. For those learning about CSS, there is an important lesson here. You can actually address this with CSS.
Native Elementor Fix
This fix is more tailored for the Elementor devs. The Elementor Team should consider deprecating their anchor.js file altogether, and replace it with browser native CSS (the same as provided above).
It will be for the Elementor devs to determine the backward compatibility implications.
This approach is suggested as it is browser native and more accessibility friendly than a JavaScript based solution. It is presumed that the anchors.js file exists at all because 7 years ago, a CSS based solution didn’t exist yet.
Given the information on the “Can I Use” site, there currently is over 96% and 95% browser support for “scroll-behavior: smooth;” and “scroll-padding-top: xx;”, respectively, these should be considered as native browser replacements for the “anchors.js” script.
Conclusion
This is a classic example of technical debt. The code needs to be refactored. Let’s hope this is possible for the Elementor Development team.
I want to thank both Maxime and David for their work on this fix, and for co-authoring this article.
A similar version of this article appears on David’s, and Maxime’s websites, listed below. Both these website contain a wealth of fantastic Elementor tutorials!
