3.2.2 입력 중인 경우

요구 사항

사용자 인터페이스 구성 요소의 설정을 바꾸는 것(값 입력, 선택 상자 변경, 체크박스·라디오 버튼 선택 등)이 자동으로 맥락의 변화를 일으키지 않아야 합니다. 단, 사용자가 그 동작을 하기 전에 어떤 변화가 일어나는지 미리 알린 경우는 예외입니다.

대표적인 위반은 <select>에서 항목을 고르자마자 페이지가 이동하는 "바로가기 셀렉트"입니다. 키보드로 화살표를 누르면 첫 이동에서 곧바로 다른 페이지로 넘어가 원하는 항목까지 갈 수 없습니다.

값에 따라 아래쪽에 추가 입력란이 나타나는 것처럼 맥락 변화가 아닌 콘텐츠 변화는 허용됩니다.

왜 필요한가요

사용자는 값을 바꾸는 것과 그 값을 "적용하는 것"을 별개의 동작으로 기대합니다. 키보드·화면낭독기 사용자는 선택지를 하나씩 이동하며 살펴보는데, 그 과정에서 맥락이 바뀌면 작업을 이어 갈 수 없습니다.

도움받는 사용자

• 키보드 사용자
• 시각장애인(화면낭독기 사용자)
• 인지장애 사용자
• 운동장애 사용자

적용 방법

값 변경 후 별도의 실행 버튼을 두는 것이 가장 확실합니다.

<select onchange="location.href=this.value" aria-label="관련 사이트">
  <option value="">관련 사이트</option>
  <option value="https://example.go.kr">기관 A</option>
  <option value="https://example.or.kr">기관 B</option>
</select>

<form action="/go">
  <label for="site">관련 사이트</label>
  <select id="site" name="url">
    <option value="https://example.go.kr">기관 A</option>
    <option value="https://example.or.kr">기관 B</option>
  </select>
  <button type="submit">이동</button>
</form>

자동 동작이 꼭 필요하면 컨트롤 앞쪽에서 미리 알립니다(예: "국가를 선택하면 해당 국가 페이지로 이동합니다."). 숫자 4자리를 다 입력하면 다음 칸으로 포커스를 자동 이동하는 방식도 맥락 변화(포커스 이동)이므로, 미리 안내하거나 쓰지 않는 것이 좋습니다.

사례

<p id="lang-hint">언어를 선택하면 페이지가 해당 언어로 다시 열립니다.</p>
<label for="lang">언어</label>
<select id="lang" aria-describedby="lang-hint">...</select>

자주 하는 실수

• <select>의 change 이벤트에서 바로 페이지를 이동합니다.
• 라디오 버튼·체크박스를 선택하면 사전 안내 없이 폼이 제출되거나 새 창이 열립니다.
• 입력 길이가 차면 사전 안내 없이 포커스를 다음 필드로 옮깁니다.

검사 방법

• 폼 컨트롤의 값을 키보드로 바꿔 봅니다(셀렉트는 화살표 키, 체크박스·라디오는 Space).
• 값을 바꾸는 것만으로 페이지 이동, 새 창, 제출, 포커스 이동이 일어나는지 확인합니다.
• 일어난다면 그 동작을 컨트롤보다 앞에서 미리 알리는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.2.2 (새 창)