Accessible textbox

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

What about a watermarked textbox?

e.g. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx

Answer 5

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" />

Answer 6

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.