Als Fix kann man einfach domainweit mit Javascript beim Pageload prüfen, ob <main> mit ID #content existiert, und ggf. den Inhalt nachbessern.
Ursprünglicher Code von hier, nachträglich erweitert: https://equalizedigital.com/how-to-fix-broken-skip-links-in-elementor/
Seitenweit in WordPress > Elementor > Custom Code einfügen:
- Titel: „Javascript: <main> tag für „skip to content“ link setzen, falls Elementor das nicht gemacht hat“
- Code: in <script> … </script> eingefasst
- Location: <body> – End
- Priority: 1
- Publish: Gesamte Webseite
<script>
// Source: Adapted from https://equalizedigital.com/how-to-fix-broken-skip-links-in-elementor/
// Plus tabindex addition and enhanced selectors for accessibility
document.addEventListener("DOMContentLoaded", function () {
const mainContentId = "content"; // Define the target ID
let mainElement = document.querySelector("main");
if (mainElement) {
// If a <main> tag exists, ensure it has the correct ID and is focusable
if (mainElement.id !== mainContentId) {
mainElement.id = mainContentId;
console.log(`Skip Link Fix: Added id="${mainContentId}" to existing <main> element.`);
}
if (mainElement.getAttribute('tabindex') === null) {
mainElement.setAttribute('tabindex', '-1');
console.log(`Skip Link Fix: Added tabindex="-1" to existing <main> element#${mainContentId}.`);
}
} else {
// If no <main> tag, try to find the Elementor content wrapper
let contentElement = null;
// --- ORDER OF PREFERENCE FOR SELECTORS ---
// 1. Elementor's main content container with appropriate role (most semantic)
contentElement = document.querySelector('.elementor-location-single[role="main"], main[role="main"]');
// 2. Known Elementor data types (including the newly found 'single-page')
if (!contentElement) {
contentElement = document.querySelector(
'div[data-elementor-type="single-page"], ' +
'div[data-elementor-type="single-post"], ' +
'div[data-elementor-type="single"], ' +
'div[data-elementor-type="wp-page"], ' +
'div[data-elementor-type="wp-post"]'
);
if (contentElement) console.log(`Skip Link Fix: Found content element by data-elementor-type: ${contentElement.dataset.elementorType}`);
}
// 3. Elementor container based on class (less specific than type, but often present)
if (!contentElement) {
// '.elementor-location-single' might exist even without role="main"
contentElement = document.querySelector('.elementor-location-single');
if (contentElement) console.log(`Skip Link Fix: Found content element by class: .elementor-location-single`);
}
// 4. More generic Elementor page container class
if (!contentElement) {
contentElement = document.querySelector('.elementor-page');
if (contentElement) console.log(`Skip Link Fix: Found content element by class: .elementor-page`);
}
// --- END OF SELECTOR PREFERENCE ---
if (contentElement && contentElement.tagName !== 'MAIN') {
// Create a new <main> element
mainElement = document.createElement("main");
mainElement.id = mainContentId;
mainElement.setAttribute('tabindex', '-1'); // Make it focusable
console.log(`Skip Link Fix: Creating new <main id="${mainContentId}" tabindex="-1"> and wrapping found element.`);
// Wrap the content with the new <main> element
contentElement.parentNode.insertBefore(mainElement, contentElement);
mainElement.appendChild(contentElement);
} else if (contentElement && contentElement.tagName === 'MAIN') {
// If the found contentElement IS a <main> tag already, just ensure ID and tabindex
console.log(`Skip Link Fix: Found <main> element directly.`);
if (contentElement.id !== mainContentId) {
contentElement.id = mainContentId;
console.log(`Skip Link Fix: Added id="${mainContentId}" to found <main> element.`);
}
if (contentElement.getAttribute('tabindex') === null) {
contentElement.setAttribute('tabindex', '-1');
console.log(`Skip Link Fix: Added tabindex="-1" to found <main> element#${mainContentId}.`);
}
} else {
console.warn("Skip Link Fix: Could not find a suitable main content element to target or wrap.");
// Last resort fallback: Target the first Elementor section?
const firstSection = document.querySelector('.elementor-section');
if (firstSection && !document.getElementById(mainContentId)) {
firstSection.id = mainContentId;
if (firstSection.getAttribute('tabindex') === null) {
firstSection.setAttribute('tabindex', '-1');
}
console.warn(`Skip Link Fix: As fallback, targeted first Elementor section with id="${mainContentId}" and tabindex="-1".`);
}
}
}
});
</script>