Focus design for interactive film choices: keep order, position, and feedback visible
Define entry focus, movement order, obscuration handling, confirmation feedback, and return position so keyboard and remote viewers always know where they are.
Introduction
Focus in a choice interface must answer three questions: where am I, where will I move next, and what happened after confirmation? A visible ring is only one part; order, obscuration, and return position must align with the shot and branch state.
Interactive film accessibility cannot be reduced to a subtitle check before launch. The choice interface, playback controls, branch state, and media content form one complete journey. If any layer cannot be perceived, operated, or understood, a viewer can lose the means to continue. WCAG 2.2 defines the principles of perceivable, operable, understandable, and robust web content. This article translates relevant guidance into a production method for interactive film. It does not claim that following one article proves conformance; teams still need to confirm platform, market, and user-testing requirements.
Write an experience promise that can be accepted or rejected
The H02 choice appears over a close-up while two controls move with subtitle placement. After opening pause and returning, keyboard focus jumps to the page top; right on a remote jumps to player volume. The controls are visible, but the path is unpredictable.
The examples use a fictional short film, The Letter from Fog Harbor. A viewer investigates a swapped letter at night and chooses among a warehouse, a waiting room, and a lighthouse. All people, routes, test records, and asset IDs are original teaching material. They are not real user research, completed test results, or automatic DramaFork features.
Start with one experience promise and one failure condition. The promise names who must complete which task, on what device, and under what condition. The failure condition identifies the point at which release must stop. “A keyboard-only viewer can complete every choice” is testable; “keyboard friendly” is not. On entry, focus the first item or the viewer's last explicit item. Follow visual and semantic order. Keep the indicator clear of captions, dialogs, and screen edges. Confirm with accepted-choice feedback before closing; cancel by returning to the control that opened the layer.
Connect requirements, implementation, and evidence
| Field | Question | Evidence |
|---|---|---|
| Viewer task | What must the viewer perceive, decide, or control? | A concise task and context |
| Interaction rule | Does the default and alternative path reach the same result? | Input, focus, timing, or presentation rule |
| Branch effect | Do settings, backtracking, and re-entry preserve story state? | Entry, exit, and retained-state record |
| Acceptance | Who tests which device, and where does a failure return? | Route ID, action log, and owner |
H02 fixes the order as left then right and treats pause as a separate focus region. Resuming returns to the same choice. If that choice becomes unavailable because state changed, move to the nearest available item and announce the change.
All four fields must refer to the same version. Updating a mockup without the route record makes it impossible to tell whether an old defect is fixed. Updating code without the experience promise turns “the control responds” into a false claim that the viewer understood it. Editorial, interaction, engineering, and QA are accepting a repeatable journey, not a screenshot.
Put the requirement into the production workflow
First, inventory the main route, short route, backtrack route, and no-input route. Mark every choice, playback control, and essential piece of information. Second, give each task a default and an alternative method that reach the same narrative result. Third, bind the rule to stable scene IDs, asset IDs, and state fields so that copy edits do not destroy traceability.
Fourth, test cheaply before polishing: complete a route by keyboard, at enlarged text size, with motion reduced, and after pausing and returning. Fifth, run cross-device and assistive-technology checks while recording steps, expected results, actual results, and evidence. Draw entry, movement, and exit paths for every overlay and bind them to node IDs. Test keyboard, remote, and magnification. Open captions, settings, and errors in turn to confirm that focus remains visible and never lands on a hidden control.
A useful record does not say “looks fine.” It says: “Enter at H02, enable the alternative setting, choose the left action, verify clue_letter=true, and confirm that H03 acknowledges it.” That record covers entry, action, feedback, and exit. When it fails, the team can locate the fault in input, presentation, or narrative state.
Most failures occur at system boundaries
Frequent defects include hover-only styling, incidental DOM order, and lost focus after a dialog closes. Color change alone is also weak. Add a clear boundary or shape change that remains distinguishable from the moving background.
Accessibility controls also fail when they are buried in a settings page that an affected viewer cannot reach. Provide a discoverable entry at launch, at the first choice, and in the pause menu. A changed preference needs immediate perceivable feedback and must remain active at the next node. If it disappears after reload, fix it or disclose the limitation before release.
Automation can flag missing names, some contrast problems, and some focus defects. It cannot decide whether choice copy is understandable, whether audio description spoils another branch, or whether pausing breaks narrative comprehension. Route testing and participation by disabled users remain essential. Return content defects to editorial, media defects to sound or post-production, state defects to engineering, and scope conflicts to the accountable owner.
Release gates must cover the complete process
Move from player to choice, open and close pause, change captions, return, and confirm with exactly one visible focus at every step. Order matches the scene, focus is not obscured, and confirmation and cancellation land predictably.
The minimum release packet contains the feature scope, route inventory, preference defaults, interface copy in all five locales, devices and input methods tested, known limitations, defect owners, and one end-to-end record from opening to ending. W3C sources provide standards and explanatory guidance. The tables, node labels, and fictional case here are an editorial method, not a mandated W3C template.
Players, browsers, and television WebViews handle focus differently. A visual design expresses intent, but scrolling, zoom, fullscreen, and system focus must be checked in the running environment.
For the final check, ask someone outside the production team to reproduce the experience from the record. If they still need to ask what to press, how much time remains, what a cue means, or where a resumed session begins, the handoff is incomplete. Write the answer back into the rule and its evidence before publishing.
Sources: W3C Understanding SC 2.4.7: Focus Visible; W3C Understanding SC 2.1.1: Keyboard.
