탭 사이를 화살표 키로 탐색하기

A correct tab set is driven by the keyboard, not the mouse alone. The APG pattern expects arrow keys to move between tabs.

Pressing Tab should land on the tab set just once, not stop on every tab. The whole tablist behaves as a single stop in the page order.

Give the active tab tabindex="0" and every other tab tabindex="-1". This is the roving tabindex that keeps Tab from hitting them all.

Inside a horizontal tablist, Right and Left arrows move focus from tab to tab. This is how keyboard users explore the set.

If your tabs stack vertically, use Up and Down arrows instead. Set aria-orientation="vertical" so assistive tech knows the layout.

When focus is on the last tab and the user presses the next arrow, wrap back to the first. Looping keeps navigation smooth and predictable.

Add two shortcuts: Home moves focus to the first tab and End moves it to the last. Long tab sets become much faster to navigate.

When an arrow shifts focus, update the tabindex: set the newly focused tab to 0 and the old one to -1, then call focus on it.

With automatic activation, focusing a tab also selects it and shows its panel. It feels instant but can be heavy if panels are costly.

With manual activation, arrows only move focus; the user presses Enter or Space to select. Prefer this when revealing a panel is expensive.

Without arrow support, keyboard users must Tab through every tab and panel. Proper key handling makes the widget efficient, not just reachable.

Focus is on a tab in a horizontal tablist. The user presses the Right arrow. What should happen?

You learned tabs use a roving tabindex with arrow keys, plus Home and End. Choose automatic or manual activation based on panel cost.