# Accessibility for mobile — Responsive & Mobile-First Design

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

> Accessible responsive design: sufficient color contrast, semantic HTML, keyboard navigation, and screen reader support on touch devices.

## Responsive accessibility principles

1. **Contrast**: At least 4.5:1 for text on all backgrounds (mobile or desktop). 2. **Semantic HTML**: Use `<button>`, `<nav>`, `<main>` so screen readers understand structure. 3. **Touch targets**: 44x44px minimum. 4. **Keyboard access**: All navigation works without mouse.

## Accessible form example

Proper labels, error messages, and ARIA attributes make forms accessible and 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>
```

## ARIA labels for touch

Semantic labels help screen readers on touch devices.

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

**Quiz:** What's the minimum touch target size?

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

*Answer:* 44x44px. 44x44px (Apple guideline) or 48x48px (Android) is recommended.