# Mobile के लिए accessibility — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/accessibility-mobile

> Accessible responsive design: sufficient color contrast, semantic HTML, keyboard navigation, और touch devices पर screen reader support।

## Responsive accessibility principles

1. **Contrast**: सभी backgrounds पर text के लिए कम से कम 4.5:1 (mobile या desktop)। 2. **Semantic HTML**: `<button>`, `<nav>`, `<main>` का उपयोग करें ताकि screen readers structure को समझें। 3. **Touch targets**: 44x44px minimum। 4. **Keyboard access**: सभी navigation mouse के बिना काम करता है।

## Accessible form example

Proper labels, error messages, और ARIA attributes forms को accessible और responsive बनाते हैं।

```html
<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input id="username" type="text" aria-required="true">
    <span id="username-error" role="alert" class="error"></span>
  </div>
  <button type="submit" aria-label="Submit form">Submit</button>
</form>
```

## Touch के लिए ARIA labels

Semantic labels touch devices पर screen readers को help करते हैं।

```html
<button aria-label="Close menu">×</button>
<div role="alert" aria-live="polite">Message saved</div>
<nav aria-label="Main navigation">...</nav>
```

**Quiz:** Minimum touch target size क्या है?

- [x] 44x44px
- [ ] 20x20px
- [ ] 32x32px

*Answer:* 44x44px. 44x44px (Apple) या 48x48px (Android) recommended है।