Use the
identify the exact words that you want to use as the label for the form element and
enclose those words in a
element.
Use the "ID" Attribute in the Associated Form Element. Every form element supports the
"ID" attribute. By setting this attribute to the identifier used in the "FOR" attribute of the
associated
instance, we have rewritten the HTML code for our simple form inside a table to include
explicit labels below. The new HTML code for the explicit labels is indicated in bold:
In a nutshell, that s all there is to making HTML form elements accessible to assistive
technology. Experience has shown that this technique works extremely well in much more
complicated and convoluted forms and it should work well in all agency HTML forms.
Avoid Using "Implicit Labels"
In "implicit" labels, the form element and its associated label are contained within an opening
tag. For instance, in the table above, an implicit label to
associate the words "First Name" with its associated input cell, we could use an implicit label as
follows:
| FIRST NAME: |
|
Experience has shown that implicit labeling should be avoided for two reasons. First, implicit
labeling is not reliably supported by many screen readers and, in particular, does not work well if
explicit labels are simultaneously used anywhere on the same web page. Often, the output can
be wildly inaccurate and confusing. Second, if any text separates a label from its associated
form element, an implicit label becomes impractical and confusing because the label itself is no
longer easily identified with the form element.
National GACC Website and GACC Website Template
39
Implementation Guidelines