Site logo

Archived topic

how to add a label to so Navigation search form?

4 replies · Started by Stephan on May 26, 2021

Viewing posts 1–5 of 5

Hi all,

i saw here a thread about how to label the search form correctly for accessibility. The code which were given works correctly as solution so i tried the same on my site. But now i have the problem, that the web accessibility tool (wave.webaim.org) tells me, that a form control has more than one label associated with it. The notice before was that a form has a title but no label associating with

My site: https://design-netzwerk.eu/

Thanks in advance for your tipps,

Stephan

The code which were given:

add_filter( 'generate_navigation_search_output', function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<label for="nav-search">Search:</label>
<input type="search" class="search-field" id="nav-search" value="%2$s" name="s" title="%3$s" />
<input type="hidden" name="post_type" value="product" />
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' )
);
} );

Excuse me, i have one more question. How to solve this problem? I don't know, where to change it: "Title attribute text is the same as text or alternative text."
It's the code for screenreader:
a href="#content" title="Zum Inhalt springen"
Zum Inhalt springen

Thank you

Hi there,

1. the issue arises because of the Mobile Header also has the navigation search - which results in 2 x Form HTML, and therefore 2 x label attributes.

However this can be ignored as only one Navigation Element is displayed at any one time, and screen readers should detect the single navigation that is being displayed.

2. for the skip-link text - Tom provides a snippet here to remove the Title attribute:

https://generatepress.com/forums/topic/wcag-2-0-aa-redundant-title-issue/#post-825091

Ah, great to hear David, thank you

You're welcome

This archived topic is closed to new replies.