Initial Focus

title: "Initial Focus — Where Focus Should Land When a Modal Opens" description: "Learn where to set initial focus when opening a modal dialog for optimal keyboard and screen reader user experience." weight: 6 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, modals]

When a modal opens, focus must move to a logical element inside the modal, typically the primary action button or the first focusable element.

## What You'll Learn

Strategies for placing initial focus in modals and how different dialog types require different focus targets.

## Why It Matters

Without intentional initial focus, the browser places focus on the body or the first focusable element in DOM order, which may not be the most logical starting point.

## Real-World Use

A confirmation modal appears. Focus lands on the "Confirm" button because it is the primary action. The screen reader announces "Confirm deletion, alert dialog, Confirm button." The user presses Space to confirm.

## Focus Strategies

```html
<!-- Confirmation dialog: focus on primary action -->
<div role="alertdialog" aria-labelledby="confirm-title">
  <h2 id="confirm-title">Delete item?</h2>
  <button id="confirm-btn" autofocus>Delete</button>
  <button onclick="close()">Cancel</button>
</div>

<!-- Form dialog: focus on first input -->
<div role="dialog" aria-labelledby="form-title">
  <h2 id="form-title">Edit profile</h2>
  <label for="name">Name</label>
  <input type="text" id="name" autofocus>
  <button type="submit">Save</button>
</div>

<!-- Information dialog: focus on heading or close -->
<div role="dialog" aria-labelledby="info-title">
  <h2 id="info-title" tabindex="-1" autofocus>System notification</h2>
  <p>Your session will expire in 5 minutes.</p>
  <button onclick="close()">OK</button>
</div>

JavaScript Initial Focus

function openModal(dialogElement) {
  dialogElement.style.display = 'block';

  // Find the best element to focus
  const primaryButton = dialogElement.querySelector('[data-primary]');
  const firstInput = dialogElement.querySelector('input, select, textarea');
  const firstButton = dialogElement.querySelector('button');
  const heading = dialogElement.querySelector('h2, h1, h3');

  if (primaryButton) {
    primaryButton.focus();
  } else if (firstInput) {
    firstInput.focus();
  } else if (firstButton) {
    firstButton.focus();
  } else if (heading) {
    heading.setAttribute('tabindex', '-1');
    heading.focus();
  }

  trapFocus(dialogElement);
}

Common Mistakes

1. No initial focus set

Focus stays on the trigger element, leaving the user unsure that the modal has opened.

2. Focusing the close button first

The close button should not receive initial focus unless it is the primary action.

3. autofocus on multiple elements

Only one element should have autofocus. Multiple autofocus attributes are ignored.

4. Fixed initial focus for all modals

Different dialogs need different focus targets. Confirmation: primary button. Form: first input. Info: heading or OK button.

5. autofocus on hidden elements

autofocus on a hidden element is ignored. Ensure the element is visible when the modal opens.

Practice Questions

1. Where should initial focus go in a confirmation dialog? On the primary action button (e.g., "Confirm," "Delete").

2. Where should initial focus go in a form dialog? On the first input field in the form.

3. What HTML attribute sets initial focus automatically? The autofocus attribute on an input, button, or focusable element.

Challenge: Build three different dialog types (confirmation, form, info) with appropriate initial focus for each.

FAQ

Mini Project

Create a modal manager function that accepts a dialog type ('confirm', 'form', 'info') and sets initial focus appropriately for each type.

What's Next

Learn about Return Focus and how to send focus back to the correct element when the modal closes.