사용자 요구에 따른 실행

무엇을 요구하나요?

새 창 열기, 다른 페이지로 이동, 초점 이동처럼 큰 화면 변화는 사용자가 요청했을 때만 일어나야 합니다. 화면 낭독기 사용자와 키보드 사용자는 탐색만 했는데 화면이 바뀌면 어디에 있는지 잃어버립니다.

하면 안 되는 것	이렇게
선택 상자를 바꾸자마자 페이지 이동	[이동] 버튼을 눌렀을 때 이동
입력 칸에 초점만 와도 팝업	버튼을 눌렀을 때 팝업
예고 없이 새 창 열기	링크 글자로 “새 창” 알리기
페이지를 열자마자 팝업 창	페이지 안 레이어로, 닫기 쉽게

자주 틀리는 예

1. 선택 상자를 바꾸면 바로 이동 (패밀리 사이트)

키보드 사용자는 방향키로 목록을 훑기만 해도 첫 항목으로 이동해 버립니다.

<select onchange="location.href = this.value">
  <option>패밀리 사이트</option>
  <option value="https://a.example">계열사 A</option>
</select>

<form action="/go" onsubmit="location.href = this.site.value; return false;">
  <label for="site">패밀리 사이트</label>
  <select id="site" name="site">
    <option value="https://a.example">계열사 A</option>
  </select>
  <button type="submit">이동</button>
</form>

2. 예고 없는 새 창

<a href="https://partner.example" target="_blank">협력사 안내</a>

<a href="https://partner.example" target="_blank" rel="noopener">협력사 안내<span class="sr-only"> (새 창)</span></a>

3. 초점을 받으면 자동으로 다음 칸으로 이동

전화번호 앞자리를 다 입력하면 다음 칸으로 자동 이동하는 서식은 사용자가 예상하지 못한 초점 이동입니다. 한 칸으로 합치거나, 자동 이동을 하지 마세요.

확인하는 방법

1. Tab으로 모든 요소를 지나가며 초점만 옮겼는데 화면이 바뀌는지 확인하세요.
2. 선택 상자는 방향키로 값을 바꿔 보며 바로 이동·제출되는지 확인하세요.
3. 새 창으로 열리는 링크(target="_blank")를 찾아 미리 알리는지 확인하세요.