← Back to all Posts

Building Accessible Forms

accessibility html forms a11y

Why Accessibility Matters

Esto es una prueba a ver si funciona :)

Web accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with websites. Forms are often the most critical interaction points, yet they are frequently the most inaccessible.

Labeling Every Input

Every form control must have an associated label. Never rely on placeholder text alone.

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

Error Messages

Make errors clear and actionable. Associate errors with the correct field using aria-describedby.

<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
/>
<span id="email-error">Please enter a valid email address.</span>

Use <fieldset> and <legend> to group related controls, such as radio buttons.

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email" /> Email</label>
  <label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>

Keyboard Navigation

Ensure all form controls are reachable and operable using only a keyboard. Test with Tab, Shift+Tab, Enter, and Space.

Color Contrast

Text and interactive elements must have a contrast ratio of at least 4.5:1 against their background. Use tools like the WebAIM Contrast Checker to verify.

Small changes in form markup make a massive difference for millions of users.