Mobile के लिए accessibility

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 बनाते हैं।

<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 करते हैं।

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

त्वरित जाँच: Minimum touch target size क्या है?

• 44x44px
• 20x20px
• 32x32px