[Resolved] Search widget is not accessible

[David]

OK, so the top 3 errors:

Error: Broken Skip or Anchor Link

ARIA hidden

Broken Skip or Anchor Link

All of the HTML below those errors are related to the HTML that GP uses for the Search Icon.

But none of them are Skip or Anchor links. I believe this is a False Positive from the accessibility software detecting the http://www.w3.org/2000/svg in the SVGs XML Namespace. Those are not links and would not be seen by a screen reader as a link.

The ARIA Hidden, that is correct for the SVG Icon, we hide it from ARIA as the link the SVG is inside of has an ARIA-Label:

<a aria-label="Open Search Bar" href="#">

or when the close icon is present:

<a aria-label="Close Search Bar" href="#">

I would suggest speaking with accessibility software provider on this. If there is anything we can do to improve then we would be happy to hear.

And then this last one:

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

So that HTML doesn’t match that of the navigation search after adding the code i provided here.

Is this from another search block or widget on the site? If so can i see where ?

[Karen]

Okay, I’ll ask them about those things.

In terms of what you linked to, can you explain? There’s a 1 and a 2. Are these things you’re telling me to do? I didn’t think we could change the code for the GP search.

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.

In terms of another search block or widget, I’m not sure. I disabled the block search you had me test. I thought it was picking it up from the GP search.

[David]

So this code i provided:

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

That adds the missing Label to the GP Navigation Search and the Placeholder.
It looks like you have that code on your site as this is the HTML it is outputting:

<form method="get" class="search-form navigation-search nav-search-active" action="https://your-url.com/">
    <label for="nav-search">Search:</label> 
    <input type="search" placeholder="Enter your search" class="search-field" value="" name="s" title="Search" id="nav-search">
</form>

As you can see it has the label HMTL and its for attribute of nav-search matches the ID of the input field.

So this error:

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

Does not match the navigation search.

[Karen]

Okay, thanks. Yes, I definitely added the code to the functions.php file.

I wasn’t clear before but now I believe I’ve got it. You’re saying ALL the errors you mentioned above look to be an issue with the AC plugin or if not, you’re open to their feedback right (nothing you or I can do at this point). Can you confirm?

I contacted the AC plugin authors. I’ll let you know!

[David]

I wasn’t clear before but now I believe I’ve got it. You’re saying ALL the errors you mentioned above look to be an issue with the AC plugin or if not, you’re open to their feedback right (nothing you or I can do at this point). Can you confirm?

That is correct in regards to these errors:

Error: Broken Skip or Anchor Link

ARIA hidden

Broken Skip or Anchor Link

[Karen]

Can you tell me if there’s something I can do for this error? That’s what I’m not understanding:

So this error:

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

Does not match the navigation search.

[David]

Does the plugin say on what page it found the issue ?

[Karen]

It does. I’m giving you wp admin access privately so you can see.

If you go to Accessibility checker plugin > Open Issues > Fast Track tab on the top, do a search on the page (CTR + F for PCs), and you’ll see all the search errors. Then, click “review issues” then View pages.

[David]

I am not sure if that plugin is working correctly.
For example on Page 2 of Fast Track tab, i found this issue:

https://www.screencast.com/t/KCuau1xjK

I selected the 3rd page and 5th page in the list by random.
And that HTML is not present on any of those pages.
Its as if it found an error before, but never cleared the issue.

And on Page 1 of the Fast Track i see this:

https://www.screencast.com/t/QRyXdhTiCZw

And that is the HTML for the GP Navigation search which does now have a label element.

I am not sure how that plugin works, but it is reporting issues that i cannot see on the front end.

[Karen]

Okay, thanks so much for checking. I submitted a ticket and gave them this link. I think they’ll be able to see the discussion without logging in.

[David]

Yeah they will be able to see this topic 🙂
Let us know what they say.

[Karen]

Hi David, I did check on this with the AC plugin developers and they submitted a ticket on GitHub weeks ago but haven’t heard back. Can you check on that? Here’s what they said:

No, they have not responded to the issue I opened on their Github account. You can follow it here: https://github.com/tomusborne/generatepress/issues/430

Here’s what they shared with me as well:

The issue with the search icon flagging as a broken skip or anchor link is a little confusing. We’re planning to modify our rule logic so a link like you’re seeing (<a href="#">) that contains a hashtag only will no longer flag a Broken Skip or Anchor Link error.

Instead, it will flag a new error (coming soon) called “Improper Use of Link.” The problem here is that they are using a link tag when they should be using a <button> tag (or should, at least, have a role=”button” on it). I opened an issue on their Github to get them to fix this. In the meantime, you have two options: you can either leave it open pending their update (and our rule update) or you can create a global ignore for it to dismiss the issue from showing up. Technically the correct action is to keep it open because it is incorrect code from an accessibility standpoint.

[David]

Ok, so we see the GitHub Issue, and we will address this in a future update within the Themes code

Issue 1 The open/close buttons – you can add this snippet to add the role="button" attribute:

add_filter('generate_navigation_search_menu_item_output', function(){
    return sprintf(
        '<span class="menu-bar-item search-item"><a aria-label="%1$s" role="button" href="#">%2$s</a></span>',
        esc_attr__( 'Open Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in function.
    );
});

Issue 2 Input field is missing a visible label
is fixed by previous provided snippet.

Let me know if that is ok.

[Karen]

OK, I am out until Monday so will try this then unless I got a chance before then. Just wanted to make sure I posted the question. Thank you!

[David]

OK 🙂 Have a good weekend.

[Author]

Posts