फॉर्म एक्सेसिबिलिटी

Labels और associations

<label> को for attribute के साथ <input id> से बांधने के लिए उपयोग करें। स्क्रीन रीडर label की घोषणा करते हैं। Placeholder एक label नहीं है।

<!-- ✓ Correct: label tied to input -->
<label for="email">Email address</label>
<input id="email" type="email" name="email" />

<!-- ✗ Wrong: placeholder ≠ label -->
<input type="email" placeholder="Email address" />

Form fields को group करना

Radio buttons और checkboxes के लिए fieldset और legend का उपयोग करें।

<!-- Fieldset + Legend -->
<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>

Error messaging

त्रुटियों की घोषणा aria-live से करें, label/hint से त्रुटियों की ओर इशारा करें, उपयोगकर्ताओं को ठीक करने और फिर से जमा करने की अनुमति दें। कभी भी त्रुटियों को केवल रंग के माध्यम से relay न करें।

Required field indicators

Required fields को स्पष्ट रूप से टेक्स्ट के साथ mark करें, केवल asterisk नहीं।

<label for="name">
  Name <span>(required)</span>
</label>
<input id="name" required />

Help text और hints

Input को उसके help text से aria-describedby द्वारा जोड़ें, ताकि screen reader label के बाद hint भी पढ़े।