사용자 요구에 따른 실행 - by. UXKM

요약 설명

관련 지침 : 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
콘트롤이나 사용자 입력은 초점을 받았을 때 의도하지 않는 기능이 자동적으로 실행되지 않도록 콘텐츠를 개발해야 합니다.
즉, 콘트롤이나 사용자 입력 기능은 사용자의 마우스 클릭이나 키보드 조작에 의하여 실행되어야 합니다. 특히 새 창, 팝업창 등은 사용자가 인지하지 못한 상황에서 열리지 않아야 합니다.

관련 WCAG 2.2 성공 기준

  • 초점에 의한 맥락 변화

    웹 콘텐츠에서 콘트롤이 초점을 받았을 경우, 사용자가 의도하지 않은 기능이 실행되지 않아야 합니다.
    단, 기능 실행이 아닌 시각적 변화(예: 초점을 받은 요소의 색깔 반전, 테두리 추가)나, 사용자 제어가 이동하지 않은 상태에서 나타나는 추가 정보 등은 초점에 의한 맥락 변화를 일으키는 기능의 실행으로 간주하지 않습니다.

    다음은 이러한 상황에서 자주 발생하는 대표적인 오류들입니다.

    1. 온라인 서식이 자동적으로 제출됨
    2. 새 창이 열림
    3. 드롭다운 메뉴가 열림만으로 특정 메뉴 항목이 실행됨
    4. 풀다운 메뉴를 사용하는 콘텐츠에서 초점을 받는 것만으로 특정 메뉴의 기능이 실행됨
    5. 사용자 제어(초점)가 다른 콘트롤로 이동하거나 사라지거나 또는 그 위치를 예측할 수 없음
  • 입력에 따른 변화

    사용자가 선택할 수 있는 콘트롤(예: 콤보 박스, 라디오 버튼, 체크 박스 등)에서 항목을 선택할 때, 해당 항목이 의미하는 기능이 자동으로 실행되거나 서식 제출이 일어나지 않아야 합니다.
    실제로 해당 기능이 실행되거나 서식 제출이 이루어지는 것은 사용자가 선택한 콘트롤과 함께 제공되는 실행 버튼을 클릭했을 때에만 실행되어야 합니다.
    단, 기능 실행이 아닌 시각적 변화(예: 초점을 받은 사용자 입력 또는 콘트롤의 색깔 반전, 테두리 추가)나, 사용자 제어(초점)가 이동하지 않은 상태에서 나타나는 추가 정보는 입력 변화에 따른 기능 실행으로 간주하지 않습니다.

  • 새 창/팝업창

    사용자가 예측할 수 없는 상황에서 새 창을 열어 정보를 전달해서는 안 됩니다.

  • 레이어 팝업

    레이어 팝업은 콘텐츠의 논리적 초점 이동 및 콘텐츠의 선형 구조를 위반할 가능성이 많으므로 사용하지 않는 것이 바람직합니다.

  • 새 창/팝업창/레이어 팝업의 닫음

    새 창, 팝업창, 또는 레이어 팝업에 초점이 있을 때, 사용자가 해당 창이나 팝업을 닫거나 종료하는 버튼을 클릭하면 해당 창 또는 팝업이 즉시 종료되어야 합니다.
    만약 사용자가 화면에 나타난 새 창, 팝업, 레이어 팝업을 닫거나 종료하려고 했음에도 불구하고 해당 창이나 팝업이 종료되지 않으면, 사용자는 매우 당황할 수 있습니다. 특히 레이어 팝업의 경우 이러한 혼란이 더욱 심화될 수 있습니다.

3.2.5 사용자 요청에 따른 변경 (Level AAA)

기대효과

  • 시각장애, 지적장애 또는 지체장애가 있는 사람도 초점 및 문맥의 변화를 이해할 수 있게 됩니다.
  • 사용자에게 미리 새 창 열림을 경고하면 뒤로 가기 버튼이 더 이상 예상처럼 동작하지 않는다는 사실을 알 수 있으므로 이용하는 데 따른 혼란이 줄어듭니다.

필요성

웹사이트 또는 웹 애플리케이션에서 링크 클릭, 버튼 누름, 초점 이동 등의 인터랙션이 있을 때, 사용자가 명시적으로 요청하지 않은 행동(예: 새 창 열림, 페이지 자동 전환, 맥락 변경 등) 은 자동으로 실행되어서는 안 됩니다.

  • 예기치 않은 동작은 혼란과 오류 발생 가능성을 높입니다.
  • 스크린 리더 사용자, 저시력 사용자 등은 자동 초점 이동이나 자동 페이지 전환 시 맥락을 잃을 수 있습니다.
  • 사용자 경험 향상뿐 아니라 접근성을 위한 핵심 요소입니다.

대상

  • 사용자 유형
  • 이유

  • 스크린 리더 사용자

    자동 초점 전환 시 탐색 순서가 왜곡될 수 있음

  • 저시력 사용자

    새 창이 열리면 현재 위치 인식이 어려움

  • 인지장애 사용자

    자동 실행된 맥락 변화가 혼란 유발 가능

  • 고령자

    변화된 콘텐츠에 대한 인지 지연 발생 가능성 있음

체크리스트

  • 새 창을 여는 경우, 사용자에게 사전 안내 또는 선택지를 제공하는가?
  • 폼 전송, 셀렉트 박스 변경 등에서 자동 페이지 전환이 발생하지 않는가?
  • 포커스가 의도하지 않은 위치로 자동 이동되지 않는가?
  • target="_blank" 사용 시 텍스트 또는 aria-label로 새 창 열림을 명시하는가?

테스트 방법

  • 버튼/링크 클릭 시 새 창 또는 맥락 전환 발생 여부를 확인합니다.
  • select 요소 선택 변경만으로 페이지가 이동되는지 확인합니다.
  • 스크린 리더 사용 시 자동 초점 이동 발생 여부를 확인합니다.
  • 사용자의 입력 없이 DOM 조작으로 자동 변경되는 동작 여부를 확인합니다.

QA 지표

  • 자동 맥락 변경 발생 비율
  • 새 창 열림 시 사전 안내 제공률
  • 스크린 리더 사용자 혼란 사례 수

개발방법

html 예시 – 새 창 열림 알림 추가

html 예시 – 버튼으로 페이지 이동 명시적 전환

옵션 선택만으로 페이지 전환이 발생하면 키보드 사용자나 보조기기를 사용하는 사용자에게 혼동을 줄 수 있습니다. 따라서 페이지 전환을 위해서는 명확한 버튼을 제공하는 것이 바람직합니다.

Vue 예시 – 버튼으로 명시적 전환

React 예시

점검 기준

  • 사용자의 조작 없이 자동으로 맥락이 변경되는가?
  • 새 창 열기 또는 초점 이동이 명확히 안내되는가?
  • 스크린 리더 또는 키보드 사용자가 인지 가능한가?

점검 방법

  • 모든 링크, 버튼 클릭 시 자동 창 열림 또는 전환 발생 여부를 확인합니다.
  • onchange, onload 등의 이벤트로 자동 동작 실행 여부를 확인합니다.
  • 스크린 리더로 해당 기능을 사용한 후 포커스 위치를 확인합니다.

준수/미준수 사례

미준수 사례 (사용자 동작 없이 자동 실행)

문제점 :
사용자가 명시적으로 동작하지 않았는데 동영상이 자동으로 재생됩니다.
예측 불가능한 소리나 움직임은 사용자의 집중을 방해하고, 특히 보조 기술 사용자에게 혼란을 줍니다.

준수 사례 (사용자 동작 이후 실행)

설명 :
사용자가 "동영상 재생" 버튼을 직접 클릭해야만 동영상이 시작됩니다.
예측 가능한 흐름을 제공하여 사용자가 원하는 시점에 컨트롤할 수 있습니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링