Labels for Form Controls
Form controls should be labeled and grouped to provided explicit references that can be used by screen readers
to communicate the purpose of a form control.
The tabindex atttribute can be used to make instructions and other information part of the tab navigation ordering,
so that screen reader users can easily orient to information needed to complete the form.
HTML Markup
label- Use
labelas a way to provide text labels for html form controls fieldsetandlegend- Use
fieldsetandlegendto provide a text label group of html form controls tabindex- The
tabindexattribute can be used to place important information related to the filling out of a form (e.g. instructions) in the tab navigation order title- The
titleattribute should be used onformelements to give the form a title and in some limited cases can be used as alternative to thelabelelement for form controls.
Related Accessibility Requirements
Section 508
- § 1194.22 (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues
Web Content Accessibility Guidelines (WCAG 1.0)
Related Resources
- Screen reader software support for the TITLE attribute (Vision Australia)
- Assistive technology users test title attribute access (Vision Australia)
Example 1: Shipping Form Using Label Encapsulation
Example 1 uses label encapsulation
Design Issues
- The
labelelements encapsulateinput,selectandtextareaform controls - The
tabindexattribute is used to provide keyboard tab stops at section and group control headers. This is needed for screen reader users to orient to the purpose of the next group of controls
Example 2: Shipping Form Using Label Reference
Example 2 uses label reference
Design Issues
tablemarkup is used to align multiple controls in columns- The
labelelements referenceinput,selectandtextareaform controls using theforattribute - Each
input,selectandtextareacontrol needs a uniqueidfor the label to reference - The
tabindexattribute is used to provide keyboard tab stops at section and group control headers. This is needed for screen reader users to orient to the purpose of the next group of controls
Example 3: Shipping Form Using Fieldset for Grouping Controls
Example 3 uses fieldset for grouping
related controls
Design Issues
fieldsetandlegendelements are used to group groups of controls instead of header markup. CSSborderproperty can be used to control the default border around the fieldset controlstablemarkup is used to align multiple controls in columns- The
labelelements referenceinput,selectandtextareaform controls using theforattribute - Each
input,selectandtextareacontrol needs a uniqueidfor the label to reference - The
tabindexattribute is used to provide keyboard tab stops at section and group control headers. This is needed for screen reader users to orient to the purpose of the next group of controls
Example 4: Web Survey
Example 4 uses tabindex for creating
tab markers at instruction
Design Issues
- The
labelelements referenceinput,selectandtextareaform controls using theforattribute - Each
input,selectandtextareacontrol needs a uniqueidfor the label to reference - The
tabindexattribute is used to provide keyboard tab stops at instructions and questions. This is needed for screen reader users to orient to the purpose of the next group of controls
Example 5: Web Survey with Multi-column Response Controls
Example 5 using hidden labels for providing
labels for form controls in tables used for layout
Design Issues
- A
labelelement can only be associated with one and only one form control. Therefore the table headers used to indicate the value of radio buttons or checkboxes cannot be associated with every control in the column. To get around the labeling problem, one solution that works with screen readers is to hide thelabelfor each form control using CSS absolute positioning and set the absolute position to an unviewable position. - The
labelelements referenceinput,selectandtextareaform controls using theforattribute - Each
input,selectandtextareacontrol needs a uniqueidfor the label to reference - The
tabindexattribute is used to provide keyboard tab stops at instructions and questions. This is needed for screen reader users to orient to the purpose of the next group of controls.