Accessible Forms and Labels


Forms are one of the most important parts of a website.

Accessible forms ensure that everyone, including screen reader and keyboard users, can interact with them easily.

Why Form Accessibility Matters

If form fields are not labeled correctly, screen reader users cannot understand what information is required.

This makes forms difficult or impossible to use.

The Importance of Labels

Every input field should have a label that clearly describes its purpose.

Labels connect text instructions with form fields.

In this form, screen readers only read the input type, not the purpose of the field.

Now screen readers can announce each field clearly.

Using Placeholder vs Label

Placeholders should not replace labels.

Placeholders disappear when users type, but labels remain visible and accessible.

Grouping Related Fields

Use fieldsets to group related fields and provide context.

Fieldsets help screen readers understand the relationship between inputs.

Accessible Instructions and Errors

Instructions and error messages should be clear and placed near the related input field.

Why Accessible Forms Matter for Jobs

Accessible form design is a professional requirement.

Employers expect developers to build forms that work for everyone.

Practice Task

Create a form with:

  • Proper labels for each field
  • A fieldset with legend

Test the form using keyboard navigation.

What You Will Learn Next

In the next lesson, you will learn how to support keyboard navigation and manage focus properly.