
When using our WordPress Accessibility Checker plugin, you may have encountered “Broken Skip or Anchor Link” errors. These errors are prevalent on Elementor websites due to unresolved bugs in the Hello Elementor theme. Luckily, this is easy to fix — read on to find out how.
Understanding Broken Skip or Anchor Link Errors
A skip link allows keyboard users to bypass navigation and jump directly to the main content of a page, improving accessibility. However, keyboard-only and screen reader users will be forced to tab through the navigation if a skip link is broken which slows down their ability to interact with content.
Broken Skip or Anchor Link errors appear in Accessibility Checker when there is a skip link on the page, but no element is present with the ID that the skip link is targeting. This means the skip link is a dead-end that doesn’t do anything if clicked. Broken Skip links fail Web Content Accessibility Guidelines (WCAG) 2.4.1 Bypass Blocks (Level A).
This is how a Broken Skip or Anchor Link error looks in Accessibility Checker reports:

On Elementor websites using the Hello Elementor theme, the affected code for this error is:
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
Typically, if this problem exists on your website, you are going to see an error for every page and post on the site. A typical Elementor website will have hundreds or thousands of broken skip link errors.
Why Are Skip Links Broken in Elementor?
When using Elementor, the expected #content
ID, which the skip link targets, is often missing. This occurs because Elementor does not always generate a <main>
landmark or an element with the expected id="content"
when using the single-post, Elementor Full Width, or Elementor Canvas templates.
This issue has been reported multiple times on Elementor’s GitHub over the past three years:
<main>
tag disappears upon setting Page Layout to Elementor Full Width- Skiplink Acccessibility issue in Hello theme and WP theme 2023
- Skip links are not focusable” in some of elementor pages.
Unfortunately, Elementor has not prioritized fixing this significant bug. Absent a fix from Elementor, you can fix it manually in the Elementor editor or with a custom code snippet.
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
How to Fix Broken Skip Links in Elementor
Video Explanation
Watch this video to learn about the three possible fixes for broken skip links in Elementor or read on below.
[00:00:00] Hi, I’m Amber Hinds and I’m the CEO of Equalize Digital. And I’m going to talk to you today about something that we frequently get asked about that is flagged by our WordPress Accessibility Checker plugin. This plugin flags an issue, an error called broken skip or anchor links. A skiplink is something that allows a keyboard only user to bypass the navigation and jump to the body of the post or the page and quickly get to, into the content. without having to hit Tab, Tab, Tab, Tab, all the way through the navigation. These are, as you can imagine, very important and frequently there are instances where they don’t function on a website where the skip link is present.
[00:00:47] So We are going to take a look at an example of this in Elementor. We’ve been asked about this a lot because people who are using Elementor use our plugin and it flags this problem on their website. So I’m on just a demo site. I’ll sort of show you. This is one of Elementor’s demos. It’s time to find your luxury home, it says, and it’s a Real estate demo, for example. This is just Elementor right out of the box.
[00:01:17] I set up this template kit, I generated a bunch of extra posts, so I’d have some extra content, and then I ran that full site scan, and what I got was 119 broken skip or anchor link errors, and it’s showing here every post and every page has a broken skip or anchor link error in Elementor.
[00:01:40] There are two ways that you can fix this, and I am going to show you how to do that in this video.
[00:01:47] What does a Broken Skip or Anchor Link Error Mean?
[00:01:47] What does this mean though? Let’s go back to the homepage. If you aren’t familiar with the skip link, we have another blog post that we’ll link over to it. But essentially, If I hit Tab, the first thing that I am going to find is a skip to content link.
[00:02:02] And this exists in the Hello Elementor theme. If I hit return, then I expect that I can hit Tab. You can see my browser changed, hashtag content, so that’s where it’s trying to go. And my focus should have shifted down into the content. But if I hit Tab, you can see I’m still in the navigation. It didn’t work.
[00:02:22] So that skip link is present, but it is broken. And that’s why Accessibility Checker is flagging it.
[00:02:28] Why are Skip Links Broken in Most Elementor Sites?
[00:02:28] Why is it doing this? We’ll inspect the page. I right click to open the inspector. We can find that link right here. It’s looking for hashtag content. And normally we would want there to be a main container.
[00:02:44] Around all of our content on the page so we can see there’s a header and then there’s just a div with a data elementor type equals WP page and inside that there are just additional content containers that hold the content on this page, but there’s no main landmark indicating that this is our main content and there is nothing with an ID of hashtag content.
[00:03:09] I dug into this a little bit and it turns out this is a bug. So on Elementor’s GitHub, we can actually see that Anne Bovelett opened this issue on July 20th, 2022. This one says main ID equals content tag disappears upon setting page layout to Elementor full width.
[00:03:30] There’s another one that was opened by Ed Boons. And this one was opened September 29th, 2023, Skip Link Accessibility Issue in Hello Theme and WP Theme 2023. There’s another one from January of 2024, from a developer elite. Skip links are not focusable in some Elementor pages.
[00:03:55] I read through this. It’s not actually about them not being focusable. It’s about you can’t trigger them. So this is a major issue in Elementor. Hopefully they will resolve that. But in the meantime, what do you do if you have an Elementor website? There are two ways that you could fix this.
[00:04:12] Adding the Content ID on the Top Container (Not Recommended)
[00:04:12] I could, for example, go into my homepage.
[00:04:16] If I click edit with Elementor on my homepage.
[00:04:22] I could real quick here on my hero, which is my top content, I could potentially hack this to work by going, I can edit the container, I could go to advanced, and in the CSS ID, I could add content. Now, if I publish this change,
[00:04:48] And then I go view my page on the front end and we hit Tab and get to that skip link. If I hit return, now you can see hitting Tab takes me to this first button, explore our properties, so it bypassed the navigation. That is one way that it would technically fix the broken skip link. And if I were to rescan this page with Accessibility Checker, I would see that that broken skip link
[00:05:20] error is no longer present for the homepage. However, this isn’t the best fix because what it failed to do is it failed to add a main tag. Now I do have right here we’ve got a role equals main. On this which got added, I think, because we added the content, but the problem here is it’s only on this top hero container, you could see that all of this other content is outside of the main landmark, so.
[00:05:53] It’s not a great fix. It fixes a skip link, but it adds another accessibility problem, which is that we have a bunch of content that should be in the main landmark that is not.
[00:06:04] Putting all Content in a Container with the Main Tag and Content ID
[00:06:04] So, another thing I could do is, I could go all the way down to the bottom.
[00:06:11] I could insert a container, choose Flexbox, one column going down. I could then copy some of these. Let’s just paste inside there.
[00:06:25] So I pasted my news in. I’m going to click on my container. Click add new container inside there. I’m going to copy my testimonials. And I’m going to paste that testimonials inside there. All right, so what I’ve done is I have moved all of the page content into a container. And then what I can do is I click on this container, and under the layout settings, additional options, which is down at the bottom, there’s an HTML tag, I can toggle that to main, to say this is my main content container.
[00:07:01] Then I can go back to advanced, and on this container, I give this the content. CSS ID. And then publish it.
[00:07:12] So now if I view this page I’m going to see my homepage content. And if I inspect it, I’m going to see That there is now a main and it has that idea of content that the skip link is working, looking for. So this is a way that you can fix it without any code right in the editor of Elementor. Obviously if you have a lot of posts and pages, this is a huge time sink.
[00:07:41] It’s a lot of work. So, I’m going to show you a way that you can fix this with a code snippet.
[00:07:50] Automagically Adding Main Tags with JavaScript
[00:07:50] So we have this code snippet. It’s a JavaScript that you can load in the footer of your website. And what it will do is it will first look at every page. It will check to see if a main tag already exists. If it does already exist, it’s then going to see does it have the ID of content.
[00:08:09] If it doesn’t have the ID of content, then it’s going to add that ID to the main tag. If there is not a main tag, then it is going to look for the div that has data-elementor-type attribute of either single-post, wp-page or wp-post. And then, if that is available, it’s going to create a new main tag with the correct id and wrap it around that element.
[00:08:41] So, what I’m gonna do is I am going to grab this script, I am going to go back, I’m gonna leave the editor, and go back into WordPress,
[00:08:55] and then if I go to Elementor, Custom Code, I can click Add New Custom Code. And I want to paste the code that I’ve copied in. I also want to give it a meaningful title, so I’m just going to use this text “Add main tag with correct ID if missing to fix broken skip links in Elementor.” So that’s very descriptive, it’s going to tell me later on what this code is doing.
[00:09:24] I don’t want it to be a location of head, I want it to be after the closing body, so slash body end, and then I’m going to hit publish. Elementor is then going to ask me where do you want to do it, and I want to do it on my entire site, so I’m going to leave the default entire site, hit save and close. Now if you have caching or something, you may need to go and modify this.
[00:09:53] So, but we could just look real quick at a different page now, like the contact us page for example. We can see it now has main ID equals content. As the landmark wrapped around all of my main content without me having to do all that work of dragging and dropping all of those blocks on this page. And this was one where we could see before contact us flagged.
[00:10:21] So, what I can do then, we can just check it on this specific page. If we go load the backend WordPress editor for the page, Loading it causes it to trigger a scan. You’ll notice we went in that second. I was talking from 14 errors to 13 errors. The broken skip or anchor link error is no longer present here.
[00:10:44] And if I refresh my open issues, We see it just disappeared from open issues, and I’m now down to 117. We can also look at this script on the front end of our website. Let’s go back to the front end and we can see this was the page that I had manually added a main tag too, and we don’t have to worry about it adding an extra main tag.
[00:11:15] So on the dynamic ones. It’s adding the main around, so on the contact page, it was outside of this div with the data-elementor-type of wp-page. On this page, it’s inside of that div, because this is the one I put in the editor, and it is not going to add a second main tag, so it’s not going to cause any problems.
[00:11:39] If you do this, it will only add it to the pages that are actually missing those main tags, so they have the right semantic markup. And then all I have to do is in Accessibility Checker, go to Full Site Scan. I’m going to click New Accessibility Check. It’s going to tell me how many posts and pages are going to be scanned.
[00:12:01] Then it’s going to queue up and run through and scan all of the posts and pages.
[00:12:07] And we’ll just have to wait a minute while it runs. I usually leave this Tab open and I go take a look at something else.
[00:12:15] So I’ll come back in just a minute when it’s ready to be done. Alright, so my scan is done, it’s re scanned my entire website. I can go back over to my open issues where I was looking at all those broken skip and anchor links. I can hit refresh, and ta da!
[00:12:38] I have zero Broken Skip links or Anchor Links, because that handy little code snippet fixed it for me on all of my posts and pages. So if you see that issue flagged in Elementor, that’s all you need to do. Thanks for watching, and don’t forget to hit the like button in YouTube, and let us know if you have any questions in the comments.
Manual Fix 1: Adding the ID to Your First Container (Not Recommended)
One quick fix for broken skip links in Elementor is to assign the content
ID to the topmost container on your page. Here’s how:
- Edit the page with Elementor.
- Select the top container (e.g., the hero section).
- Go to the “Advanced” tab.
- In the “CSS ID” field, enter “content”.
- Publish the page.

This method makes the skip link functional and resolves broken skip links, which technically resolves the Broken Skip or Anchor Link errors.
However, this fix does not create a <main>
landmark that wraps all content on the page. Instead, only the container you assigned the content
ID to will be indicated as the main content.
The following image shows that the hero on the page now has role="main"
and id="content"
but that all other content on the page that should be in the main
container is left out of it.

So, while this approach does fix broken skip links, it leaves much of the page content outside of a properly structured landmark region, which is problematic for accessibility. For this reason, we don’t recommend this approach.
Manual Fix 2: Wrapping Content in a Main Tag
Here’s a better approach to fixing broken skip links manually in the Elementor editor. You can nest all content in a container and set the HTML tag on that parent container to use the <main>
tag with the content
ID:
- Insert a new container in Elementor.
- Set the container type to Flexbox with the vertical layout (you may also need to set it to full-width or make other style adjustments to maintain the design).
- Move all page content into this container.
- Under Additional Options on Layout tab for the parent container, set the HTML tag to “main”.
- Assign the CSS ID “content” to this container (as shown above).
- Publish the Changes.

This method ensures the page has a functioning skip link and the correct semantic structure, with all content wrapped in the main
landmark. It is a perfect fix to both broken skip links and missing main landmarks.
However, it can be time-consuming to manually roll out fixes like this to multiple pages. And, if the website has hundreds or thousands of pages to fix, it’s a daunting task.
Luckily, I have a code snippet that you can use to fix this “auto-magically” on your Elementor website.
Automated Fix: Using a JavaScript Code Snippet
For a more efficient solution, you can use JavaScript to automatically insert a <main>
tag with the correct ID where needed. Follow these steps:
- Go to WordPress admin.
- Navigate to Elementor > Custom Code (requires Elementor Pro).
- Click “Add New Custom Code.”
- Paste the JavaScript code shared below.
- Set the Location to “
</body> - End
“ so the code outputs in the footer. - Apply the Script to the Entire Site in the “Conditions” popup.
- Save and Publish.

JavaScript for Fixing Broken Skip Links in Elementor
This script ensures that:
- If a
<main>
tag already exists, it has the correctid="content"
. - If a
<main>
tag already exists, a second one will not be added. - If a
<main>
tag does not already exist, it will be added, wrapping around the main content on the page.
Note: the container to wrap the <main>
tag around is identified by looking for divs with a specific attributes:
- data-elementor-type=”single-post”
- data-elementor-type=”single”
- data-elementor-type=”wp-page”
- data-elementor-type=”wp-post”
If the <main>
tag is not outputting, you may need to edit the query selector on line 14 to include different selectors that match the content containers on your website.
Verifying the Fix
You’ll want to verify that your fix worked once you have fixed broken skip links on your site. You can test the functionality of your skip link by tabbing to it and then hitting return, then Tab again (as I did in the video above) to make sure it bypasses the navigation.
You should also inspect the code on a few different post types (posts, pages, any custom post types) to ensure your <main>
tag is inserted in the right place.
After you know that your fix worked, run a new full-site scan in Accessibility Checker, and you should see that all the Broken Skip or Anchor Link errors have disappeared.

By implementing this fix, your Elementor site will have a correctly functioning skip link, ensuring better accessibility and compliance with web standards. 🎉
If you have any questions, let us know in the YouTube comments or contact us for support.