For training that enhances your effectiveness and inspires your students.

Labels in Forms

Multiple controls in forms have the same HTML label, HTML label is missing, or HTML label is not representative of the function of the control.


Standard

  • 1.1.1 Non-text Content (Level A) Form inputs have associated text labels
  • 2.4.6 Headings and Labels (Level AA) Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., “More Details”) or label text (e.g., “First Name”) unless the structure provides adequate differentiation between them.
  • 3.3.2 Labels or Instructions (Level A) Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends

Example of Standard in Action

The form below allows a user to enter their name. Using the <label>

Example of Issue

Textual labels generally describe the function of each form control (i.e., text box, check box, radio button, menu, etc.). Sighted users may visually associate a textual label with its corresponding form control but a screen reader will skip textual labels between controls. Using an HTML <label> element to associate the textual label with a control allows screen reader users to navigate forms.

Locating the Issue in Your Course

You will want to look through your course for each page that has a form.  In order to test whether a form on a page is correctly labeled, you can either look at the HTML to make sure that a meaningful <label> is associated with each control otherwise you can use the Web Accessibility Evaluation Tool (WAVE) to test the forms on a page.

Resources to Align with Standard

Leave a Reply