[Resolved] Search widget is not accessible

[Karen]

We are using the search widget on the navigation and the accessibility plugin is saying it’s not accessible. Here’s the error message below. It doesn’t look like we can get into the code to fix this.

Here’s the error:

Missing Form Label:
<input type=”search” class=”search-field” value=”” name=”s” title=”Search” />

[David]

Hi there,

try adding this PHP Snippet to your site:

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" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" id="nav-search" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

1. There is now a label element you can change the text of here:

<label for=”nav-search”>Search:</label>

2. On the input field there is now a placeholder="Enter your search" attribute that you change the text of.

[Karen]

Okay, thank you. I’ll try this on Monday and let you know if it works.

[David]

FYI:
Document explaining how to ADD PHP:

https://docs.generatepress.com/article/adding-php/

Let us know how you get on.

[Karen]

Thanks. That didn’t take care of it. We’re using a child theme and I added it to the functions.php file. It’s still showing the error.

[Karen]

And still getting this error:

<span class=”gp-icon icon-search”><svg viewbox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg&#8221; width=”1em” height=”1em”><path fill-rule=”evenodd” clip-rule=”evenodd” d=”M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z” /></svg><svg viewbox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg&#8221; width=”1em” height=”1em”><path d=”M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z” /></svg></span>

[Ying]

Hi Karen,

Can you try this snippet instead?

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" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

[Karen]

Shoot, no, that’s not working either. I’m still getting these two errors:

<span class=”gp-icon icon-search”><svg viewbox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg&#8221; width=”1em” height=”1em”><path fill-rule=”evenodd” clip-rule=”evenodd” d=”M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z” /></svg><svg viewbox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg&#8221; width=”1em” height=”1em”><path d=”M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z” /></svg></span>

<input type=”search” class=”search-field” value=”” name=”s” title=”Search” />

[Ying]

Can you provide an admin login to your site using the private info field so we can take a look at the backend?

[Karen]

Sure!

[Ying]

The label has been added:
https://www.screencast.com/t/I5Y1Cyl4

Can you show me the exact error you are getting?

Maybe a screenshot?

[Karen]

I think you fixed it. Can you tell me what you did? Running out now but will check later.

[Ying]

I didn’t do anything, just checked if the label is there, and it is 🙂

[Karen]

I’ll recheck the errors again, then. I cleared the cache and everything when I was still getting the errors (after I entered the code to the functions.php) so I’m not sure how they disappeared.

[Karen]

Updated:

We’re still getting these error messages:

<span class=”gp-icon icon-search”><svg viewbox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg&#8221; width=”1em” height=”1em”><path fill-rule=”evenodd” clip-rule=”evenodd” d=”M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z” /></svg><svg viewbox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg&#8221; width=”1em” height=”1em”><path d=”M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z” /></svg></span>

——————-

<input type=”search” class=”search-field” value=”” name=”s” title=”Search” />

——————–

<input type=”search” placeholder=”Enter your search” class=”search-field” value=”” name=”s” title=”Search” />

———————

[Author]

Posts