Accessibility for Google custom search

Associate
Joined
19 Feb 2009
Posts
338
Hi all,

I am currently making my website more accessible and have attached keys to all the important parts using the standard layout. However, I am using Google custom search and can't figure out how to add accesskey="4" to it. Anyone got any idea how I can make it accessible? I have searched Google and the only example I found looked nothing like the code I have used so wasn't much help. Code below just in case that helps and thanks in advance.

Code:
 <div class="search">
    <form action="http://website.com" id="cse-search-box">
      <input type="hidden" name="cx" value="partner-pub-8509363477233538:k0soo8tjfja">
      <input type="hidden" name="cof" value="FORID:10">
      <input type="hidden" name="ie" value="ISO-8859-1">
      <input type="text" name="q" class="textInput" size="31">
      <input type="image" class="btn" src="/images/btn_go.gif" name="sa" value="Search">
    </form>
    <script type="text/javascript" src="http://www.google.co.uk/cse/brand?form=cse-search-box&amp;lang=en"></script>
  </div>
 
Well the whole search script is done with JavaScript so I question the accessibility on it to start with. As a last resort you could accesskey to the search container?

I wonder whether you can use this HTML Version?
 
I'm sure JavaScript is fine as long as it gives feedback to the user and it's accessible via assistive technologies

Can't help with the op though I'm afraid :(
 
Another day and my Google powers have returned enough for me to cobble together a solution. I am sure a lot of websites use Google custom search so here is the code that works for me to make it that bit more accessible.

Code:
<div class="search">
    <form action="http://www.website.com" id="cse-search-box">
      <input type="hidden" name="cx" value="partner-pub-8509363477233538:k0soo8tjfja">
      <input type="hidden" name="cof" value="FORID:10">
      <input type="hidden" name="ie" value="ISO-8859-1">
      <label for="q" accesskey="4"></label>
      <input type="text" id="q" name="q" class="textInput" size="31">
      <input type="image" class="btn" src="/images/btn_go.gif" name="sa" value="Search">
    </form>
    <script type="text/javascript" src="http://www.google.co.uk/cse/brand?form=cse-search-box&amp;lang=en"></script>
  </div>

Hope this helps someone else trying to make the web a better place to surf.
 
Back
Top Bottom