Fix “Multiple form labels” WAVE error when using Elementor’s sticky header + Search Form widget

Elementor duplicates the header when the “sticky header” option is turned on. This results in two headers on the webpage. The first header is the one that users can see, and it remains fixed at the top of the screen as the user scrolls down. The second header, although it exists on the page, is not visible to users. Its purpose is to act as a hidden placeholder. This hidden header prevents the rest of the page content from suddenly shifting upward when the user scrolls and the visible header becomes “sticky” (meaning it stays at the top of the screen). Essentially, the hidden header maintains the layout and spacing of the page while the visible header remains in place as the user scrolls.

This creates an accessibility problem: elements within the header have duplicated IDs. And if your header contains a Search Form widget, you will receive the following WAVE error: “Multiple form labels”.

This issue can easily be fixed adding the following javascript to your site:

				
					/**
 * Search Form
 * 
 * WAVE Fix: "Multiple form labels" caused by Elementor duplicating the header when sticky is enabled.
 */
( function( $ ) {
	$( window ).on( 'elementor/frontend/init', function() {
		elementorFrontend.hooks.addAction( 'frontend/element_ready/search-form.default', function( $scope ) {
			$( '.elementor-search-form__container' ).each( function( index ) {
				let $label = $( this ).find( 'label' );
				let $input = $( this ).find( '.elementor-search-form__input' );
				$label.attr( 'for', $label.attr( 'for' ) + '-' + index );
				$input.attr( 'id', $input.attr( 'id' ) + '-' + index );
			} );
		} );
	} );
} )( jQuery );