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>
