3.2.1 포커스를 받은 경우

요구 사항

사용자 인터페이스 구성 요소가 포커스(초점)를 받았을 때 맥락의 변화(change of context)가 시작되지 않아야 합니다.

맥락의 변화란 사용자가 알아차리지 못하면 방향을 잃을 수 있는 큰 변화를 말합니다. WCAG는 다음을 예로 듭니다.

• 사용자 에이전트(브라우저) 변경
• 뷰포트 변경(새 창·새 탭 열기 등)
• 포커스 이동
• 페이지의 의미를 바꾸는 콘텐츠 변경(예: 다른 페이지로 이동)

펼침 메뉴가 열리거나 툴팁이 나타나는 정도의 콘텐츠 변화는 맥락 변화가 아니므로 이 기준 위반이 아닙니다(단, 툴팁은 1.4.13 등 다른 기준을 지켜야 합니다).

왜 필요한가요

키보드 사용자는 Tab 키로 요소를 하나씩 지나가며 탐색합니다. 지나가기만 했는데 새 창이 열리거나 다른 페이지로 넘어가면 원하는 곳에 도달할 수 없습니다. 화면낭독기 사용자와 화면 확대 사용자는 변화가 일어난 것 자체를 알아차리지 못해 길을 잃습니다.

도움받는 사용자

• 키보드 사용자
• 시각장애인(화면낭독기 사용자)
• 저시력(화면 확대) 사용자
• 인지장애 사용자

적용 방법

focus, focusin 이벤트에서 페이지 이동, 새 창 열기, 폼 제출, 다른 요소로 포커스 이동을 하지 않습니다. 이런 동작은 사용자가 명시적으로 실행(클릭·Enter·제출 버튼)했을 때만 일으킵니다.

<a href="/event" id="promo">이벤트 보기</a>
<script>
  promo.addEventListener('focus', function () {
    window.open('/event-popup', 'popup');
  });
</script>

<a href="/event">이벤트 보기</a>

모달 대화상자가 열릴 때 대화상자 안으로 포커스를 옮기는 것은 사용자가 대화상자를 연 동작의 결과이므로 이 기준과 관계없습니다. 이 기준은 "포커스가 들어온 것" 자체가 방아쇠가 되는 경우를 다룹니다.

사례

<input type="text" name="q" onfocus="this.form.submit()">

<!-- 포커스를 받으면 바로 다음 칸으로 넘겨 버려 수정할 수 없음 -->
<input id="readonly-code" onfocus="document.getElementById('next').focus()">

자주 하는 실수

• 링크나 버튼이 포커스를 받으면 새 창(팝업)이 열립니다.
• 입력 필드가 포커스를 받으면 폼이 자동 제출되거나 페이지가 이동합니다.
• 포커스를 받은 요소가 즉시 포커스를 다른 요소로 옮겨 버립니다(this.blur() 등으로 포커스를 받지 못하게 하는 경우 포함).

검사 방법

• 키보드 Tab·Shift+Tab으로 페이지의 모든 포커스 가능한 요소를 차례로 지나갑니다.
• 각 요소에 포커스가 들어갈 때 새 창 열림, 페이지 이동, 폼 제출, 예상치 못한 포커스 이동이 없는지 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.2.1 (새 창)