Label form elements properly

Clear, intuitive form labels are essential for accessibility, helping all people understand what information each field requires. Well-labeled forms improve usability, reduce errors, and ensure your site meets accessibility standards.

Why proper form labels matter

• Supports assistive technology: Screen readers and other assistive tools rely on clear labels to identify form fields. Proper labeling helps people understand and complete forms independently.
• Enhances user experience: Intuitive labels reduce confusion and improve form completion rates. This is especially helpful for people with cognitive disabilities.
• Ensures legal compliance: Accessibility guidelines, including WCAG, mandate properly labeled form elements to meet legal accessibility requirements.

Best practices for labeling forms

1. Use <label> for all fields
   Associate labels directly with form controls to create a clear relationship. This allows screen readers to announce the label when a person focuses on the input.
2. Position labels clearly
   Place labels above or to the left of input fields to make their association visually obvious. Avoid using placeholder text as a substitute—placeholders disappear when people start typing, which can be confusing.
3. Group related elements with <fieldset> and <legend>
   Use <fieldset> to group related form controls like checkboxes or radio buttons, and provide context with a <legend>. This structure helps people understand the options available within a specific section.
4. Write descriptive labels
   Labels should be specific and informative. For example, use “Email Address” instead of “Enter” to avoid confusion and give people a clear idea of what’s required.
5. Label all interactive elements
   Ensure that all elements—text fields, checkboxes, dropdowns, and text areas—have descriptive labels. People should be able to click on labels to select or activate elements, improving usability and accessibility.
6. Use ARIA labels for custom controls
   For custom components or elements that don’t support standard HTML labels, use ARIA attributes like aria-label or aria-labelledby to provide an accessible name.

Testing form labels for accessibility

1. Screen reader testing
   Use screen readers like NVDA (Windows) or VoiceOver (macOS/iOS) to verify that labels are announced correctly and forms are easy to navigate.
2. Keyboard navigation
   Check that form fields are accessible via keyboard, with labels correctly associated with each input.
3. Automated tools
   Run automated accessibility checks using tools like Silktide’s accessibility checker to identify missing or incorrect labels.

Common pitfalls to avoid

• Relying on placeholder text: Placeholder text should not replace labels. Once a person starts typing, placeholders disappear, making it hard to remember what the field requires.
• Missing labels: Every form element should have a label, even if it’s visually hidden, to ensure compatibility with assistive technologies.
• Incorrect labeling: Ensure the for attribute in <label> matches the id of the form element to create a reliable connection.