No built in skip link feature in Elementor? That’s bad for conversion!
By Anne-Mieke Bovelett on May 15, 2022
Status: updated on March 5, 2023
You can set a skip link in the beloved Elementor no-code way
The original feature request for a skip link feature was closed by Elementor. With best intentions, a member of their development team had suggested a workaround in the comments. But this workaround does not work properly in a technical sense, and second, skip links should be a built-in feature!
And this is exactly why I’m reaching out to you now, to add your voice to all who want this feature added in Elementor. The thread is still of great value in another way as well. Another user has posted a method to add a skip link manually in the comments of the feature request thread. When you use a theme that doesn’t provide a skip link feature, you can see there how you can add it manually.
If you feel intimidated by adding it manually, please come to the Elementor Facebook Community, refer to that GitHub post, and ask for help. Also feel free to tag me in that message. The group hosts an incredible number of helpful members.
Update March 5, 2023: This feature request precedes a bug report for an issue in Elementor Pro and Hello Theme
Elementor added a skip link to their own Hello Theme. Cool, but still not editable in a native Elementor way. You will find more details about this issue at the bottom of this article.
One of the many great things about Elementor is that they have widgets and settings for almost everything. But none to set and style a skip link. It’s not only generally annoying for visitors who depend on keyboard navigation. Especially in a web shop, this potentially costs you customers and revenue! A skip link is an import shortcut. If you don’t yet know what a skip link is for, below I have described the experience compared to a physical situation, when there is no shortcut available.
Imagine, you are in a huge supermarket or hardware store. For every aisle you want to get to, you are forced to walk every other aisle they have, over thirty of them. When you finally reached your destination, found your item and want to go to another aisle, you are forced past all the other aisles again. All of them! And then you wish to go to the cash register. Guess what? Yep, here you go again, you are forced past all thirty aisles, again! Let me guess… You walk away, never to return.
No shortcut, no joy
That’s what happens to visitors who depend on keyboard navigation or screen reading technology, when there is no skip link. Having to tab through the menu over and over is lousy in general. It’s even worse when you have a web shop with a mega menu.
What does that skip link do?
A skip link provides these visitors with the possibility to skip over the menu. By the way, skip links can also reside in other parts of the page than the header. Basically, on pages that have blocks of content that are repeated on multiple web pages, offering the possibility to skip these blocks is a good idea.
The negative impact of a missing skip link on revenue
In my opinion, providing the best user experience for all should be anyone’s main motivation. Excluding people by being indifferent is cruel and cold.
But in case you (or the customer you are building for) are not motivated by reasons of human decency, money might. For that, all you need to do is to read my article about the positive financial impact of great accessibility: the supermarket that saw their annual revenue increase by 13 million GBP per year, after investing only a tiny fraction of that amount in an accessible web shop.
One more thing… a skip link is obligatory for section 508 compliance.
I am referring to that here because I will add the link to this article in a comment on GitHub. That way, I can hopefully save the decision makers in the Elementor development team some time in having to research this. The excerpt below is from an official US Government website, the paged is called: Guide to Accessible Web Design & Development. A link to this specific excerpt is provided at the end of it.
Repetitive Content
2.4.1 Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated on multiple web pages.Content/Design Considerations
- Identify the repetitive content on pages and the location of where a skip mechanism should land.
- If there are multiple repeated blocks of content, provide a mechanism to bypass each block.
- The link can be made invisible until it gets focus so that sighted keyboard users can also use it.
Development Considerations
Provide a skip mechanism that is keyboard accessible.
Official website of the United States government, Section 508.gov about means to bypass a block
Update March 2023: Elementor’s own Hello Theme now has a built in skip link.
However, this has a few issues of its own. If you don’t know how to write CSS, you won’t be able to style it. At the time of this update there is still a persistent bug in Elementor Pro that sabotages the built-in skip link. When you change the page setting to “full width” the skip link stops working.
