{"id":"l-a11y-3-2","courseId":"web-accessibility","lang":"en","kind":"lesson","summary":"Move keyboard focus deliberately when content changes without a page load, using the native dialog element, the inert attribute and focus management on route changes.","html":"

On a traditional website, the browser looks after focus for you. Every click on a link loads a new page, focus resets to the top, and the screen reader announces the new title. Ticketly is a single-page app with modals, drawers and client-side routing, so none of that happens. When your code changes the screen, your code decides where focus goes. If it doesn’t decide, focus stays wherever it was, often on something now hidden, covered or deleted.

\n

The modal that traps nobody

\n

Ticketly’s “Book now” button opens a booking modal: a div with a dark overlay. Watch what happens with a keyboard. The modal appears, but focus is still on “Book now” behind it. Tab moves to the next festival link on the page underneath. Samir’s screen reader says nothing about a modal; to him, nothing happened.

\n

A correct modal dialog needs five behaviours:

\n
    \n
  1. Focus moves into the dialog when it opens.
    2. \n
  2. Tab and Shift+Tab stay inside it while it is open.
    3. \n
  3. The page behind is hidden from assistive technology.
    4. \n
  4. Escape closes it.
    5. \n
  5. Focus returns to the control that opened it.
    6. \n
\n

For years this took a focus-trap library and fifty lines of code. Today the native <dialog> element opened with showModal() does all five.

\n
ticketly/booking.html
<button type=\"button\" id=\"book\">Book now</button>\n\n<dialog id=\"booking\" aria-labelledby=\"booking-title\">\n  <h2 id=\"booking-title\">Book Friday pass</h2>\n  <label for=\"qty\">Quantity</label>\n  <input id=\"qty\" type=\"number\" min=\"1\" max=\"6\" value=\"1\">\n  <button type=\"button\" id=\"confirm\">Confirm</button>\n  <button type=\"button\" id=\"close\">Close</button>\n</dialog>
\n
ticketly/booking.js
const dialog = document.querySelector('#booking');\ndocument.querySelector('#book').addEventListener('click', () => dialog.showModal());\ndocument.querySelector('#close').addEventListener('click', () => dialog.close());
\n

showModal() places the dialog in the top layer, above everything, and makes the rest of the document inert: unfocusable, unclickable and absent from the accessibility tree. Focus goes to the element with autofocus if there is one, otherwise to the first focusable element inside (here the quantity field), otherwise to the dialog itself. Escape closes it. When it closes, the browser returns focus to the element that had it before, the “Book now” button. The ::backdrop pseudo-element styles the overlay.

\n
\n Focus starts on the Book now button. showModal moves it to the first field in the dialog, where Tab cycles within the dialog while the page is inert. Close or Escape returns focus to the Book now button.\n \n \"Book now\"\n \n dialog (top layer)\n Quantity → Confirm\n → Close → Quantity\n \n showModal()\n \n close / Esc\n \n Page behind\n inert\n Tab never leaves the dialog while it is open\n
Focus during a dialog’s life
\n\n

Give every dialog a name with aria-labelledby pointing at its heading. When it opens, NVDA reads “Book Friday pass, dialog, Quantity, spin button, 1”, which tells Samir exactly where he is. If the dialog’s first field isn’t the best starting point, say a long terms dialog, put autofocus on the element that should receive focus, such as its Close button, or its heading made focusable with tabindex="-1" so reading starts at the top.

\n

inert for everything else

\n

Not every hidden panel is a dialog. Ticketly’s mobile menu slides off-screen when closed, but its links are still in the DOM and still focusable, so keyboard users tab through eight invisible links. The inert attribute switches a whole subtree off: no focus, no clicks, no accessibility tree.

\n
HTML
<nav id=\"mobile-menu\" class=\"drawer\" inert>…</nav>
\n
JavaScript
function setMenuOpen(open) {\n  menu.inert = !open;\n  menu.classList.toggle('drawer--open', open);\n  toggle.setAttribute('aria-expanded', String(open));\n}
\n

inert has been supported in all major browsers since 2023. Use it for closed drawers, off-screen carousel slides and content behind a custom overlay you can’t convert to <dialog>.

\n

Focus after route changes and deletions

\n

When Ticketly’s router swaps the home page for the checkout page, the link the user activated disappears, and focus falls back to <body>. The next Tab starts from the top of the document, and the screen reader announces nothing. Do what a page load would have done:

\n
ticketly/router.js
function afterNavigate() {\n  const heading = document.querySelector('main h1');\n  document.title = `${heading.textContent} · Ticketly`;\n  heading.setAttribute('tabindex', '-1');\n  heading.focus();\n}
\n

Focusing the h1 announces the new page’s name and puts the user at the start of its content. tabindex="-1" makes the heading focusable from script without adding a Tab stop. Some frameworks do part of this for you; check what yours does before adding your own.

\n

The same principle applies to deletions. When a user removes a ticket from the basket, the “Remove” button they pressed is gone. Move focus somewhere sensible, such as the next item’s Remove button or the basket heading, instead of letting it drop to the top of the page.

\n\n

Native elements and a few lines of focus management cover most of Ticketly. When there is no native element, you need ARIA, which is where the next lesson goes.

\n","toc":[{"id":"sec-1","text":"The modal that traps nobody","level":2},{"id":"sec-2","text":"inert for everything else","level":2},{"id":"sec-3","text":"Focus after route changes and deletions","level":2}],"takeaways":["When your script changes what is on screen, it is responsible for where focus goes; the browser only manages focus on full page loads.","A dialog opened with showModal() moves focus inside, makes the rest of the page inert, closes on Escape, and returns focus to the opener when it closes.","The inert attribute removes a whole subtree from focus, clicks and the accessibility tree, which is ideal for closed drawers and off-screen panels.","After a client-side route change, update document.title and move focus to the new page’s h1 (with tabindex=“-1”)."],"further":[{"title":"MDN: The Dialog element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog"},{"title":"MDN: HTMLElement inert property","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"},{"title":"W3C APG: Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"}],"quiz":[{"q":"

A keyboard user presses Enter on “Book now”, which runs this code. Where is focus afterwards?

\n
JavaScript
bookButton.addEventListener('click', () => {\n  document.querySelector('.modal').hidden = false; // a div styled as a modal\n});
\n","options":[{"text":"Still on the “Book now” button, behind the modal","why":"Correct. Showing a div moves nothing. The user’s next Tab continues through the page behind the overlay, and a screen reader may not mention the modal at all."},{"text":"On the first input inside the modal, because modals receive focus automatically","why":"Only the native dialog element opened with showModal() moves focus. A div with hidden removed is just more content."},{"text":"On the body element, because the click moved focus away","why":"Activating a button doesn’t move focus away from it. Focus only changes if your code changes it."}],"answer":0},{"q":"

Which of these does dialog.showModal() NOT do for you?

","options":[{"text":"Make content outside the dialog inert","why":"showModal() puts the dialog in the top layer and makes the rest of the document inert, so Tab can’t escape to the page behind."},{"text":"Close the dialog when the user presses Escape","why":"Modal dialogs close on Escape by default, firing a cancel event you can listen to."},{"text":"Give the dialog an accessible name","why":"Correct. You still need to name it, typically with aria-labelledby pointing at its heading, so screen readers announce “Book Friday pass, dialog”."},{"text":"Move focus into the dialog","why":"showModal() focuses an element with autofocus, otherwise the first focusable element inside, otherwise the dialog itself."}],"answer":2},{"q":"

Ticketly’s mobile menu slides off-screen when closed, but Tab still visits its eight links while they are invisible. What is the simplest robust fix?

","options":[{"text":"Add aria-hidden="true" to the menu when it is closed","why":"aria-hidden hides content from assistive technology but leaves it focusable, so keyboard users still tab into invisible links, now with no announcement."},{"text":"Add tabindex="-1" to each of the eight links","why":"It works until someone adds a ninth link, and you must remember to undo it on open. inert does the whole subtree in one attribute."},{"text":"Set the inert attribute on the menu while it is closed","why":"Correct. inert removes the whole subtree from the tab order, pointer events and the accessibility tree, and removing the attribute restores everything."}],"answer":2},{"q":"

After a client-side navigation from the home page to “/checkout”, what should Ticketly’s router do for screen reader users?

","options":[{"text":"Nothing; screen readers detect URL changes automatically","why":"Screen readers react to full page loads. A pushState navigation changes the DOM silently, and focus stays on the link that was clicked, which may no longer exist."},{"text":"Reload the page so the browser announces it","why":"That throws away the benefits of client-side routing. Managing focus and the title gives the same result without a reload."},{"text":"Move focus to the first link in the site header","why":"That makes the user re-tab through the whole header on every navigation, and doesn’t announce what page they are on."},{"text":"Update document.title and move focus to the checkout page’s h1, which has tabindex=“-1”","why":"Correct. The user hears the new heading, Tab continues from the top of the new content, and the window title matches the page."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Harbour Lights: Friday

\n

Standing tickets, SAR 180 each.

\n \n Festival FAQ\n
\n\n","css":".modal { border: 0; border-radius: 12px; padding: 16px 20px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.3); }\ndiv.modal:not([hidden]) { position: fixed; inset: 10% 10% auto; background: #fff; }\n.modal::backdrop { background: rgb(20 16 40 / 0.6); }\n.modal h2 { margin-block-start: 0; }\n.modal input { display: block; margin-block: 4px 12px; font: inherit; }\n","js":"const modal = document.querySelector('#booking');\n\ndocument.querySelector('#book').addEventListener('click', () => {\n modal.hidden = false;\n});\n\ndocument.querySelector('#close').addEventListener('click', () => {\n modal.hidden = true;\n});\n"},"solution":{"html":"
\n

Harbour Lights: Friday

\n

Standing tickets, SAR 180 each.

\n \n Festival FAQ\n
\n\n\n

Book Friday pass

\n \n \n \n \n","css":".modal { border: 0; border-radius: 12px; padding: 16px 20px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.3); }\ndiv.modal:not([hidden]) { position: fixed; inset: 10% 10% auto; background: #fff; }\n.modal::backdrop { background: rgb(20 16 40 / 0.6); }\n.modal h2 { margin-block-start: 0; }\n.modal input { display: block; margin-block: 4px 12px; font: inherit; }\n","js":"const modal = document.querySelector('#booking');\n\ndocument.querySelector('#book').addEventListener('click', () => {\n modal.showModal();\n});\n\ndocument.querySelector('#close').addEventListener('click', () => {\n modal.close();\n});\n"},"checks":[{"id":"named-dialog","test":"const d = $('#booking'); if (!d || d.tagName !== 'DIALOG') return false; const ids = (d.getAttribute('aria-labelledby') || '').split(/\\s+/).filter(Boolean); const viaLabelledby = ids.some((id) => document.getElementById(id)?.textContent.includes('Book Friday pass')); return viaLabelledby || /Book Friday pass/.test(d.getAttribute('aria-label') || '');"},{"id":"opens-modal","test":"const b = $('#book'); b.focus(); await click(b); const d = $('#booking'); return !!d.open && d.matches(':modal');"},{"id":"focus-inside","test":"return $('#booking').contains(document.activeElement) && document.activeElement !== document.body;"},{"id":"page-inert","test":"const inside = document.activeElement; $('#book').focus(); const escaped = document.activeElement === $('#book'); inside.focus(); return !escaped;"},{"id":"focus-returns","test":"const d = $('#booking'); if (d.tagName !== 'DIALOG' || !d.open || !d.contains(document.activeElement)) return false; await click('#close'); await tick(30); return !d.open && document.activeElement === $('#book');"}],"title":"Turn the booking modal into a real dialog","prompt":"

Ticketly’s booking modal is a div that appears when you press Book now. Focus stays behind it, the page underneath stays reachable, and screen readers aren’t told a dialog opened.

\n

Convert #booking into a native <dialog> (keep the id) with an accessible name taken from its heading “Book Friday pass”. Open it as a modal from the Book now button and close it from the Close button. When it closes, focus should be back on Book now.

\n","hints":["Change the div to and remove the hidden attribute; a closed dialog is hidden already.","Name it with aria-labelledby=“booking-title”.","Use modal.showModal() to open and modal.close() to close. The browser moves focus in, makes the page inert, and restores focus on close."],"explanation":"

showModal() does the work that used to need a focus-trap library: it moves focus to the first focusable element (the quantity field), makes everything outside the dialog inert so neither Tab nor a screen reader’s virtual cursor can wander behind it, closes on Escape, and returns focus to Book now when the dialog closes. aria-labelledby makes NVDA announce “Book Friday pass, dialog” on open. Notice that the JavaScript barely changed; the improvement comes from choosing the right element and method.

\n","checkLabels":{"named-dialog":"#booking is a named “Book Friday pass”","opens-modal":"Book now opens it as a modal dialog","focus-inside":"Focus moves inside the dialog when it opens","page-inert":"The page behind can’t receive focus while the dialog is open","focus-returns":"Close closes the dialog and focus returns to Book now"}},"words":729,"readMinutes":3}