Mobile Accessibility — iOS & Android Accessibility Guide

## Mobile Screen Reader Testing

### Navigation
- [ ] Can I swipe through all elements in logical order?
- [ ] Are headings navigable via the Rotor (VoiceOver) or TalkBack menu?
- [ ] Are landmarks (nav, main, footer) listed in the Rotor?
- [ ] Does the Rotor show appropriate categories?

### Forms
- [ ] Are all form fields announced with labels?
- [ ] Can I select options from dropdowns?
- [ ] Can I check and uncheck checkboxes and radio buttons?
- [ ] Are error messages announced?

### Touch Interactions
- [ ] Can I activate all buttons and links with double-tap?
- [ ] Can I dismiss modals and alerts?
- [ ] Does the pull-to-refresh gesture work?
- [ ] Are custom swipe gestures announced?

/* ❌ Bad — tiny touch target */
.close-button {
  width: 16px;
  height: 16px;
  font-size: 12px;
}

/* ✅ Good — meets WCAG 2.2 minimum */
.nav-link {
  display: inline-block;
  padding: 12px 16px;   /* creates generous tap area */
  min-width: 44px;
  min-height: 44px;
}

/* ✅ Good — accessible icon button */
.icon-button {
  width: 44px;
  height: 44px;
  display: Flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  Cursor: pointer;
}

/* ✅ Good — spacing between adjacent targets */
.menu-item + .menu-item {
  margin-top: 8px;
}

// Swipe-to-delete with an accessible button alternative
const item = document.querySelector('.list-item');
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete item';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', () => item.remove());

// Support swipe gesture
let startX = 0;
item.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
item.addEventListener('touchend', e => {
  const endX = e.changedTouches[0].clientX;
  if (startX - endX > 100) {
    item.remove();
  }
});

item.appendChild(deleteBtn);

/* Position the delete button for screen reader access */
.delete-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px;
  background: #d32f2f;
  color: #fff;
  border: none;
  border-radius: 4px;
  min-height: 44px;
}

/* ❌ Bad — orientation lock prevents user choice */
@media (orientation: landscape) {
  /* content only available in landscape */
}

/* ✅ Good — support both orientations */
.flexible-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

<!-- Mobile-friendly form fields -->
<label for="mobile-phone">Phone number</label>
<input type="tel" id="mobile-phone" name="phone"
       inputmode="numeric" autocomplete="tel"
       aria-describedby="phone-hint">
<p id="phone-hint">Enter your 10-digit number</p>

<!-- Use appropriate input modes -->
<input type="text" inputmode="email" autocomplete="email">
<input type="text" inputmode="numeric" autocomplete="postal-code">
<input type="text" inputmode="URL" autocomplete="URL">

<!-- Avoid tiny selects — use radio groups or pickers -->
<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s"> Small</label>
  <label><input type="radio" name="size" value="m"> Medium</label>
  <label><input type="radio" name="size" value="l"> Large</label>
</fieldset>

/* Use relative units, not fixed px values */
body {
  font-size: 1rem;          /* respects user's font settings */
  line-height: 1.5;
}

h1 {
  font-size: 2rem;          /* scales with user preferences */
}

/* ❌ Bad — fixed sizes break when user increases font */
.sidebar {
  width: 250px;             /* may clip content */
  font-size: 12px;          /* too small to read */
}

/* ✅ Good — flexible layout */
.content-area {
  max-width: 40rem;         /* scales with font size */
  padding: 1rem;
}

/* Test that no content is cut off at 200% zoom */
@media (max-width: 320px) {
  .responsive-text {
    font-size: 0.875rem;    /* fine-tune only at extreme sizes */
  }
}

// mobile-a11y-check.js
function checkMobileAccessibility() {
  const results = [];

  // Check touch target sizes
  document.querySelectorAll('a, button, input, select, textarea, [role="button"]').forEach(el => {
    const rect = el.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    if (width < 44 || height < 44) {
      results.push({
        element: `<${el.tagName.toLowerCase()}>${el.id ? '#' + el.id : ''}`,
        text: el.textContent?.trim()?.substring(0, 20) || '(icon)',
        width: Math.round(width),
        height: Math.round(height),
        issue: `Target is ${width}×${height}px — minimum is 44×44px`,
      });
    }
  });

  // Check viewport meta tag allows zooming
  const viewport = document.querySelector('meta[name="viewport"]');
  if (viewport) {
    const content = viewport.getAttribute('content') || '';
    if (content.includes('user-scalable=no') || content.includes('maximum-scale=1') || content.includes('maximum-scale=1.0')) {
      results.push({
        element: '<meta name="viewport">',
        issue: 'Viewport disables zooming — users cannot enlarge text',
      });
    }
  }

  // Check orientation lock
  const orientationLock = document.querySelector('meta[name="x-ua-compatible"]');
  if (window.screen && window.screen.orientation && window.screen.orientation.lock) {
    // Check for CSS orientation media queries used without fallback
  }

  if (results.length === 0) {
    console.log('✅ Mobile Accessibility checks passed');
  } else {
    console.table(results);
  }
  return results;
}

// Usage
checkMobileAccessibility();

// mobile-debugger.js
(function() {
  const overlay = document.createElement('div');
  overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;' +
    'background:rgba(0,0,0,0.85);color:#fff;padding:8px 12px;' +
    'font-family:monospace;font-size:12px;z-index:99999;' +
    'display:Flex;justify-content:space-between;';
  overlay.innerHTML = '<span id="touch-info">Tap any element</span>' +
    '<button onclick="this.parentElement.remove()" style="background:none;border:none;color:#fff;Cursor:pointer">✕</button>';
  document.body.appendChild(overlay);

  document.addEventListener('click', e => {
    const el = e.target;
    const rect = el.getBoundingClientRect();
    const tag = el.tagName.toLowerCase();
    const text = el.textContent?.trim()?.substring(0, 25) || '(icon)';
    document.getElementById('touch-info').textContent =
      `<${tag}> ${text} — ${Math.round(rect.width)}×${Math.round(rect.height)}px`;
  }, true);
})();