Lesson 3: Forms & Accessibility

Creating Accessible HTML Forms

A well-structured form begins with the <form> element. Use <label> tags linked via the for attribute to improve usability and screen-reader support. Group related controls inside <fieldset> with a <legend>. Native validation (e.g., required, type="email") provides immediate feedback without JavaScript.

<form action="/submit" method="post">
  <fieldset>
    <legend>Contact Us</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" required></textarea>
  </fieldset>

  <button type="submit">Send</button>
</form>

Key Points

• <label> linked to inputs via for improves form usability.
• <fieldset> + <legend> groups controls and provides context.
• Use native validation attributes like required, type="email" for instant feedback.
• ARIA attributes (e.g., aria-required="true") enhance accessibility for assistive tech.