Element

input

Error Type

Potential

Guidelines

  • BITV 1.0 (Level 2)
    Guideline GroupLevel 1
    Guideline Subgroup10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • Stanca Act
    Guideline GroupRequirement 14: Form Labels
  • WCAG 1.0 (Level AA)
    Guideline GroupPriority 2
    Guideline Subgroup10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • WCAG 1.0 (Level AAA)
    Guideline GroupPriority 2
    Guideline Subgroup10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • WCAG 2.0 (Level A)
    Guideline Group1.3 Ensure that information and structure can be separated from presentation
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)
  • WCAG 2.0 (Level AA)
    Guideline Group1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)
  • WCAG 2.0 (Level AAA)
    Guideline Group1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)

Requirement

All input elements, type of "file", have a label that is positioned close to the control.

Error

input element label, type of "file", is not positioned close to control.

Short Description

input element with a type attribute value of "file" must have an associated label element positioned close to it.

How To Determine

Question Does input field with type "file" have a label positioned close to it?
PASS Label is close to input field with type "file."
FAIL Label is not close to input field with type "file."

Steps To Check

Procedure

1. Check all input elements that have a type attribute value of "file".
2. View the input element within the document and check the positioning of its label.

Expected Result

1. All input elements, type of "file", have a label that is positioned close to the control.

Failed Result

1. Position the label close to the control.

Examples

Pass Examples

Label is close to file control. 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Testfile - Check #124.2 - Negative</title>
</head>
<body>
<p>Please upload your file using the form below:</p>
<form action="http://www.example.com" method="post">
<table>
<tr><td>file:</td><td><input type="file" /></td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>

Fail Examples

Label is not close to file control. 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Testfile - Check #124.1 - Positive</title>
</head>
<body>
<p>Please upload your file using the form below:</p>
<form action="http://www.example.com" method="post">
<table width="100%">
<tr><td>file:</td><td align="right"><input type="file" /></td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>
Web site engine's code is copyright © 2023
Inclusive Design Institute