7777 66

How can I fix this buttonless search form so that it will validate correctly with WAVE?

<?php $search_text = "Search"; ?> 
<form method="get" id="searchform"  
action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="<?php echo $search_text; ?>"  
name="s" id="s"  
onblur="if (this.value == '')  
{this.value = '<?php echo $search_text; ?>';}"  
onfocus="if (this.value == '<?php echo $search_text; ?>')  
{this.value = '';}" /> 
<input type="hidden" id="searchsubmit" /> 
</form>

The error message states that:

A form <input>, <select>, or <textarea> does not have a corresponding label.  (Note: Labels are not required for hidden, image, submit, reset, or button form elements.)

Edit: Here's the code I ended up using (for the engine Sphider) and used David's answer.

<form action="sphider/search.php" method="get">
<label for="query" style="position: absolute; left: -999em;">enter your search term here</label>
<input type="text" name="query" id="query" value=""/>
<input type="submit" value="Search"/>
<input type="hidden" name="search" value="1"/>
</form>

4 answers

1
point
This was chosen as the best answer

Add the <label/> element as in Jacob Smith and Tony Crockford's answer, but use the following in your CSS

#searchform label {
    position: absolute; left: -999em;
}

The trouble with Jacob's answer is that using display: none; may cause the label not to be revealed by some screen-reading software.

If for some reason you are not able to use the <label/> attribute, and I really can't imagine what that reason might be, an alternative would be to use a title attribute. This is supported in (at least) the latest verisons of JAWS and Window-Eyes, and is decribed in the accompanying documentation for WCAG 2.0.

Note that the title method probably wouldn't pass the WAVE automated test, but you will have made the form more accessible.

resources:

Techniques for WCAG 2.0 - H44: Using label elements to associate text labels with form controls

Techniques for WCAG 2.0 - H65: Using the title attribute to identify form controls when the label element cannot be used

Answered about 7 years ago by David Owens
  • Thanks, I ended up using a different search form eventually (Sphider) and figured out how to use label tags properly (I should've known figured out before :-). I put the code up in my original post for future reference. 7777 about 7 years ago
1
point

looks like you would add:

<label for="s">search term</label>

Then in your CSS add something like

form#searchform label {display: none}

A bit of extra work, but it will get you valid code

Answered about 7 years ago by Jacob Smith
  • Thanks, +1! 7777 about 7 years ago
1
point

Try:

    <?php $search_text = "Search"; ?> 
    <form method="get" id="searchform"  
    action="<?php bloginfo('home'); ?>/"> 
    <label for="s" style="text-indent: -9999px; display:block; height:0px; overflow:hidden">Search For:</label>
    <input type="text" value="<?php echo $search_text; ?>"  
    name="s" id="s"  
    onblur="if (this.value == '')  
    {this.value = '<?php echo $search_text; ?>';}"  
    onfocus="if (this.value == '<?php echo $search_text; ?>')  
    {this.value = '';}" /> 
    <input type="hidden" id="searchsubmit" /> 
    </form>
Answered about 7 years ago by Tony Crockford
0
points

i put great answer rate for thos code above. thanks http://www.fauzirohimi.com/2009/10/kerja-keras-adalah-energi-kita.html

Answered about 7 years ago by romanzick