Mobile Project

title: "Mobile Accessibility Module Project" weight: 26 description: "Apply everything learned in this module: audit a mobile site for touch targets, gestures, screen reader support, zoom, orientation, and forms, then fix issues and produce a mobile accessibility report." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

This capstone project combines all mobile accessibility techniques from this module into a comprehensive mobile audit of a website, covering touch targets, screen reader compatibility, gestures, orientation, zoom, forms, and navigation.

## Project Overview

You will conduct a full mobile accessibility audit of a sample e-commerce site or your own project, on both iOS and Android devices.

## Project Steps

```mermaid
flowchart TD
  A[Select Site] --> B[Touch Target Audit]
  B --> C[Gesture Audit]
  C --> D[Screen Reader Test]
  D --> E[Form Test]
  E --> F[Zoom Test]
  F --> G[Orientation Test]
  G --> H[Fix Issues]
  H --> I[Re-test]
  I --> J[Final Report]

Step 1: Touch Targets

Check all interactive elements on mobile. Measure touch target sizes.

const touchAuditResults = [];
document.querySelectorAll('button, a, input, select, [role="button"]').forEach(el => {
  const rect = el.getBoundingClientRect();
  touchAuditResults.push({
    element: el.tagName,
    text: el.textContent.trim().slice(0, 20),
    width: Math.round(rect.width),
    height: Math.round(rect.height),
    passes: rect.width >= 44 && rect.height >= 44
  });
});
console.table(touchAuditResults.filter(r => !r.passes));

Step 2: Screen Reader

Test every page with VoiceOver on iOS and TalkBack on Android. Document issues.

Step 3: Forms and Interaction

Test form completion, error states, and dynamic content.

<!-- After fixing: accessible mobile form -->
<form>
  <label for="mobile-search">Search products</label>
  <input
    type="search"
    id="mobile-search"
    inputmode="search"
    autocomplete="search"
    style="font-size: 16px; min-height: 44px;"
  >
  <button type="submit" aria-label="Search" style="min-width: 48px; min-height: 48px;">
    Search
  </button>
</form>

Step 4: Report

Document all issues found, fixes applied, and remaining items.

Deliverables

Submit: touch target audit results, screen reader test notes (VoiceOver and TalkBack), gesture and motion audit, form accessibility audit, zoom and orientation test results, fix documentation with before/after code, and a final mobile accessibility report with pass/fail per criterion.

What's Next

React Accessibility covers accessibility in React applications.