The Audible WWW --The World In My Ears

Labels For Input Elements

Currently, there is no association between the label for an input field and the html element representing the input field. This has the advantage of allowing the designer of an HTML form complete flexibility in how the form is laid out; it also means that the association between a text input field and the label that tells users what they are are expected to enter is a purely visual one. As a consequence, the semantics of the dialogue presented by the HTML form is not captured in the markup.

Here are examples of several possible encodings of a form that asks a user to enter her name:

       Please enter your name:
       <input name="name" size="30">

  <input name="name" size="30">
       Please enter your name.

       Please enter your name <br>
       <input name="name" size="30">

When the form is rendered visually, the eye is able to associate the label text Please enter your name with the input field. Given a form with several input fields, the eye pairs off labels and input fields; the techniques used to achieve this pairing can be described as hueristic at best.

To achieve an effective dialogue with a form via speech, the user needs to be provided with sensible spoken prompts e.g., in the example above, the user would expect the prompt

Please enter your name

irrespective of how the form fields are laid out visually.

To enable such dialogues, we propose the addition of a label element to HTML3.0.

Syntax Of Element Label

<label for=id>label text </label>

We propose that input fields such as text fields, radio buttons etc. have an id attribute that identifies the element. The label element which contains the textual label could establish the binding to the relevant input element by means of the for attribute.

Grammar And Semantics Of Element Label

The label element has a start and end tag, and takes one attribute, for . The for attribute associates the label element to the input element that has its id attribute set to id.

The advantage in using a separate id and for attribute pair instead of relying on the name attribute of elements like the text input field is that we will be able to handle grouped UI elements, e.g., radio buttons, correctly.

Definition Of Element Label

We can define this element formally as:

<!ELEMENT label - - (%text;)*>
        <!ATTLIST label
                %attrs;                  -- id, lang, class --
                for     IDREF   #IMPLIED -- identifies INPUT element --
                >

Suggested Usage For Element Label

The three different layouts of the example shown earlier would be coded as:

       <label for="name">Please enter your name:</label>
       <input id="name" name="name" size="30">

        <input id="name" name="name" size="30">
       <label for="name">Please enter your name.</label>

       <label for="name">Please enter your name</label> <br>
       < input id="name" size="30">

Given any of these encodings, a visually oriented browser can still produce the layout desired by the form designer, relying on the visual layout to cue the user to the association between labels and input fields. An intelligent speech-oriented browser can infer the association between the label text and input field by comparing the value of the name attribute, and present the user with an appropriate spoken prompt. All present day browsers can continue to ignore the label element without any negative effect on the rendering they produce on the screen.

Advantages Of Element Label

Allows full backward compatibility; a browser that ignores the label tag will continue to produce good visual layout.
The markup associates the label text to the input field, rather than leaving the information to be inferred from the final rendering.

T. V. Raman
Email: raman@adobe.com

Last modified: Tue Feb 18 09:57:56 1997