Hi,

However, I believe there may have been a misunderstanding regarding the issue. The problem is not with the icon itself or its aria-hidden attribute, but with the structure and function of the link that wraps the icon.

If we’re not mistaken, the issue occurs because the SVG icon includes the aria-hidden attribute, which makes it unreadable to accessibility tools. As a result, the parent link is marked as “suspicious” since the icon is hidden and the link lacks any accessible text or description. The span avia_hidden_link_text, which contains the word “Search” also has its display property set to none, making it inaccessible to screen readers as well.

Removing the aria-hidden attribute from the SVG icon or adjusting the visibility of the avia_hidden_link_text should help.

#top .avia_hidden_link_text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

You can also try editing the enfold/includes/config-enfold/functions-enfold.php, around line 125, change the text “Search” to “Click here to search”.

$items .=			'<span class="avia_hidden_link_text">' . __( 'Click Here to Search', 'avia_framework' ) . '</span>';

According to https://wave.webaim.org/, screen readers tend to better interpret buttons or links when it contains more descriptive text.

View post on imgur.com

If this doesn’t help, you can always try the suggestions above.

Let us know the result.

Best regards,
Ismael

Hey mosaic,

Enfold is not responsible for what displayed in search engine result pages. If you have made recent changes, then you would have to wait for a few days at least, if not weeks. You could also ask the search engine in question to crawl your site again.

Best regards,
Rikard

Hi,
I have researched this and while there is a long technical explanation for why the WAVE test tool is flagging this, I found a solution in my research. Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function remove_link_from_search_icon_and_add_it_back_on_click() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    const searchLink = document.querySelector('#menu-item-search a');
    if (searchLink) {
        // Store the original href
        const originalHref = searchLink.getAttribute('href');
        // Remove the href on page load
        searchLink.removeAttribute('href');
        
        // Add click event to restore href
        searchLink.addEventListener('click', function() {
            if (!searchLink.getAttribute('href')) {
                searchLink.setAttribute('href', originalHref);
            }
        });
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'remove_link_from_search_icon_and_add_it_back_on_click', 99 );

If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save.
I tested this on the WAVE Web Accessibility Evaluation Tool and it removed the error.

Best regards,
Mike

Hi,

Thank you for the update.

What happens when you edit line 120 of the enfold\includes\config-enfold\functions-enfold.php file?

$icon = avia_font_manager::get_frontend_icon( 'svg__search', false, [ 'aria-hidden' => 'true', 'title' => $title, 'desc' => $title ] );

Try to set aria-hidden to false:

$icon = avia_font_manager::get_frontend_icon( 'svg__search', false, [ 'aria-hidden' => 'false', 'title' => $title, 'desc' => $title ] );

Or remove the attributes completely.

$icon = avia_font_manager::get_frontend_icon( 'svg__search', false, [ ] );

Let us know the result.

Best regards,
Ismael

Hey syberknight-tb,
Unfortunately, we don’t have an element that will achieve this for you in the theme, while there are many plugins that may work for you, when I check some of them they don’t quite match, but if you spend more time testing each one you may find one.
I was able to create something that may work for you using javascript and HTML in a shortcode, on mobile it shows 1 1/2 team member cards with prev & next arrows and loop when you click to the end:

on tablet it shows 2 1/2 cards:

and on desktop it shows 3 1/2 cards:

As is it holds 8 cards, you can add more or have less, you will need to edit the HTML to add your images and text, hopefully you will be able to do this:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the code below and save.

function team_carousel_shortcode() {
    ob_start(); ?>
    
    <div class="carousel-container">
        <button id="prevBtn">←</button>
        <div class="carousel">
            <div class="carousel-track">
                <!-- START: Team Members -->
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 1"><p>Member 1<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 2"><p>Member 2<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 3"><p>Member 3<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 4"><p>Member 4<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 5"><p>Member 5<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 6"><p>Member 6<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 7"><p>Member 7<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 8"><p>Member 8<br>A short bio for the team member</p></div>
        <!-- END: Team Members -->
            </div>
        </div>
        <button id="nextBtn">→</button>
    </div>

    <style>
    .carousel-container {
        position: relative;
        width: 80%;
        overflow: visible;
        margin: auto;
    }

    .carousel {
        overflow: hidden;
        width: 100%;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .card {
        box-sizing: border-box;
        padding: 10px;
        background: #e8e8e8;
        margin: 5px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    @media only screen and (max-width: 767px) { 
        .card { flex: 0 0 62%; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1800px) { 
        .card { flex: 0 0 38%; }
    }

    @media only screen and (min-width: 1801px) { 
        .card { flex: 0 0 28%; }
    }

    .card p {
        color: #000;
     }
	.card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 100%;
    }

    #nextBtn, #prevBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #000;
        border: 2px solid #000;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

    #prevBtn { left: -50px; }
    #nextBtn { right: -50px; }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const track = document.querySelector('.carousel-track');
        const cards = document.querySelectorAll('.card');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        let currentIndex = 0;
        let cardWidth = cards[0].offsetWidth + 20;

        function updateCarousel() {
            const shift = currentIndex * cardWidth;
            track.style.transform = translateX(-${shift}px);
        }

        function moveToNext() {
            currentIndex++;
            if (currentIndex >= cards.length) {
                currentIndex = 0;
            }
            updateCarousel();
        }

        function moveToPrev() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = cards.length - 1;
            }
            updateCarousel();
        }

        nextBtn.addEventListener('click', moveToNext);
        prevBtn.addEventListener('click', moveToPrev);

        window.addEventListener('resize', () => {
            cardWidth = cards[0].offsetWidth + 20;
            updateCarousel();
        });
    });
    </script>

    <?php
    return do_shortcode(ob_get_clean());
}
add_shortcode('team_carousel', 'team_carousel_shortcode');

Then add this shortcode in a code block element on your page: [team_carousel]
Feel free to adjust the colors in the css in the code.

Best regards,
Mike

Hi,

.main-title looks like a different font or font weight

Looks like the title is set to use a lighter font weight instead of the default 400. Did you configure the Heading elements in the Enfold > Advanced Styling tab? You can also adjust it with this css:

#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .socket_color h1 {
    font-weight: 400;
}

Regarding the burger/mobile menu, try to edit the Main Menu (Icon) elements in the Advanced Styling panel, or use this css code:

#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8em;
}

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover a, #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:hover {
    background-color: #333366;
    color: #ffffff !important;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey Enfoldfanatic,

Thank you for the inquiry.

1.) You can adjust this in the Enfold > Main Menu > Burger/Mobile Menu > Menu Overlay Style settings. Set it to Full Page Overlay Menu.

2.) To align the menu with the logo on mobile view, add this css code:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #header #header_main .container.av-logo-container .inner-container {
    display: flex;
  }

  .responsive #top #header #header_main .inner-container .main_menu {
    order: 2;
    flex-basis: auto;
    top: 20px;
  }
}

3.) Could you provide a screenshot showing where you’d like the search icon to display?

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#top .menu-item-search-dropdown > a.avia-svg-icon svg:first-child {
  z-index: 0;
}

Best regards,
Rikard