Mobile Focus

title: "Mobile Focus Management" weight: 19 description: "Learn how to manage focus on mobile devices: focus order in responsive layouts, focus indicators on touch, focus management in modals and overlays, and differences between desktop and mobile focus behavior." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

Mobile focus management ensures that as users navigate by keyboard (external) or screen reader swipe, focus follows a logical order through the visible content, focus indicators remain visible on touch, and modals trap focus correctly across device sizes.

## What You'll Learn

You will manage focus order in responsive layouts, provide visible focus indicators on touch devices, implement focus trapping in mobile overlays, and handle focus differences between mobile and desktop.

## Why It Matters

Focus management on mobile is more complex because layouts reorder responsively. What works on desktop may have the wrong focus order on mobile. Screen reader users rely on correct focus order to navigate efficiently.

## Real-World Use

A responsive page stacks two columns on mobile. The visual order is header, content, sidebar, footer. But the DOM order is header, sidebar, content, footer -- causing focus to jump from header to sidebar instead of content. Screen reader users are confused by the unexpected order.

## Mobile Focus Considerations

```mermaid
flowchart TD
  A[Mobile Focus] --> B[Logical order on small screens]
  A --> C[Focus indicators on touch]
  A --> D[Modal focus trapping]
  A --> E[Responsive focus regions]

Implementing Focus Management

Ensure the DOM order matches the visual order on mobile. Manage focus for dynamic content.

<!-- Responsive layout with correct focus order -->
<div class="page">
  <header><!-- DOM order matches visual order --></header>
  <main>
    <section class="content"><!-- Content first --></section>
    <aside class="sidebar"><!-- Sidebar second --></aside>
  </main>
  <footer></footer>
</div>

/* Mobile focus indicators visible on touch */
*:focus-visible {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

/* Prevent default tap highlight that may be confusing */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Responsive reorder without changing DOM */
@media (max-width: 768px) {
  main {
    display: flex;
    flex-direction: column;
  }

  .content {
    order: 1;
  }

  .sidebar {
    order: 2;
  }
}

// Mobile focus management for modals
function openMobileModal(modalId) {
  const modal = document.getElementById(modalId);
  const trigger = document.activeElement;

  modal.hidden = false;
  modal.setAttribute('aria-modal', 'true');
  modal.setAttribute('role', 'dialog');

  // Store trigger for focus return
  modal._trigger = trigger;

  // Move focus to modal heading
  const heading = modal.querySelector('h2');
  if (heading) heading.focus();

  // Trap focus within modal
  modal.addEventListener('keydown', trapFocus);
}

function trapFocus(e) {
  if (e.key !== 'Tab') return;

  const modal = e.currentTarget;
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );

  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  if (e.shiftKey && document.activeElement === first) {
    e.preventDefault();
    last.focus();
  } else if (!e.shiftKey && document.activeElement === last) {
    e.preventDefault();
    first.focus();
  }
}

function closeMobileModal(modal) {
  modal.hidden = true;
  // Return focus to trigger element
  if (modal._trigger) modal._trigger.focus();
}

Common Mistakes

• DOM order not matching visual order on mobile layouts
• Removing focus indicators on touch devices
• Not trapping focus in mobile overlays
• Forgetting to return focus after closing overlays
• Using CSS order or float that changes visual but not focus order
• Not testing focus order with screen readers on mobile
• Ignoring focus management in single-page app navigation

Practice and Challenge

Practice 1: Test focus order on a responsive page at mobile width. Practice 2: Verify focus indicators are visible on mobile touch. Practice 3: Test focus trapping in a mobile modal. Practice 4: Check focus return after modal closes. Practice 5: Test focus order changes between landscape and portrait.

Challenge: Build a responsive page with header, main content, sidebar, and footer. On desktop, sidebar is to the right of content. On mobile, sidebar moves below content. Ensure the focus order matches the visual order at both sizes. Add a modal that traps focus correctly on both sizes.

FAQ

Mini Project

Create a focus management test page with scenarios: responsive reorder, modal overlay, dynamic content insertion, and navigation menu. Test each scenario at mobile, tablet, and desktop widths with keyboard and screen reader navigation. Document the expected vs actual focus behavior.

What's Next

Mobile Zoom covers zoom and scaling on mobile devices.