Text labels

Provide text labels for all interactive elements

All interactive elements are required to have descriptive text labels, including any links or form controls.

Visually, users should be able to identify labels that describe the function of each form control. Assistive technology needs to be able to correctly announce the function of each form control as well, so all text labels should also be programmatically associated with the form control using the standard programming.

Links should always have link text that clearly and specifically describes its destination or function.

Benefits

These measures allow users of assistive technology to quickly and easily identify the function of each interactive element.

Examples

Text input

Text inputs are a single line of free text available for user input. They often include instructions on how to properly fill out forms. Both the label and help text should be programmatically associated with the input.

Inputs should be coded using the <input> tag and labeled by the <label> tag using the for attribute to target the id attribute of the input. Any help text should be associated with the input it describes by applying the aria-describedby attribute to the <label> tag (see “Using the aria-describedby attribute”).

See the <input><label>, and <span> tags on lines 8 through 11 below:

<!doctype html>
<html lang="en-US">
 <head>
  <title>Label Form Controls - Web Accessibility Top Ten - UITS</title>
 </head>
 <body>
  <form name="sample form" method="post" action="process.cgi">
    <label for="sampleInput">Sample Input</label>
    <input aria-describedby="helpTxt" name="sampleInput" id="sampleInput">
    </input>
    <span id="helpTxt"><em>Sample help text</em></span>
  </form>
 </body>
</html>

Select box

Select boxes are essentially menu boxes that provide several options for a user to choose from. Although screen-reading software will read the default selection, the select boxes should still be programmatically labeled. Be sure to verify that programming has been completed.

Each select box should be coded using the <select> tag and labeled with the <label> tag using the for attribute to target the id attribute of the select box.

See <label> tag on line 8 below:

<!doctype html>
<html lang="en-US">
 <head>
  <title>Label Form Controls - Web Accessibility Top Ten - UITS</title>
 </head>
 <body>
  <form name="form1" method="post" action="">
   <label for="sampleSelectBox">Sample Select Box</label>
   <select name="sampleSelectBox" id="sampleSelectBox">
     <option>Entry 1</option>
     <option>Entry 2</option>
     <option>Entry 3</option>
   </select>
  </form>
 </body>
</html>

Text area

Text areas allow the user to enter multiple lines of text in a defined space. They should be labeled, and any associated help-text should be programmatically associated with the text area.

Text areas should be coded using the <textarea> tag and labeled by the <label> tag using the “for” attribute to target the “id” attribute of the text area. Any help text should be associated with the text area it describes by applying the aria-describedby attribute to the <label> tag.

See the <textarea><label>, and <span> tags on lines 8 through 10 below:

<!doctype html>
<html lang="en-US">
 <head>
  <title>Label Form Controls - Web Accessibility Top Ten - UITS</title>
 </head>
 <body>
  <form name="form2" method="post" action="">
   <label for="txt1">Sample Text Area</label>
   <textarea aria-describedby="helpText" name="txt1" id="txt1">
   </textarea>
   <span id="helpText"><em>Sample help text</em></span>
  </form>
 </body>
</html>

Radio buttons & checkboxes

Radio buttons are icons that contain a set of options and allow users to select only one at a time. Checkboxes are forms that allow users to choose as many options as they want. Each of the buttons needs a label, and each group of buttons should be contained in a fieldset labeled by a legend.

Radio buttons should be coded using the <input type="radio"> tag, and checkboxes should be coded using the <input type="checkbox"> tag. Both groups should be inside of a <fieldset> tag labeled by a <legend> tag.

See the <fieldset><label>, and <legend> tags on lines 8, 9, 12, 16, 20, and 24 below:

<!doctype html>
<html lang="en-US">
 <head>
  <title>Label Form Controls - Web Accessibility Top Ten - UITS</title>
 </head>
 <body>
  <form name="form3" method="post" action="">
    <fieldset>
      <legend><strong>Sample Radio Button Group</strong></legend>
      <p>
        <input type="radio" name="group1" value="r0" id="g1r0">
        <label for="g1r0">Sample Radio Button 1</label>
        <br>
        <input type="radio" name="group1" value="r1" id="g1r1">
        <label for="g1r1">Sample Radio Button 2</label>
        <br>
        <input type="radio" name="group1" value="r2" id="g1r2">
        <label for="g1r2">Sample Radio Button 3</label>
      </p>
    </fieldset>
  </form>
 </body>
</html>

Buttons

Buttons are used to submit and control forms. Every button needs to be labeled.

Buttons coded using the <input type="submit"> or <input type="button"> tags get their label from the  value attribute.

Buttons coded using the <button> tag get their label from child text.

See <input> tag on line 8 below:

<!doctype html>
<html lang="en-US">
 <head>
  <title>Label Form Controls - Web Accessibility Top Ten - UITS</title>
 </head>
 <body>
  <form name="form5" method="post" action="process.cgi">
   <input type="submit" name="button1" value="Button 1">
   <button type="submit" name="button2">Button 2</button>
  </form>
 </body>
</html>

Links

Links are used to navigate from web page to web page, link to downloadable content, or to activate scripts on web pages. Each link needs "link text" that describes its destination or purpose.

Links should be coded using the <a> tag, an href attribute, and link text that describes the destination or purpose of the link.

See the link text in the <a> tag on line 7 below:

<!doctype html>
<html lang="en-US">
 <head>
  <title>Label Form Controls - Web Accessibility Top Ten - UITS</title>
 </head>
 <body>
  <a href="https://accessibility.iu.edu">Read more about IU's IT Accessibility</a>
 </body>
</html>

Best practices

  • Check that all help text and text labels are programmatically associated with their assigned form controls
  • Apply link text that clearly describes the function or destination of each link
  • Confirm that all labels are visible
    • Do not rely on placeholder text for labeling controls
  • Verify that all form control labels accurately describe the function or destination

Checking for correct usage

  • All form controls are required to have visible labels.
  • Any link text accompanying links should be placed within the <a> tag.
  • Any text labeling form controls should be placed within the <label> tags.
  • When help text is visible, it should have an <id> attribute referenced by an aria-describedby attribute on the form control.
  • If a radio group or checkbox group has a visible legend, it should be placed within in the <legend> tag.
    • The entire group should also be within a <fieldset> tag.

Relevant standards

WCAG 2.0 SC 3.3.2 (Level A) - Labels or Instructions
Labels or instructions are provided when content requires user input.