♿ Form Accessibility — Sab Ke Liye Form

<!-- ✅ SAHI: label with for/id -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<!-- ❌ GALAT: label wraps input (poora area click hota hai) -->
<label>
  Name:
  <input type="text">
</label>

<!-- ✅ SAHI: fieldset for radio group -->
<fieldset>
  <legend>Biryani Size Choose Karo</legend>
  <label>
    <input type="radio" name="size" value="small"> Small (₹200)
  </label>
  <label>
    <input type="radio" name="size" value="medium" checked> Medium (₹350)
  </label>
  <label>
    <input type="radio" name="size" value="large"> Large (₹500)
  </label>
</fieldset>

<!-- ❌ GALAT: radio bina fieldset -->
<input type="radio" name="size" value="small"> Small
<input type="radio" name="size" value="medium"> Medium
<!-- Screen reader: "radio button" — kaunsa group? kya ke liye hai? -->

<!-- ✅ SAHI: aria-describedby for helper text -->
<input type="tel" id="phone" 
  aria-describedby="phone-help"
  pattern="[6-9][0-9]{9}"
  required>
<small id="phone-help">
  10 digit mobile number, 6-9 se start
</small>

<!-- ✅ SAHI: aria-describedby for error message -->
<input type="email" id="email" 
  aria-describedby="email-error"
  aria-invalid="true"
  required>
<span id="email-error" role="alert">
  Sahi email address daalo
</span>

<!-- ✅ SAHI: aria-label for icon-only buttons -->
<button type="submit" aria-label="Order submit karo">
  📦
</button>

<!-- ❌ GALAT: icon button bina aria-label -->
<button type="submit">📦</button>
<!-- Screen reader: "button" — kya karta hai? -->

<!-- ✅ SAHI: tabindex for logical tab order -->
<input type="text" id="name" tabindex="1">
<input type="email" id="email" tabindex="2">
<input type="tel" id="phone" tabindex="3">
<button type="submit" tabindex="4">Submit</button>

<!-- ✅ SAHI: autofocus on first field -->
<input type="text" id="name" autofocus 
  aria-label="Full Name, auto-focused">

<!-- ✅ SAHI: required + aria-required -->
<input type="email" required aria-required="true">

<!-- ✅ SAHI: Visible focus styles -->
<style>
  input:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }
  input:focus:not(:focus-visible) {
    outline: none;
  }
  input:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }
</style>

<!-- ✅ POORA accessible form example -->
<form>
  <fieldset>
    <legend>Order Place Karo</legend>
    
    <label for="name">Full Name</label><br>
    <input type="text" id="name" required 
      aria-describedby="name-help">
    <small id="name-help">ID ke mutabiq naam</small>
    <br><br>

    <label for="phone">Phone Number</label><br>
    <input type="tel" id="phone" 
      pattern="[6-9][0-9]{9}"
      required
      aria-describedby="phone-help">
    <small id="phone-help">10 digits, 6-9 se start</small>
    <br><br>

    <label for="size">Biryani Size</label><br>
    <select id="size" required>
      <option value="">-- Select --</option>
      <option value="small">Small ₹200</option>
      <option value="medium">Medium ₹350</option>
      <option value="large">Large ₹500</option>
    </select>
    <br><br>

    <label for="notes">Special Instructions</label><br>
    <textarea id="notes" rows="3"
      aria-describedby="notes-help"></textarea>
    <small id="notes-help">Extra masala, less oil, etc.</small>
    <br><br>

    <button type="submit">Order Place Karo</button>
  </fieldset>
</form>