📝Markdown & HTML

Accessible Form Shell

Foundation for forms that pass accessibility audits.

Explanation

Correct use of labels, fieldsets, and ARIA attributes makes forms usable by everyone.

Examples

Form Linkage

Output

<label for="name">...</label>
<input id="name">

Code Examples

HTML

<form action="/submit" method="POST">
  <fieldset>
    <legend>Contact Information</legend>
    
    <label for="user-email">Email Address</label>
    <input 
      type="email" 
      id="user-email" 
      name="email" 
      required 
      aria-describedby="email-hint"
    >
    <small id="email-hint">We'll never share your email.</small>
    
    <button type="submit">Send</button>
  </fieldset>
</form>

💡 Tips

Always link labels to inputs using the "for" and "id" attributes
Use fieldset and legend to group related inputs
Identify required fields clearly both visually and via ARIA

⚠️ Common Pitfalls

Using placeholders instead of labels (screen readers often miss them)