I have an HTML page with many textboxes. I have to label them for accessibility purpose.But, i don't want label to visible.Is it possible? Or, is there any other design alternative?
A:
What about a watermarked textbox?
e.g. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx
SillyMonkey
2009-06-01 10:16:51
Depends on JavaScript. The label *is* visible (while not being an actual label). Abuses the "default value" as a label.
David Dorward
2009-06-01 10:21:46
I don't see what your criticism of Microsoft's implementation has anything to do with the suitability of the idea?
SillyMonkey
2009-06-01 10:31:00
@David: So what? Looks like a viable solution to me.
2009-06-01 10:31:31
The label tag isn't used in that implementation, so it doesn't meet the requirements of the question. The Javascript appears to be OK since it degrades when disabled. And as David says, the label (both of them, redundantly ("First Name" and "Type First Name Here")) is still visible which is what the OP doesn't want.
Alistair Knock
2009-06-01 11:04:07
@Elvian So it doesn't meet the requirements specified in the question! Which were "accessible" (it isn't) and "not visible" (it is)
David Dorward
2009-06-01 11:17:16
it's a design alternative. question said label, not necessarily label tag.
SillyMonkey
2009-06-10 15:04:58
+2
A:
There are various ways to put text in a page and have it hidden to visual users while accessible to screen reader users (such as high negative text-indent).
However, "accessibility" isn't a line between "People who have no problems using the web" and "People who are blind". There are plenty of people who fit into neither group, and it is too easy and too common for authors to forget that accessibility is about more then making content available to people who cannot see.
David Dorward
2009-06-01 10:17:57
Hi,This is my first attempt to make a web application accessible.So, to start off I am aiming at "visually impaired" group.
kost
2009-06-01 10:20:59
Try http://diveintoaccessibility.org/ for a general overview from which you can start searching for specific good practice implementations.
Alistair Knock
2009-06-01 11:06:21
A:
Try CSS:
label {
display: none;
}
Make sure to apply this stylesheet to the "screen" medium only:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
DXL
2009-06-01 10:43:42
Screen readers read what is on the screen. This hides the label from screen reader users.
David Dorward
2009-06-01 11:18:02
Screen readers aren't supposed to use this stylesheet since it has media="screen". Make a separate stylesheet with media="speech" for that. This is a perfectly fine (and really simple) way of doing it.
Arve Systad
2009-06-01 12:00:32
Screen readers are screen readers, not aural browsers (and its media="aural" not media="speech"). Even if you disagree with the theory, the reality is that they all respect screen media stylesheets.
David Dorward
2009-06-01 12:48:11
+1
A:
The point of a label is to describe purpose of the input, kinda like giving it a header. If you don't use a label, how will your sighted users know what to put in the input?
Whatever gives the visual clue to the sighted users should also be the label for assistive technology users.
edeverett
2009-06-01 10:47:57
+1
A:
Using display:none is bad for this, and I support the query as to why you want to hide all labels - there's likely to be some tag you're using to inform users what the textarea is to contain, so just mark that up as a label and style accordingly.
If you still want to hide the label, positioning it offscreen is better. There is a recent summary of this at the 456 Berea Street blog.
Alistair Knock
2009-06-01 11:14:36
A:
As mentioned, it's always preferable to have a visible label for all input elements -- this will help both sighted and non-sighted users. Having said that, there are certain scenarios where this isn't feasible, which I'm guessing your case falls under. For these situations you have a couple options.
The first is to use the "title" attribute, which has the added benefit of displaying a tool-tip for sighted users:
<input type="text" title="first name" />
A couple others have mentioned the second option, which involves positioning the label off the screen using CSS:
<label for="first_name"
style="position:absolute;left:-1000px;width:1px;overflow:hidden;" />
<input type="text" id="first_name" />
Unlike using "display:none", screen readers will still read the label. It's also elegant in that users that choose to disable CSS will see the label.
No matter what you go with, I definitely recommend downloading a trial copy of JAWS from Freedom Scientific and testing your solution out.
Dave Lockhart
2009-06-11 19:04:36