[thelist] Re: Search Form accessibility question

Cb2 Web Design cb2 at cpsimoes.net
Fri Feb 13 08:52:28 CST 2004


What "they" mean is something like this:

<form id="searchform" action="index.html" method="get">
<fieldset>
<legend>Search</legend>
<label for="search">Enter text: </label><input id="search" maxlength="255"
size="10"
value="search" name="search"><input type="submit" value="go!">
</fieldset>
</form>

This is equivalent to:

<form id="searchform" action="index.html" method="get">
<fieldset>
<legend>Search</legend>
<label>Enter text: <input id="search" maxlength="255" size="10"
value="search" name="search"></label><input type="submit" value="go!">
</fieldset>
</form>

So, in order to have a search box like you had, create a "hidden" style:

<style type="text/css">
.hidden { position: absolute; left: -999px; width: 900px;}
</style>

Then and given that there are no "logical groupings" I guess you can omit
fieldset and legend, apply class hidden to label (That will work in IE,
Mozilla and Opera) and you have, I hope, an accessible searchbox that looks
just like your previous one.

<form id="searchform" action="index.html" method="get">
<label for="search" class="hidden">Enter text: </label><input id="search"
maxlength="255" size="10"
value="search" name="search"><input type="submit" value="go!">
</form>

Carlos

> Date: Thu, 12 Feb 2004 11:03:46 -0800
> From: "rsusoeff" <rsusoeff at afamily.net>
> To: <thelist at lists.evolt.org>
> Subject: [thelist] Search Form accessibility question
> Message-ID: <000201c3f19b$53c2b500$b52f5142 at default>
> Content-Type: text/plain;
> charset="iso-8859-1"
> MIME-Version: 1.0
> Content-Transfer-Encoding: 7bit
> Precedence: list
> Reply-To: rsusoeff <rsusoeff at afamily.net>, "thelist at lists.evolt.org"
> <thelist at lists.evolt.org>
> Message: 6
>
> Greetings,
>
> I'm getting three errors when I check my 508 compliance with Bobby:
>
> 1) Explicitly associate form controls and their labels with the LABEL
> element.
>
> 2) Make sure that labels of all form controls are properly placed.
>
> 3) If there are logical groupings of form controls, use FIELDSET with
LEGEND
> on each group.
>
> My questionable code:
>
> <form id="searchform" action="index.html" method="get"><p
> id="searchinput"><input id="search" maxlength="255" size="10"
> value="&nbsp;search" name="search">&nbsp;<input type="submit"
> value="go!"></p></form>
>
> And the page:
>
> http://www.theviewfromthehill.com/page.html
>
> I know I'm missing something simple here, but I've looked at this a number
> of times and I'm getting nowhere. The page validates as HTML4.01 Strict
and
> valid CSS. All applicable code is in the source.
>
> Jeez, it's just a search box...
>
> TIA, Rick.




More information about the thelist mailing list