Accessibility for mobile

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.

<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.

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

Quick check: What's the minimum touch target size?

• 44x44px
• 20x20px
• 32x32px