Test of methods for hidden label information in forms.

Discussion

Tested with Assistive Technology on Windows XP Professional machine displayed in Internet Explorer version 6.0. Window-Eyes test was on Window 2000 machine.

Additionally displayed this form in: Netscape 8 Beta (0.9.6), Netscape 4.8, Mozilla Firefox 1.0.4, and Opera 8.0 on Windows XP Professional and Internet Exporer for Mac 5.2 and Safari 1.0.3 on MAC OS 10 (v.10.2.8) with no noted problems with display or form input.

Method 1: CSS -- limit size of display area

CSS Definition:

#invisible1 {
	height: 0px;
	width: 0px;
	overflow: hidden;
}

Comments: Nice, clean method. Keep in mind that text will re-appear on browsers that do not support this CSS method (consider how text appearing may affect your layout).

Method 2: CSS -- display:none

CSS Definition:

.invisible2 {
	display: none;
}

Comments: Unlike the "hidden" option below, browsers do not leave blank space where text would appear. However, this option is not supported by older versions of AT.

Method 3 : CSS -- visibility:hidden

CSS Definition:

.invisible3 {
	visibility: hidden;
}

Comments: Space where label text would appear is still maintained in browser; moves text box to the right.

Method 4 : IMG -- invisible GIF with ALT tag

HTML Code:

<label for="t3"><img src="../images/1by1.gif" alt="Method 4 input:" /></label>
    

Comments: Not a good option. Only supported by Home Page Reader.

Method 5: CSS -- margin off-screen

CSS Definition:

#invisible4 {
	margin-left: -1000px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	overflow: hidden;
	position: absolute;
}

Comments: Negative margins not supported by some browsers (e.g. Safari). Test on additional platforms. Use absolute positioning to avoid extra spacing.