Accessibility Issue with Search Icon

Hey Diana,

Thank you for the inquiry.

Looks like you have already added the aria-label attribute to the search icon link. Is this still an issue?

< li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special" role="menuitem"><a class="avia-svg-icon avia-font-svg_entypo-fontello" <strong>aria-label="Suche"</strong> href="?s=" rel="nofollow" >

Best regards,
Ismael

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

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,

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

Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike