Elementor anchor links: Accessibility issue and fix

Introduction

Building accessible websites is important for everyone, especially those relying on keyboards, screen readers and assistive technologies. The Elementor Community recently discovered a significant accessibility concern impacting same-page anchor links. The good news: we have a quick solution!

This issue was originally identified by our Community Accessibility Expert, Anne-Mieke Bovelett, while investigating a Hello Theme Skip Link issue (detailed in this Github Bug Report). It was then brought up by David Denedo in an Elementor Community Facebook Thread. Our CSS & JS Expert, Maxime Desrosiers, has provided his “quick fix” below, which will have you back on track.

The problem

Smooth scrolling, while looking visually appealing, can create navigation obstacles for keyboard users when not coded properly, as WP Accessibility Advocate, Amber Hinds, highlights in her weekly accessibility tips.

While addressing a separate issue related to missing <main id="content"> breaking skip link functionality, the Elementor Team suggested that we manually add an element with an id="content" to restore the functionality. However, we 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 tabbing to a subsequent link within the target section, the focus jumps back to the trigger link, making navigating with the keyboard a frustrating experience.

The fixes

Maxime Desrosiers, through his troubleshooting, proposes two solutions.

The quick fix

For a website-wide implementation, use your preferred code snippet plugin or Elementor’s Custom Code to add this 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 needs. It should typically match the height of your sticky header (if present) with additional pixels to provide breathing room.

This snippet should fix the issue across your entire website, while preserving smooth scrolling for users who haven’t opted for reduced motion in their browsers.

Native Elementor fix

This fix is more tailored for the Elementor developers. The Elementor Team should consider deprecating the anchor.js file in favour of browser-native CSS (provided above).

The Elementor Team should properly assess backward compatibility implications. The suggested approach stems from a browser-native solution being more accessibility-friendly than JavaScript-based ones. The assumed reason for the existence of the anchor.js file likely dates back to a lack of CSS-based solutions 7 years ago.

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 found this article helpful!

Co-authored by Anne-Mieke Bovelett, David Denedo and Maxime Desrosiers. A similar version of this article appears on Anne-Mieke’s and Maxime’s blogs.