Archived topic
how to add a label to so Navigation search form?
4 replies · Started by Stephan on May 26, 2021
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