Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1486317

    Setting the footer as a page, in the html structure, the <main> tag is duplicated leading to seo and accessibility problems. How to solve?

    #1486384

    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,
    Ismael

    #1486433
    #1486858

    I 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.

    #1486874

    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. …

    #1486877

    The solution of Ismael will work – but it would be nice to have this only for the page used as footer-page.

    #1486881

    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);
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.