Web Accessibility Academy · 강의

위젯에서 이동형 tabindex 관리하기

화살표 키로 복합 컨트롤 안을 이동하게 합니다.

레슨 4/413개 단계

위젯에서 이동형 tabindex 관리하기은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

전체 위젯을 한 번에 멈추기

도구 모음이나 라디오 그룹에서는 Tab이 각 항목이 아니라 위젯에 한 번만 도달해야 합니다. Roving tabindex가 이를 가능하게 하는 패턴입니다.

핵심 아이디어

한 번에 정확히 하나의 항목만 tabindex="0"을 가집니다. 나머지 항목에는 모두 tabindex="-1"을 지정하므로 Tab은 하나의 지점에서 그룹에 들어갑니다.

초기 설정

로드할 때 첫 번째 항목이나 선택된 항목에 tabindex="0"을 지정하고 나머지는 tabindex="-1"로 설정하십시오. 이것이 그룹의 기본 상태입니다.

<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>

화살표 키로 내부 이동

focus가 그룹 안에 들어온 뒤에는 Tab이 아니라 화살표 키로 항목 사이를 이동합니다. Tab은 계속해서 전체 위젯을 빠져나가는 데 사용됩니다.

순환 이동 단계

화살표 키를 누르면 두 가지를 수행합니다. 이전 항목을 -1로, 새 항목을 0으로 설정한 다음 새 항목에 focus()를 호출합니다. 🧭

old.tabIndex = -1;
next.tabIndex = 0;
next.focus();

0은 하나만 두는 이유

하나의 tabindex="0"만 유지하면 Tab이 항상 사용자가 마지막으로 사용한 항목에 도착하므로 위젯으로 돌아가는 일이 자연스럽게 느껴집니다.

APG 패턴 따르기

ARIA Authoring Practices Guide는 각 위젯에 필요한 정확한 키를 지정합니다. 임의로 만들지 말고 해당 키보드 맵을 따르십시오.

선택적 순환

많은 위젯은 화살표 이동을 순환시킵니다. 마지막 항목에서 오른쪽 화살표를 누르면 첫 번째 항목으로 돌아가는 방식입니다. 패턴을 순환시켜야 하는지는 APG에서 확인하세요.

Home과 End도 사용하기

복합 위젯은 첫 번째와 마지막 항목으로 바로 이동할 수 있도록 Home과 End 키를 추가하는 경우가 많습니다. 이러한 작은 배려가 탐색 속도를 높여 줍니다.

roving tabindex와 aria-activedescendant

roving tabindex는 실제 DOM 포커스를 이동시킵니다. 다른 방법인 aria-activedescendant는 컨테이너에 포커스를 유지하고 가상의 활성 항목을 가리킵니다.

전체 순환 과정 테스트하기

Tab으로 들어가 모든 항목을 화살표 키로 이동하고, Tab으로 빠져나온 다음 다시 Tab으로 들어가 포커스가 마지막으로 사용한 항목으로 돌아오는지 확인하세요.

빠른 확인

roving tabindex 툴바에서 어느 순간이든 tabindex="0"인 항목은 몇 개일까요?

인터랙티브 레슨에서 답해보세요

복습

roving tabindex를 익혔습니다. 한 항목은 0이고 나머지는 -1이며, 화살표 키로 0이 되는 항목을 이동시키고, Tab은 위젯 전체를 지나 이동합니다. 🚀

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“위젯에서 이동형 tabindex 관리하기” 강의는 무료인가요?

네 — “위젯에서 이동형 tabindex 관리하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“위젯에서 이동형 tabindex 관리하기”에서 뭘 배우나요?

화살표 키로 복합 컨트롤 안을 이동하게 합니다. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“위젯에서 이동형 tabindex 관리하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Web Accessibility Academy(으)로 돌아가기