Labels & Accessibility

HTML labels and accessibility features are used to make forms easier to understand and use for all users, including people using screen readers.

What is a Label

A label is used to describe an input field in a form. It tells the user what information is required.

Label Tag

The <label> tag is used to create labels for form inputs.

Example of Label

<label>Name</label>
<input type=”text”>

Connecting Label with Input

You can connect a label with an input field using the for attribute and matching it with the id of the input.

Example with Proper Connection

<label for=”name”>Name</label>
<input type=”text” id=”name”>

Why Labels are Important

Labels improve usability by clearly describing input fields. They also make forms easier to click and interact with.

What is Accessibility

Accessibility means designing websites so that all users, including people with disabilities, can use them easily.

Accessibility in Forms

Proper labels help screen readers understand form fields. This allows visually impaired users to navigate forms easily.

Best Practices for Accessibility

Always use labels for every input field.
Connect labels with inputs using for and id.
Keep labels clear and simple.
Do not rely only on placeholder text for important information.

Summary

Labels describe form inputs, and accessibility ensures that everyone can use a website easily. Together, they make forms more user-friendly and inclusive.

Home » HTML Intermediate > Forms & User Input > Labels & Accessibility