Website tabs change the wrong panel: align focus, selection and content

Decide whether the row is tabs or navigation

Start by writing what selection does. If Equipment takes the reader to another page with its own address and navigation history, ordinary links may express the job more clearly. If each label controls a related content panel within the current view, a tab pattern may fit. A line beneath a word is visual styling; it does not decide the interaction.

The W3C tabs pattern pairs each tab with a panel and identifies the active tab through selected state. Its keyboard model moves through tab labels with arrow keys and into the active content through the page sequence. Automatic activation is appropriate only when displaying panels has no noticeable latency; otherwise separate focus movement from activation.

Do not convert a list of independent resources into tabs simply to save vertical space. A reader comparing equipment with access arrangements may need both sections available together. The accordion guide helps distinguish another disclosure choice. Choose the content relationship before choosing a fashionable component.

Make focused and selected states independently understandable

In a manual workshop tab set, moving focus to Access does not yet replace Equipment. That difference must be understandable. Give focus a visible treatment of its own and keep the selected marker attached to the panel currently displayed. If both states use the same subtle colour change, a reviewer cannot tell whether a key moved attention or actually changed content.

The APG manual example separates focus from activation with Enter or Space. It also explicitly requires browser and assistive-technology testing before production use. Treat the example as a reference for reasoning, rather than proof that copying its appearance certifies another interface.

For your own specification, describe one concrete moment: Equipment remains selected while Access has keyboard focus; activating Access then updates the marker and panel together. This is more reviewable than saying that the tabs should be accessible. Include the reverse change and movement beyond the final label so the boundary behavior is intentional.

Connect the label to the correct content

Inspect one complete relationship at a time. A label for Equipment must refer to the Equipment panel, and that panel must be named by the same label. Reused identifiers, copied references and mismatched selected flags are useful things to investigate when the correct-looking tab opens the wrong text.

MDN’s tab-role reference explains the role and state relationships, recommends a button foundation and notes that descendants of a tab become presentational in accessibility APIs. Roles do not implement the switching behavior. Put meaningful panel structure in the panel rather than expecting a heading nested inside the tab label to retain heading semantics.

Write down what happens to content that is not active. A link visually belonging to a hidden workshop panel should not unexpectedly interrupt the current reading path. Conversely, the active panel needs a sensible entry point. Examine the page sequence after activation, rather than checking only whether a rectangle appears on screen.

Choose a loading contract before automatic activation

Suppose Access retrieves travel details from another service. A rapid arrow movement should not strand the reader behind a chain of slow requests or show Equipment’s completed response under an Access label. Decide whether to preload, use manual activation or present a stable pending state. These are product choices to verify against your application, not promises supplied by the ARIA attributes.

Include failure and late completion. Keep the selected label clear while a panel explains that its content could not be loaded. Provide a retry or another useful route without silently selecting a different section. The dynamic status guide covers communicating changing outcomes without repeatedly moving focus.

Keep the active section usable on a narrow screen

Review long labels, text enlargement and a selected item beyond the first visible label. Readers should not have to guess that a partly clipped item owns the displayed content. If the design changes to another presentation on mobile, preserve the meaning and selection deliberately rather than leaving a stale desktop state behind.

The navigation review is useful when the row actually consists of page links. Keep that decision separate from the responsive arrangement. Making a row scroll horizontally does not establish whether it should behave as navigation or as a tab set.

Confirm one complete switch before calling the component fixed

Finish with a fresh visit, a nondefault panel and continuation into its content. Confirm the visible label, selected state, correct panel and reading path together, then repeat the return to the original panel. If an update changes loading behavior, revisit the activation choice. The important outcome is that a reader can reliably choose and read the intended section, not merely that every tab responds to a click.