Mobile and Touch Accessibility

<!-- CSS for touch targets -->
.touch-target {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  margin: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<!-- Small icon with extended touch area -->
<button class="touch-target" aria-label="Delete item">
  <svg width="16" height="16" aria-hidden="true">
    <use href="#icon-delete"></use>
  </svg>
</button>

<!-- Concise labels for mobile screen readers -->
<button 
  aria-label="Add to cart"
  aria-describedby="product-price">
  <span aria-hidden="true">+</span>
</button>
<span id="product-price" class="sr-only">$29.99</span>

<!-- Custom actions for swipe gestures (iOS) -->
<div role="article" 
     aria-label="Product: Wireless Headphones"
     data-voiceover-actions="delete,share,favorite">
  <!-- Content -->
</div>

<!-- List item with both drag and button-based reordering -->
<li role="listitem" aria-label="Task: Review pull request"
    draggable="true">
  <span class="drag-handle" aria-label="Drag to reorder">⋮⋮</span>
  <span>Review pull request</span>
  
  <!-- Alternative to dragging -->
  <div class="reorder-controls" role="group" aria-label="Reorder controls">
    <button aria-label="Move up">↑</button>
    <button aria-label="Move down">↓</button>
  </div>
</li>

<!-- Correct viewport meta tag -->
<meta name="viewport" 
      content="width=device-width, initial-scale=1, minimum-scale=1">

<!-- NEVER do this (blocks zoom) -->
<!-- <meta name="viewport" content="maximum-scale=1, user-scalable=no"> -->

<!-- CSS for orientation support -->
@media (orientation: portrait) {
  .toolbar {
    flex-direction: column;
  }
}

@media (orientation: landscape) {
  .toolbar {
    flex-direction: row;
  }
}

/* Responsive font sizing with safe minimums */
body {
  font-size: clamp(16px, 1rem + 0.5vw, 20px);
}

// Handle virtual keyboard appearance
const input = document.getElementById('mobile-search');

input.addEventListener('focus', () => {
  // Scroll element into view with padding for keyboard
  setTimeout(() => {
    input.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'center',
      inline: 'nearest' 
    });
  }, 300); // Delay for keyboard animation
});

// Mobile modal with focus trap
class MobileModal {
  open() {
    this.previousFocus = document.activeElement;
    this.modal.showModal(); // Native focus trap
    
    // Focus first interactive element
    const firstFocusable = this.modal.querySelector(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    firstFocusable?.focus();
    
    // Prevent body scroll on mobile
    document.body.style.overflow = 'hidden';
  }
  
  close() {
    this.modal.close();
    document.body.style.overflow = '';
    this.previousFocus?.focus(); // Restore focus
  }
}

<!-- CORRECT: Visible label matches accessible name -->
<button aria-label="Delete product: Wireless Mouse">
  Delete
</button>
<!-- Voice command: "Click Delete" works! -->

<!-- INCORRECT: Accessible name doesn't include visible text -->
<button aria-label="Remove item from cart">
  Delete
</button>
<!-- Voice command: "Click Delete" FAILS -->

<!-- BEST: Use aria-labelledby for compound labels -->
<button aria-labelledby="delete-label product-name">
  <span id="delete-label">Delete</span>
</button>
<span id="product-name" class="sr-only">Wireless Mouse</span>