Roving tabindex
로빙 tabindex
로빙 tabindex는 그룹에 한 개의 Tab 정지를 제공합니다. 그런 다음 화살표 키로 그룹 내 항목 간 포커스를 이동할 수 있습니다.
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemtabindex=0이탤릭-1링크-1인용-1focus() + swap tabindexone tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemA11Y다른 예시
도구 모음은 tabindex 0인 Bold 버튼으로 시작합니다. 다른 버튼들은 -1을 사용합니다. 오른쪽 화살표를 누르면 0에서 Italic으로 이동합니다.
주요 부분
- 01복합 위젯
- 02단일 탭 정지점
- 03비활성 항목
- 04화살표 키 규칙
- 05업데이트된 활성 항목
- 06탭 종료
사용할 때
문서화된 화살표 키 동작이 있는 복합 위젯에 사용하세요. 일반 Tab 순서에는 정확히 하나의 항목만 유지하세요.
다음 경우에는 사용하지 마세요
관련 없는 링크나 전체 페이지에는 사용하지 마십시오. tabindex 0인 항목을 두 개 남기지 마십시오.
코드에서 사용된 이름
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active item 출시하기 전에
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome：Complete the task with 로빙 tabindex (Roving tabindex)。 User context：도구 모음은 tabindex 0인 Bold 버튼으로 시작합니다. 다른 버튼들은 -1을 사용합니다. 오른쪽 화살표를 누르면 0에서 Italic으로 이동합니다. Recommended pattern：로빙 tabindex (Roving tabindex)。 Why it fits：문서화된 화살표 키 동작이 있는 복합 위젯에 사용하세요. 일반 Tab 순서에는 정확히 하나의 항목만 유지하세요. Do not use it when：관련 없는 링크나 전체 페이지에는 사용하지 마십시오. tabindex 0인 항목을 두 개 남기지 마십시오. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 로빙 tabindex (Roving tabindex) is used now. Definition: 로빙 tabindex는 그룹에 한 개의 Tab 정지를 제공합니다. 그런 다음 화살표 키로 그룹 내 항목 간 포커스를 이동할 수 있습니다. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.