2.4.3 포커스 순서

요구 사항

웹 페이지를 순차적으로 탐색할 수 있고 그 탐색 순서가 의미나 조작에 영향을 준다면, 포커스를 받는 구성 요소들이 의미와 조작성을 유지하는 순서로 포커스를 받아야 합니다. 화면의 시각적 순서와 정확히 같을 필요는 없지만, 사용자가 혼란스럽지 않은 논리적 순서여야 합니다.

왜 필요한가요

포커스가 화면 이곳저곳으로 튀면 키보드 사용자와 화면 확대 사용자는 현재 위치를 놓치고, 폼을 잘못된 순서로 작성하게 됩니다.

도움받는 사용자

• 키보드만 사용하는 사용자
• 시각장애인(화면낭독기 사용자)
• 저시력 사용자(화면 확대 사용자)
• 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
• 인지·학습 장애가 있는 사용자

적용 방법

• DOM 순서를 논리적 순서대로 작성하고, tabindex에 양수(1 이상)를 쓰지 않습니다.
• 대화상자를 열면 포커스를 대화상자 안으로 옮기고, 닫으면 연 버튼으로 돌려놓습니다.
• 펼친 메뉴·삽입된 콘텐츠는 트리거 바로 뒤의 DOM 위치에 넣습니다.
• 자세한 내용은 키보드와 포커스 관리 가이드를 참고하세요.

사례

<input tabindex="3" aria-label="이름">
<input tabindex="1" aria-label="이메일">
<button tabindex="2">가입</button>

<label>이름 <input></label>
<label>이메일 <input type="email"></label>
<button>가입</button>

자주 하는 실수

• 양수 tabindex로 포커스 순서가 화면 흐름과 어긋납니다.
• 모달을 열어도 포커스가 뒤쪽 페이지에 남아 있습니다.
• CSS로 배치를 바꾸어 Tab 순서가 화면 순서와 크게 다릅니다.

검사 방법

• Tab으로 이동하며 포커스 순서가 읽기·조작 흐름에 맞는지 확인합니다.
• 대화상자, 메뉴, 동적으로 추가된 콘텐츠에서 포커스가 적절한 위치로 이동하는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.4.3 (새 창)