Home > No built in skip link feature in Elementor? That’s bad for conversion!

No built in skip link feature in Elementor? That’s bad for conversion!

Let's push this feature request!

This is the explanation for and about a feature request that impacts accessibility in sites and web shops made with Elementor. It was posted on GitHub on October 8, 2019.

This request was closed, five days after it was posted. The developer had given a workaround in the comments. But first of all, 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.

You can’t simply set (and style) a skip link in the “no-code” Elementor way

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. 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

Is there a way to manually add a skip link?

I have some good news and some bad news for fellow Elementor users. The good news is that it is possible to manually add a correctly working skip link. The bad news is that you have to jump through several technical hoops which involve adding HTML, CSS and jQuery. As this can be overwhelming to users not used to add custom code, I’m working on a step-by-step tutorial.

You can help to push this feature request!

The Elementor developers hear our voice, when we post and support our feature requests and bug reports on GitHub. For them to literally see that thousands of users support a request, based on a solid explanation, helps them to prioritize.  I’ve dedicated an article about flexing our muscles as users.

About the author

Anne-Mieke Bovelett, headshot.

Anne-Mieke built her first website in 1998.

In the summer of 2020 an emotional outcry on Twitter about inaccessible websites turned her into a passionate accessibility advocate.

She runs a versatile international web agency in Düsseldorf, Germany.

Read more about Anne-Mieke

More Feature Requests
you can support

This is a new category on my site. New items will be gradually added.