Search form – ARIA IDs are not unique

Hi,

For this demo

The Accessibility section on web.dev returns: ARIA IDs are not unique

div.tdb-block-inner > form.tdb-search-form > div.tdb-search-form-inner > input#tdb-search-form-input
<input id=”tdb-search-form-input” class=”tdb-search-form-input” placeholder=” ” type=”text” value=”” name=”s”>

Looks like it is something to do with the search form.

Sreenshot

Would you know how to fix this?

Thank you.

• This topic was modified 3 years by Alex.

Hi,

This issue is still not fixed in version: 12.5.1.

• This reply was modified 2 years by Alex.

Hi Bettina,

12.5.1 was only a demo.

12.5 had a tone of updates.

12.5 version was released way after this thread was created.

https://tagdiv.com/newspaper/

Either way, it is up to you to fix it in your theme or not.

• This reply was modified 2 years by Alex.
• This reply was modified 2 years by Alex.
• This reply was modified 2 years by Alex.

Hi,

In Version: 12.6 this still does not seem to be fixed.

Thanks

Hi @ncalex

Well, in addition to Search Form block, seems like Header Live Search block also have issues.

1. This new demo you just released uses Header Live Search. The issue is: Form elements do not have associated labels.

2. The second issue with Header Live Search is: Elements with visible text labels do not have matching accessible names. This happens when the additional text is placed in “Text” field under General > Search Icon section. Put, for example, Job Search, and the pagespeed will return error. From what I understand because aria label is set for “Search” by default, and doesn’t change to “Job Search”.

So basically, seems like none of the TD search blocks work properly.

Thanks.

• This reply was modified 2 years by Alex.
• This reply was modified 2 years by Alex.

Hi @ncalex,

Regarding Point 2 above for “Header Live Search” – Until it gets fixed in the theme by your dev, any chance you can please share what file needs to be edited to be able to change “pre-set text” that was hardcoded in html?

Thank you.

Hi @ncalex,

I think I figured it out.

wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_search.php

Change aria-label=”Search” to aria-label=”Job Search”