# फॉर्म एक्सेसिबिलिटी — वेब एक्सेसिबिलिटी (A11y)

Source: https://www.geekswithgeeks.com/hi/accessibility/a11y-forms

> उचित labels और error handling के साथ सभी के लिए फॉर्म को उपयोग करने योग्य बनाएँ।

## Labels और associations

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

```html
<!-- ✓ 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 का उपयोग करें।

```html
<!-- 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 नहीं।

```html
<label for="name">
  Name <span aria-label="required">*</span>
</label>
<input id="name" required aria-required="true" />
```

## Help text और hints

<input> help text से link करने के लिए aria-describedby का उपयोग कर सकते हैं