🔗 ♿ 🐞 "Skip links are not focusable" in some of elementor pages.

[ADeveloperElite]

Prerequisites

• I have searched for similar issues in open and closed tickets and cannot find a duplicate.
• I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

Hello community, recently I encountered a issue on specific pages where "Skip links are not focusable".

I tried looking for similar tickets but couldn't find any, also reached out to elementor support and they recommended raising it here.

Why could this problem show up? is there any other way to fix this other than by adding custom CSS to every page on the website?

Thank you...

[Daveden2]

The problem happens when you use either an Elementor Single Post Template or the Elementor Full Width Page Layout. It strips out the <main id="content"> from your theme which breaks the functionality of the skip links.
I believe you can check these two bug reports for more information:

1. ♿ 🐞 <main id="content"> tag disappears upon setting Page Layout to Elementor Full Width #19215
2. ♿ 🐞 Skiplink Acccessibility issue in Hello theme and WP theme 2023 #23919

[ADeveloperElite]

Hello Dave, Thank you for your response!
The "Full width page layout" is easily changable, but how can I adress the single post template layout? (It is used for all my website's posts).
Thanks for your reply.

[Daveden2]

@DanNeta, one workaround I think you can do in your single post template is to add a "wrapper" container with the following properties:

1. Content Width: Fullwidth
2. flex-direction: column
3. Padding: 0.
4. Under Additional settings, set the HTML tag to <main> and finally,
5. Under the Advanced Tab, give it a CSS ID of 'content'.

After that, you can add the rest of your content into that wrapper container.

[ADeveloperElite]

Thank you dave,
Just one thing I didn't understand:
Should I do this to the top container? or create a new one and add all the others inside?

Thanks in advance!

[Daveden2]

@DanNeta sorry for the late reply. Create a new container and add all your other containers inside it. Then apply those settings to the container.

Here is the structure:

Then for the Main Container:

I'll try and do a YouTube video walkthrough, showing what I mean. Pending when Elementor finally fixes the root problem.

[Daveden2]

@DanNeta here's the follow up video for reference
https://youtu.be/A5SUAf8SSGI