[Resolved] Search widget is not accessible

[Ying]

The codes you attached are just HTML codes, it doesn’t state what the error is.

Can you show us the error instead of the HTML code?

[Karen]

It’s the same errors/error messages I mentioned above.

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

Do you want to login again and I’ll give you the link of where to see all the open issues?

[Karen]

Here they are (same as original ones):

Broken Skip or Anchor Link (affects 21 pages):

<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>

—————

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

—————

Missing Form Label (affects 9 pages):
<input type=”search” placeholder=”Enter your search” class=”search-field” value=”” name=”s” title=”Search” />

[Ying]

Try remove the previous PHP code, using this code instead:

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

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'search' === $icon ) {
  $svg = '<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 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"></path></svg><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 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"></path></svg>';
        return sprintf(
            '<span class="gp-icon icon-search" lable="%1$s" >
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

[Karen]

Thank you. But darn, no, that didn’t work.

[David]

Which tools are you using to test accessibility ?

[Karen]

The (paid) Accessibility Checker plugin by Equalize Digital.

[David]

What if you disable the Navigation Search in Customizer > Layout > Primary Nav.
And instead display a search block directly in the nav? Is that an option? If so:

1. Enable the Elements module in Appearance > GeneratePress
2. Create a new Block Element in Appearance > Elements.
3. Add a Search Block to the element.
4. select the menu_bar_items hook

Then see if the accessibility check complains of an issue with that method.

[Karen]

Thanks. I’m not that familiar with the block editor – still learning it. But, it doesn’t look like we can change the look? It should look like the GP magnifying glass that is there but instead the default is a big input box with search button.

I know this is obvious but just to clarify, the magnifying glass is GP and the search block is built in block editor right?

I can’t even remember where I added the GP search icon from the backend to disable it.

It does look like there are more search errors, though, so I believe the block editor is also creating errors.

[David]

the magnifying glass is GP

thats correct.
It can be enabled / disabled in Customizer > Layout > Primrary Navigation -> NAvigation Search.

the search block is built in block editor

– thats correct.
There are some minimum styling options, such as display a Submit Button or Icon. Show the Label or Note show the label.

What i was wondering is whether the accessibility checker likes the Search Block. As it may be the Magnifying glass toggle that it does not like

[Karen]

Got it. I purged the cache and the same error messages are showing with the block editor unfortunately 🙁

[David]

Hmmm…. is it possible to see a screenshot of the errors, i am not sure what is actually broken ?

[Karen]

Do you mean for the block editor search? They look exactly the same as the GP icon search errors.

If you wouldn’t mind, can you look back? It’s the same errors that I posted twice on previous comments. Or, I’m happy to provide login so you can login.

[David]

Ok, so lets roll back to the top.

1. The missing label for the GP Navigation Search.
The PHP Snippet i provided here should resolve that. Note: i made a slight tweak to the code so the for attribute of the label now relates to the id of the input.

2. the other error is related to the HTML you provided here

https://generatepress.com/forums/topic/search-widget-is-not-accessible/#post-2311260

This is the Navigation search icon, but i do not what the issue is. Its simply an SVG icon that sits inside the anchor link which has a valid ARIA label.

Is there any more information on what the problem is with this ?

[Karen]

Weird, I didn’t see the email notification that you had replied.

Thanks so much. It’s still not working. All errors still there.

I’m not sure which “other error” you mean. All the ones below are for the search.

ERRORS

Error: Broken Skip or Anchor Link

<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>

ARIA hidden
<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”></path></svg>

Broken Skip or Anchor Link
<span class=”gp-icon icon-search” lable=”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”></path></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”></path></svg> </span>

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

[Author]

Posts