-
Posts
-
Setting the footer as a page, in the html structure, the <main> tag is duplicated leading to seo and accessibility problems. How to solve?
Hey idemadv,
Thank you for the inquiry.
This can be adjusted, but you’ll need to modify the file at themes/enfold/config-templatebuilder/avia-shortcodes/section/section.php. Look for the code around line 1883 and replace main with div or section.
if( ! empty( $main_container ) ) { $markup = 'main ' . avia_markup_helper( array( 'context' => 'content', 'echo' => false, 'custom_markup' => $custom_markup ) ); $avia_section_markup = 'main'; }Another option is to create a custom script that dynamically switches the main wrapper to another element or tag.
— https://stackoverflow.com/questions/918792/use-jquery-to-change-an-html-tag/20469901#20469901
Best regards,
IsmaelI believe there’s a general issue with how the <main> tag is being handled. The tag should be unique and placed between the <header> and <footer>. However, I’m seeing it also added within the <footer> tag itself. Additionally, I’m observing it being placed inside a <section> tag. It would be more appropriate for the <main> tag to be uniquely and natively inserted in header.php and footer.php (referring to typical PHP template files for header and footer content), regardless of the sections inserted via a builder.
Enfold uses that main sometimes in a bit different way : as id=”main” and with role=”main”
if there is a main tag – enfold sets it to role=”main”
see here some thought to it. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/main_role
But as with the main tag, the main role should only be used once in the document!Edit: yes – now i see that on using a page as footer – there is another main tag. …
The solution of Ismael will work – but it would be nice to have this only for the page used as footer-page.
we do not need to edit the section.php
maybe it is enough to have a child-theme footer.php to have no main tags inside the page that is the footer-page.
find:$content = Avia_Builder()->compile_post_content( $post );after that line add :
// NEW: Remove <main> tags AND the role="main" attribute from the compiled content of the footer page // Step 1: Replace opening <main> tag (with any attributes) with <div and preserve attributes, but remove role="main" // This regex specifically targets 'role="main"' within the attributes and removes it. $content = preg_replace('/<main([^>]*)role="main"([^>]*)>/is', '<div$1$2>', $content); // Step 1b (Fallback): If role="main" was not present, or if it's the only attribute, // simply replace <main...> with <div...> // This ensures that if the main tag didn't have role="main", it still gets converted to div $content = preg_replace('/<main([^>]*)>/is', '<div$1>', $content); // Step 2: Replace closing </main> tag with </div> $content = str_replace('</main>', '</div>', $content);it will replace the main tag with div tag – and removes the role=”main”
use that edited footer.php inside your child-theme root directory.__________
shortform without the comments:
$content = preg_replace('/<main([^>]*)role="main"([^>]*)>/is', '<div$1$2>', $content); $content = preg_replace('/<main([^>]*)>/is', '<div$1>', $content); $content = str_replace('</main>', '</div>', $content);
- You must be logged in to reply to this topic.