Venture Theme Search Bar - making ADA compliant

Solved
stevereske
Tourist
4 0 0

I'm working to eliminate accessibility errors that have been found in my site header using the WebAim Wave accessibility plugin for Chrome.  With my header, specifically the search bar, it is producing a Multiple form labels error.  It states that basically a form control has more than one label associated with it.  So, I'm looking for help in understanding which form label can be removed and how.  

the offending code seems to be this:

<input type="search" name="q" id="SiteNavSearch" placeholder="Search" aria-label="Search" class="site-header__search-input">

It appears in line 10 and line 127 of the header.liquid file.  Hoping that one of these is able to be removed or edited to make this error go away.

Thanks!

 

 

0 Likes
Michal_Morek
Shopify Partner
412 33 65
Hello Stevereske,
Kindly welcome to the Shopify Community.
I properly read your problem, and I dearly need to carefully analyze your website to provide a solution here.
Would you kindly share your website URL and if your website is password protected then also provide a password?
 
I will carefully check out the issue and provide a solution to you here.
If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes
Michal_Morek
Shopify Partner
412 33 65

This is an accepted solution.

We have three different ways to fix your issue so pick one of these :

1. Remove the aria-label attribute from input tag in your Liquid file :

 

 

<label for="SiteNavSearch" class="visually-hidden">Search</label>

<input type="search" name="q" id="SiteNavSearch" placeholder="Search" class="site-header__search-input">

 

 

2. Just remove label tag line. The aria-label attribute can be used on input tag instead of invisible label:

 

 

<input type="search" name="q" id="SiteNavSearch" placeholder="Search" aria-label="Search" class="site-header__search-input">

 

 

If a form field has a aria-label attribute but no label tag, screen readers will treat the aria-label as a label.

3. Remove label tag line and use title attribute on input tag. Don't forget to remove aria-attribute tag:

 

 

<input type="search" name="q" id="SiteNavSearch" placeholder="Search" title="Search" class="site-header__search-input">

 

 

If a form field has a title attribute but no label, screen readers will treat the title as a label.

Please let me know if you have any further questions.

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
stevereske
Tourist
4 0 0

Thank you for your help Michal. #3 did the trick!

 

 

0 Likes
Michal_Morek
Shopify Partner
412 33 65

Hi @stevereske 

Hope you're having a great day!

You're welcome. If you have any further questions, please do reach out either here on the forum, or via private message/email.

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes