Results 1 to 3 of 3

Thread: How to Add a Label to an Internal Site Search Script

  1. #1
    Join Date
    Jul 2012
    Posts
    75
    Thanks
    90
    Thanked 0 Times in 0 Posts

    Default How to Add a Label to an Internal Site Search Script

    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

    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:

    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/...e_search.shtml

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

    Code:
         <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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,625
    Thanks
    1
    Thanked 250 Times in 245 Posts

    Default

    Hi there ellenjones6,

    this is a typical label example...

    Code:
    
    <label for="search">search: </label>
    <input  type="text" name="qfront" id="search"> 
    Further reading:-

    1. Labels Required
    2. Accessible Forms Should Every Input Have a Label?


    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    ellenjones6 (01-01-2020)

  4. #3
    Join Date
    Jul 2012
    Posts
    75
    Thanks
    90
    Thanked 0 Times in 0 Posts

    Default

    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?

Similar Threads

  1. Replies: 2
    Last Post: 08-21-2015, 03:49 PM
  2. Replies: 3
    Last Post: 03-01-2011, 12:40 AM
  3. Internal website search function script required
    By stevechand in forum Looking for such a script or service
    Replies: 2
    Last Post: 02-22-2011, 01:00 AM
  4. Internal Site Search script
    By Smeagol in forum JavaScript
    Replies: 5
    Last Post: 07-02-2005, 03:24 PM
  5. Internal Site Search script
    By Smeagol in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-01-2005, 06:50 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •