How to Add a Label to an Internal Site Search Script

[ellenjones6]

When I do a Google Lighthouse mobile audit on any of my web pages, I get dinged under accessibility for something in the Google search box I use on every page.

Here is the web page I did an audit on: https://wildadirondacks.org/adirondack-butterflies-mourning-cloak-nymphalis-antiopa.html (https://wildadirondacks.org/adirondack-butterflies-mourning-cloak-nymphalis-antiopa.html)

The failing element has to do with form elements on the internal site search box: "Form elements do not have associated labels."

The problem is apparently with this line of code:


<input name="qfront" type="text" style="width: 70%">

I got this about script four or five years ago from JavaScriptKit.com. Here is the link: http://www.javascriptkit.com/script/script2/google_site_search.shtml

Here is my code, as I adapted it for my purposes


<script>

// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Enter domain of site to search.
var domainroot="wildadirondacks.org"

function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}

</script>

<section class="searchSection">


<form action="https://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">


<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 70%">
<input type="submit" value="" style="border-style: none; background: url('images/Search-Icon-1.png') no-repeat; width: 24px; height: 20px">
</form>
<h6>*</h6>
</section>

The search seems to work just fine, but I don't know Javascript at all; and I have no idea how to address Google's accessibility concerns by adding a label. Since this part of my web page is tucked away in a little include file, I would only need to make the necessary code change once.

So how to I add a label, without messing up how the search works? Please help!

Thanks ellen

[coothead]

Hi there ellenjones6,


this is a typical label example...



<label for="search">search: </label>
<input type="text" name="qfront" id="search">

Further reading:-


Labels Required (https://www.filamentgroup.com/lab/a11y-form-labels.html)
Accessible Forms – Should Every Input Have a Label? (https://www.coolfields.co.uk/2011/04/accessible-forms-should-every-input-have-a-label/)





coothead

[ellenjones6]

Thank you. I tried this. The problem is that it messes up the design. I don't want the word search in front of the search box. I just want the search box plus the little search icon. I followed the links you suggested, which recommended hiding labels when including them would mess up the design (text for screen readers only). I just couldn't figure out how to implement the recommendations with my code. Another approach would have the word search appear inside the window, but I am not sure if that would satisfy the accessibility requirements. Can you help?