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

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

> जुड़े labels, fieldsets, स्पष्ट error messages और aria-describedby से जुड़े help text के साथ accessible forms बनाएँ।

## 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>(required)</span>
</label>
<input id="name" required />
```

## Help text और hints

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