How to create an accessible HTML form

· Category: HTML & CSS

Short answer

An accessible HTML form uses explicit <label> elements, proper input types, ARIA attributes when necessary, and clear error messaging so all users, including those using assistive technologies, can complete it successfully.

Steps

  1. Associate every input with a <label> using the for attribute matching the input's id.
  2. Use the correct type attribute (e.g., email, tel, date) to trigger the appropriate mobile keyboards and validation.
  3. Group related inputs with <fieldset> and <legend>.
  4. Add required, aria-required, or aria-invalid to communicate validation states.
  5. Ensure all inputs are reachable and operable via keyboard alone.

Example

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required aria-describedby="email-error" />
    <span id="email-error" class="error" role="alert"></span>
  </fieldset>
  <button type="submit">Submit</button>
</form>

Tips

  • Avoid relying solely on placeholder text as a label.
  • Use aria-describedby to link inputs with hint text or error messages.
  • Provide visible focus indicators with CSS so keyboard users know where they are.