ARIA IDs not unique

Resolved obahat
(@obahat)

4 years, 9 months ago
I run lighthouse from chrome dev tools. Under Accessibility, I get the error “ARIA IDs are not unique” with the following message:

The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies. Learn more.
Failing Elements
input#s

Clicking on input#s, it looks like it’s referring to:
```
.searchform input#s {
    background-color: #fff;
    border-radius: 3px 0 0 3px;
    border-right-width: 0;
    padding: 16px 18px;
    min-width: 0;
    width: 100%;
}
```
in ple.css line 384

Any idea?

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

kwbrayton
(@kwbrayton)

4 years, 9 months ago

@obahat: Be advised that my knowledge of WordPress is limited. I think I can point you in the direction of your problem but I don’t have a ready solution. Using the Chrome browser’s “Inspect” tool, I noticed you have 2 search forms with the same id=”searchform” value. One form is in your navigation menu and only becomes visible on mobile devices or if you squeeze your browser very narrow. The other form is on your side menu. Since both of those search gizmo’s use the same ID value, that’s where the error is coming from. Unfortunately, I’m not smart enough to know what you can do about it. I did find this article but I don’t know if it will solve your problem: https://linkstraffic.net/customize-wordpress-search-form/ Hopefully it will give you some ideas on what to search for. Good luck!

Thread Starter obahat
(@obahat)

4 years, 9 months ago

Thank you for the reply. That is indeed the culprit. There’s nothing we can do about the ID for the widget (unless we remove search from the sidebar). But I’m wondering if we can give a different ID in the theme, to the search in the mobile menu. Not sure if mobile menu search is part of the theme or part of core.

Theme Author Anders Norén
(@anlino)

4 years, 9 months ago

Hi @obahat,

The non-HTML5 version of the Core search form doesn’t use randomized IDs for the search field, which leads to duplicate IDs when multiple search forms are used on the same page. It’s sort of a Core issue, in other words, but I’ve worked around it in version 2.1.2 by switching to the HTML5 version of the Core search form which doesn’t have this problem.

Give it a try and let me know.

— Anders

Thread Starter obahat
(@obahat)

4 years, 9 months ago

Works perfectly. Thank you very much!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘ARIA IDs not unique’ is closed to new replies.

Tags