E-mail List Archives
Thread: fieldset for radio buttons
Number of posts in this thread: 3 (In chronological order)
From: Marek Prokop
Date: Thu, May 22 2003 4:23PM
Subject: fieldset for radio buttons
No previous message | Next message →
Hello all,
I have a question on the accessibility of a search form,
particularly whether the fieldset with a legend around the radio
buttons is necessary (or at least useful).
Full story: Because I use a free outsourced search engine, I
have to provide two options -- internal search of my website
only and global search all over the Web. My initial design looks
like this (some elements and attributes are omited):
<form ...>
<div>
<label for="sstr">Search for:</label>
<input type="text" id="sstr" />
<fieldset>
<legend>Where to search</legend>
<div>
<input type="radio" id="searchinsova" checked="checked"
/>
<label for="searchinsova">This site</label>
</div>
<div>
<input type="radio" id="searchincz" />
<label for="searchincz">WWW</label>
</div>
</fieldset>
<input type="submit" value="Search" class="button" />
</div>
</form>
You can review the result (unfortunately in Czech) in the left
column below the menu of this page:
http://www.sovavsiti.cz/test.html
The problem is that the form occupies fairly large space and I'd
like to make it a little shorter. I could get rid of the
fieldset (including the legend) around the radio buttons, but I
definitely don't want to make it less accessible. What's your
opinion?
Thank you very much for your kind advice,
Marek
CSS Workshop :: http://www.sovavsiti.cz/css/
----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/
From: Big John
Date: Thu, May 22 2003 8:05PM
Subject: Re: fieldset for radio buttons
← Previous message | Next message →
Marek Prokop wrote:
> I have a question on the accessibility of a search form,
> particularly whether the fieldset with a legend around the radio
> buttons is necessary (or at least useful).
-snip-
> You can review the result (unfortunately in Czech) in the left
> column below the menu of this page:
>
> http://www.sovavsiti.cz/test.html
>
> The problem is that the form occupies fairly large space and I'd
> like to make it a little shorter. I could get rid of the
> fieldset (including the legend) around the radio buttons, but I
> definitely don't want to make it less accessible. What's your
> opinion?
Hi Marek, long time no see.
I don't know how much more accessible the form is with <legend>
and <fieldset>, but you can make <legend> 'display: none'. That
would remove it from the display, but it would still be there
for non-visual user agents. I don't believe you can do the same
for <fieldset>, because all its contents would go with it.
Big John
====^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-
| Perennial student + Impractical joker + CSS junkie = Big John |
| XXXXXXXXXXX <http://www.positioniseverything.net>; XXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXX <http://users.rraz.net/mc_on_the_rocks/>; XXXXXXXXXXXX |
-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^-^
__________________________________
Do you Yahoo!?
The New Yahoo! Search - Faster. Easier. Bingo.
http://search.yahoo.com
----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/
From: Jukka K. Korpela
Date: Fri, May 23 2003 10:17AM
Subject: Re: fieldset for radio buttons
← Previous message | No next message
On Thu, 22 May 2003, Big John wrote:
> I don't know how much more accessible the form is with <legend>
> and <fieldset>, but you can make <legend> 'display: none'. That
> would remove it from the display, but it would still be there
> for non-visual user agents. I don't believe you can do the same
> for <fieldset>, because all its contents would go with it.
If you set display: none, then there is no way to turn this off inside the
element, i.e. all descendants have display: none too. This is often
frustrating, but that's what the specifications say.
But you can use
fieldset { border: none; }
which removes the borders that borders typically draw around a fieldset,
as the only visible effect of that markup. Combining this with
legend { display: none; }
would let you use structural fieldset markup without any visible effects
on CSS-enabled browsers.
On the other hand, speech browsers may well take their input from
a styled version of page, thus potentially losing the information
that was inserted for accessibility. When using CSS, you should
_also_ be prepared to the possibility that it actually has an effect, even
in circumstances you don't expect.
But I think that
- the fieldset and legend elements actually improve accessibility
in graphic presentation too, since they group and label
things in a useful way
- it is generally unproductive to try to squeeze forms into
tiny dimensions; either the form should be on a page, or it
should not, and if it should, it should appear there as a normal,
easy-to-use element.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/