3.2.1. 사용자 요구에 따른 실행

사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

목적

사용자가 버튼 클릭이나 키보드 입력과 같은 명확한 조작을 통해 기능을 실행할 때만 콘텐츠가 변경되도록 하여, 예측할 수 있는 상호작용을 보장하는 것이 목적이다. 특히, 장애가 있는 사용자는 예상치 못한 새 창 열림이나 체크박스 선택 후 갑작스러운 페이지 이동, 초점 이동에 따른 맥락 변화로 인해 큰 혼란을 겪을 수 있으므로 이를 방지해야 한다.

배경 및 필요성

사용자는 일반적으로 버튼을 클릭하거나 키보드의 Enter 키를 눌렀을 때 기능이 실행될 것으로 예상한다. 그러나, 초점을 받거나 체크박스 및 콤보박스에서 항목을 선택하는 것만으로 기능이 실행될 것이라고는 예상하지 않는다.

화면낭독프로그램을 사용하는 시각장애인은 현재 페이지의 흐름을 파악하는 중에 자동으로 새 창이 열리거나 초점이 이동하면 원래의 흐름을 놓칠 수 있다. 이는 사용자가 예상하지 못한 상황에서 맥락을 이해하기 어렵게 만든다. 운동 장애가 있는 사용자는 의도치 않은 새 창 이동으로 인해 원래 창으로 돌아오는 것이 어려울 수 있다. 이는 특히 키보드나 특수 장치를 사용하는 사용자에게 큰 어려움이 될 수 있다.

콤보박스에서 항목을 변경했을 때 별도의 확인 없이 자동으로 페이지가 이동하면, 키보드 사용자나 화면낭독프로그램 사용자는 예기치 않은 맥락 변화로 인해 현재 위치를 잃을 수 있다. 특정 인지적 제한이 있는 사용자는 갑작스러운 맥락 변화가 발생하면 정보 탐색에 어려움을 겪을 수 있다.

마우스가 올라가거나(hover) 키보드 초점을 받았을 때 버튼 색상이 변하거나 그림자가 생기는 등 시각적 효과가 발생하는 것은 단순한 피드백으로 간주한다. 이는 사용자에게 현재 상태를 알려주는 역할을 하며, 기능 실행에는 영향을 미치지 않는다.

하지만 마우스를 올리거나 초점을 받는 것만으로 새 창이 열리거나, 페이지가 변경되는 등 맥락의 변화가 발생하면 사용자가 의도하지 않은 기능 실행이라 오류로 본다.

기본 규칙

모든 콘트롤이나 입력 기능은 사용자의 명시적 조작(클릭, Enter 키 입력 등)으로만 실행되어야 한다.
새 창이나 팝업은 사용자가 요청하거나 조작한 경우에만 열려야 한다.
초점이 이동하거나 포인터가 올려진 상태에서는 단순 시각적 피드백(예: 색상 반전, 테두리 변화)만 허용되며, 기능이 자동으로 실행되지 않아야 한다.

적용 사례

1) 사용자 의도에 의한 명확한 실행

관련 사이트로 이동하는 기능을 콤보박스로 구현할 때, 사용자는 옵션 선택 목록에서 이동할 사이트를 선택한 후 별도의 ‘이동’ 버튼을 실행해야 한다. 이러한 방식은 키보드 사용자가 방향키로 목록을 탐색하는 동안 원치 않는 사이트로 이동하는 문제를 방지할 수 있다.

이미지. change 이벤트를 사용하지 않고 별도의 이동 버튼을 제공한 사례 (출처: 식의약데이터포털)

2) 새 창 열림 정보 사전 제공

새 창에서 콘텐츠가 열릴 경우, 사용자는 기존 창과 새 창 사이의 관계 및 새 창의 콘텐츠 연관성을 쉽게 파악하기 어려울 수 있다. 특히, 화면낭독프로그램 사용자는 새 창 열림을 사전에 알지 못하면 웹 탐색 흐름이 끊어질 수 있다.

링크 요소에 target="_blank" 속성만 추가한 경우, 대부분의 화면낭독프로그램이 이를 사용자에게 전달하지 못한다. 사용자가 콘텐츠 맥락의 변화를 예측할 수 있도록 별도로 새 창 열림 정보를 제공해야 한다.

이를 위해 화면에는 보이지 않지만, 화면낭독프로그램이 인식할 수 있는 숨김 텍스트를 추가하여 제공할 수 있다.

또한, 모든 사용자가 동등한 정보를 인식할 수 있도록 링크 옆에 새 창 아이콘을 추가하거나 ‘새 창 열림’과 같은 텍스트를 제공하여 시각적으로 구분되는 정보를 함께 제공하는 방법도 있다.

<ul class="list">
  <li class="item">
    <a href="..." class="link">카카오</a>
  </li>
  <li class="item">
    <a href="..." target="_blank" class="link">카카오페이 <span class=" visually-hidden">(새창열림)</span></a>
  </li>
  <li class="item">
    <a href="..." target="_blank" class="link">카카오뱅크 <span class="visually-hidden">(새창열림)</span></a>
  </li>
  ...

개선 필요 사례

1) 새 창 열림 정보 미제공

링크에 target="_blank" 속성만 적용된 경우로, 새 창이 열림을 알리는 시각적 단서나 텍스트 안내가 없어, 화면낭독프로그램 사용자 등 대부분의 사용자는 이를 인지하지 못한다.

이에 따라 사용자는 예기치 않게 새 창이 열리고, 원래 창으로 돌아가기 위해 추가 조작이 필요하다.

<ul>
  <li><a href="..." target="_blank">접근성 센터</a></li>
  <li><a href="..." target="_blank">접근성 컨설팅</a></li>
  ...
</ul>

개선 방법

화면낭독프로그램에서 새 창이 열리는 것을 인식할 수 있도록 링크 옆에 숨김 텍스트(예: (새 창 열림))를 추가한다.

<a href="..." target="_blank">접근성 센터<span class="visually-hidden">(새 창 열림)</span></a>

참고로, title=”새창열림”은 화면낭독프로그램 설정이나 조작 방식에 따라 사용자에게 전달되지 않을 수 있으므로 중요한 정보가 누락되지 않도록 title 속성 사용은 지양한다.

추가로 새 창으로 열리는 링크에 시각적인 아이콘을 함께 제공하면, 모든 사용자도 쉽게 인식할 수 있도록 할 수 있다.

2) 사용자가 의도하지 않은 기능 실행

콤보박스(change 이벤트)의 값 변경 시 자동으로 페이지를 이동시키면, 키보드 사용자와 화면낭독프로그램 사용자가 방향키로 옵션을 탐색하는 동안 의도치 않게 페이지가 전환된다.

이로 인해 다른 옵션을 선택하기 어려워진다.

// family-site 셀렉트 박스에서 사용자가 선택을 바꾸면, 해당 주소로 이동하는 예시 코드
document.getElementById('family-site').addEventListener(
  'change',
  function(event) {
    var selectedUrl = event.target.value;
    // 이동할 URL 값이 존재한다면 해당 URL로 이동
    if (selectedUrl) {
      window.location.href = selectedUrl;
    }
  }
);

개선 방법

콤보박스에서 옵션을 탐색할 때는 단순히 포커스 이동만 일어나고, 페이지 이동은 사용자가 별도의 ‘이동’ 버튼을 클릭한 후에 실행되도록 구현한다.

3) 페이지 진입 시 새 창 팝업 열림

페이지에 진입하면 게시판 관련 공지가 새 창 팝업으로 제공되는 사례이다.

팝업 창이 자동으로 열릴 경우, 팝업 창 실행이 사용자 동의 없이 이루어졌기 때문에 화면낭독프로그램 사용자는 자신이 다른 페이지로 이동했다고 혼동할 수 있고 따라서 현재 위치를 명확히 이해하지 못할 수 있다.

window.addEventListener("load", function () {
  window.open("notice.html", "_blank", "width=300,height=400");
});

개선 방법

팝업 창이 자동으로 실행되지 않도록 설정하고, 사용자가 명확히 이해하고 선택할 수 있는 방식으로 제공한다.

공지사항은 팝업 창이 아닌 페이지 내 특정 영역에 제공하거나, ‘공지사항 보기’와 같은 버튼을 통해 사용자가 직접 팝업을 열 수 있도록 해야 한다.