Building accessible websites is important for everyone, particularly for those relying on keyboards, screen readers and assistive technologies. The Elementor Community discovered a significant accessibility concern related to same-page anchor links. The good news is that we have quick solutions.
The issue was initially identified by Anne-Mieke Bovelett while investigating a problem with Elementor skip links in the Hello Theme, detailed in this Github Bug Report, which David Denedo brought up in this Elementor Community Facebook Thread.
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 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> /* Please login to get the code * The code will be for the Elementor Anchor Link Accessibility Issue and Fix tutorial * Found at this URL https://element.how/elementor-anchor-link-accessibility-issue-and-fix/ */ </script>
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.
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 current over 96% and 95% browser support for "scroll-behavior: smooth;" and "scroll-padding-top: xx;", respectively, they should be considered as native browser replacements for the "anchors.js" script.
Conclusion
We hope you have found this helpful.
Co-authored by Anne-Mieke Bovelett, David Denedo and Maxime Desrosiers.
A similar version of this article appears on Anne-Mieke's blog and David's blog.