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