ACCESSIBILITY · KEYBOARD FOCUS

Agent accessibility: preserve keyboard focus through an error dialog

Open an error dialog from the keyboard, follow every Tab stop, close it, and see where focus and announcements end up.

Computed experiment · sixty inspection seconds

Event trace

    Computed data

    Final metrics

    Model of keyboard focus order in a fictional chat page with four controls and a two-button dialog appended at the end of the document. It does not render a real dialog or run a screen reader; announcements are modeled from the role. Escape is handled by the dialog's own listener, so it works only while focus is inside the dialog.

    Follow the keyboard, not the mouse

    A keyboard user activates Send in a fictional agent chat, the agent call fails and an error dialog opens. The page has four controls, Message box, Send, History link and Settings; the dialog has a heading, Retry and Close and is appended at the end of the document. The lab traces every place focus goes: the initial focus, each Tab press, how the dialog is closed and where focus returns. In the opening setup focus moves to Close, three Tab presses cycle Close, Retry, Close, Retry, Escape closes the dialog, and focus then lands on the document body.

    Return focus to the invoker

    Focus on the document body means the user has lost their place: the next Tab starts again from the top of the page. Set Return focus to Send, the button that opened it, and the run becomes accessible: the announcement was made, no Tab stop left the dialog and focus ends back on Send. Choose First control on the page and focus lands on the message box, which is also a lost place for someone who was on Send.

    Traps and inert backgrounds

    With Return focus set to Send, clear Keep Tab inside the dialog but keep Make the page behind the dialog inert. Tab leaves Close for the browser address bar and comes back to Retry, never touching the page; the run stays accessible. Now also clear the inert option: Tab goes from the address bar to the Message box and then Send, two stops behind an open modal. Escape pressed there is ignored because the dialog's listener only hears keys while focus is inside it, so the dialog stays open. Closing with the Close button instead closes it, but the two stops behind the modal are still reported.

    Initial focus and announcements

    Set Focus when the dialog opens to Not moved. With an inert page, Send becomes inert and focus falls back to the document body; with a live page, focus stays on Send behind the dialog. Either way the dialog was never entered. Dialog heading and Retry are valid initial targets. Clear Announce the error and the run fails even with perfect focus handling, because a screen-reader user is never told that the call failed. Tab presses while open sets how many Tab stops are traced.

    Scope of the model

    This is a model of focus order, not a rendered dialog or an assistive-technology test. Browsers differ in how Tab leaves the page, and native dialog elements opened with showModal make the rest of the page inert automatically. Test real interfaces with a keyboard and at least one screen reader. Play, Next event, Restart, Speed and Inspection time replay the focus path step by step.

    Views are my own and do not represent any employer, past or present.

    Search