Skip to content error in WordPress Elementor

As web accessibility becomes increasingly important, at Form und Zeichen, we are placing a stronger emphasis on fixing accessibility errors on our customer’s websites. A great page builder plugin for WordPress is Elementor. For small Websites, we utilize Elementor most of the time. While Elementor has a great implementation of various accessibility features, we noticed a critical error, that appears when WordPress pages are configured improperly.

In this post, we will explain how to resolve the “skip to content” error in WordPress Elementor using our client’s website, California Metals.

Check your website for the
skip to content error

WAVE is a useful plugin available for Chrome, Firefox and Edge. With this tool, we can quickly find critical accessibility errors on the website. When navigating to details, the tool shows that the “skip to content” link is broken.

WAVE tool for chrome: Analyzing California Metals

The reason why the skip to content link is broken, is that two HTML tags from Elementor’s site structure are missing. The missing <main /> tag has the id “content”, which the “skip to content” link refers to. 

Elementor Full-Width Template missing content DIV

Fix the issue

To solve this issue, change the template of affected pages to “Theme”. This way, the main template of your theme is used. I would recommend using Hello Elementor when working with the Elementor Page Builder.

use theme template for all pages in wordpress

Now, the correct HTML structure is loaded. The <main> tag with the id “content” is present. You can try out if the “skip to content” link works now by hitting the tab key when you are on the rendered page.

Elementor theme template html structure correct content

In WAVE, the error should also have disappeared. If your website has more than one error, you should resolve all of them. In addition to better accessibility, most of the fixes also improve the SEO of your website. Furthermore, some of the requirements, especially those related to contrast, enhance the clarity of your website’s design.

Share our post

Did you enjoy reading this post? If so, we would greatly appreciate it if you could take a moment to share it with your friends and colleagues on social media. Sharing valuable content helps us to spread knowledge and inspire others. Thank you for your support!


Jetzt ein Kennenlernen vereinbaren

Vielen Dank

Wir haben Ihre Nachricht erhalten und melden uns bei Ihnen.