WebAIM - Web Accessibility In Mind

E-mail List Archives

Making forms accessible with the <label> element

for

From: Mark Rew
Date: Sep 26, 2001 9:47AM

Group,
I'm trying to provide descriptive text to edit fields within a html form for a
screen reader to read without adding text to the screen.
I used the <label> element to provide text that my screen reader can
understand to a <textarea> element within a form.
<LABEL> FOR="COMMENTFIELD">Comment: </LABEL>
<TEXTAREA ID="COMMENTFIELD" NAME="COMMENTS" ...>
This works, I can hear the word "comment: " before the text area where I'm to
enter my comments.
My Customer wants to know is there a way of allowing the label to be available
to my screen reader, without the label appearing on the screen? The label
text on the screen effects the layout of the page. There is not room within
the layout table cell for the exrra text.
A second accessible solution we found is to put the words in the valueattrribute of an <input> element that tells the screen reader user what the
edit field is for. For example:
<input type="text" name="pands" size="15" maxlength="30" VALUE="search by city
or zipcode">

But, the text in the value attribute appears on the screen. So, I tried:
<input type="text" name="pands" size="15" maxlength="30" ALT="search by city
or zipcode" value=" ">
But, my screen reader is not saying the alt= attribute. Does anyone have a
solution that will allow a screen reader to have some type of descriptive text
to either an <input> or <textarea> element without adding information to the
visual screen?
thanks
Mark Rew