명확한 지시사항 제공 - by. UXKM

요약 설명

관련 지침 : 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
특정 요소를 가리키거나 지시사항을 전달하는 콘텐츠의 경우, 시각이나 청각 등 단일 감각에만 의존하여 정보를 제공해서는 안 됩니다.
사용자가 다양한 감각을 통해 지시사항을 인식할 수 있도록, 콘텐츠는 다감각적으로 제공되어야 합니다. 텍스트 콘텐츠(대체 텍스트 포함)는 보조기술을 통해 다른 감각으로의 변환이 가능하므로, 텍스트 형태의 지시사항에는 별도의 음성 콘텐츠를 추가할 필요는 없습니다.

관련 WCAG 2.2 성공 기준

  • 색, 크기, 모양 또는 위치와 같은 정보에 대한 인식

    웹 콘텐츠는 콘텐츠에 접근하는 사용자들이 색, 크기, 모양 또는 위치에 관한 정보를 인식하지 못하더라도 원하는 콘텐츠에 접근할 수 있도록 제작해야 합니다.
    예를 들어, 특정 요소를 ‘동그란 버튼을 누르시오’ 또는 ‘오른쪽 버튼을 누르시오’라고 가리킬 때, 그 대상이 되는 버튼이 ‘동그란 버튼’ 또는 ‘오른쪽 버튼’이라는 대체 텍스트를 포함하고 있지 않을 경우, 시각장애를 지닌 사용자는 어떤 요소를 지칭하는지 알 수 없습니다.
    따라서 이러한 경우, 가리키고자 하는 요소의 실제 명칭이나 그 요소가 포함하고 있는 대체 텍스트를 사용해 지칭하거나, 불가피하게 색, 크기, 모양, 위치와 같은 정보를 사용해 특정 요소를 가리킬 때는 이를 보완할 수 있는 다른 감각을 이용하는 정보를 제공해야 합니다.

  • 음성이나 음향 정보의 인식

    사용자에게 음성이나 음향을 사용해 지시사항을 전달하는 경우, 사용자가 소리를 들을 수 없더라도 전달하고자 하는 지시사항을 인식할 수 있어야 합니다.
    예를 들어, 온라인 시험 진행 중 사용자에게 비프음으로 정답인지 오답인지를 알려주는 경우, 청각장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용자는 정답과 오답 여부를 확인할 수 없습니다.
    이 경우, 비프음과 함께 정답과 오답 여부를 시각적으로 확인할 수 있는 수단을 제공하면 더 많은 사용자가 지시사항을 인지할 수 있습니다.

1.3.3 감각적 특성 (Level A) WAI - Understanding Sensory Characteristics MDN - Accessible Rich Internet Applications (ARIA)

기대효과

사용자는 입력해야 할 정보나 수행해야 할 작업을 혼동 없이 정확히 이해할 수 있어야 하며, 특히 시각·인지 장애가 있는 사용자도 오류 없이 웹 서비스를 원활하게 이용할 수 있습니다.
시각장애인은 콘텐츠의 모양이나 위치에 따른 정보를 인식하기 어렵기 때문에, 추가적인 설명이나 지시사항이 제공되면 콘텐츠를 보다 효과적으로 이용할 수 있습니다.

필요성

사용자에게 제공되는 지시사항은 특정 감각(색, 소리, 위치 등)에만 의존해서는 안 됩니다. 시각·청각·인지에 의존하지 않고도 정보나 조작 방법을 이해할 수 있도록 텍스트로 명확히 전달해야 합니다.

  • 색상, 모양 등은 모든 사용자가 동일하게 인지할 수 없습니다.
  • 색각 이상, 청각장애, 인지장애 사용자 등은 특정 감각에 의존한 지시를 이해하기 어렵습니다.
  • 텍스트 기반의 설명 제공은 모든 사용자에게 공통된 인식 수단을 제공합니다.

대상

  • 사용자 유형
  • 이유

  • 색각이상 사용자

    색으로만 구분 시 인식 불가

  • 청각장애 사용자

    소리로만 지시 시 정보 손실 발생

  • 인지장애 사용자

    위치 기반, 모양 기반 지시 이해 어려움

  • 시각장애 사용자

    시각적 단서만으로 정보 전달 시 접근 불가

체크리스트

  • “빨간 버튼을 누르세요” → “제출 버튼(빨간색)을 누르세요”처럼 텍스트로도 설명되는가?
  • 여러 요소가 함께 있을 경우, 고유한 이름 또는 라벨로 식별 가능한가?
  • 색, 위치, 소리 외에도 텍스트·아이콘·라벨 등으로 설명이 제공되는가?
  • “오른쪽 버튼을 클릭하세요” 같은 방향 지시만 있는가?

테스트 방법

  • 색상·소리·위치 지시만으로 조작 가능한지 테스트합니다.
  • 텍스트나 라벨 없이도 조작 요소를 식별할 수 있는지 확인합니다.
  • 스크린 리더 등 보조기술에서 명확한 설명을 제공하는지 확인합니다.

QA 지표

  • 색상만을 사용한 지시 문구 비율
  • 방향 또는 모양만으로 지시하는 경우의 수
  • 텍스트 기반 설명 포함률

개발방법

html 예시

Vue 예시

React 예시

점검 기준

  • 색, 모양, 위치, 소리에만 의존한 지시가 있는가?
  • 텍스트와 라벨을 통한 추가 설명이 있는가?
  • 보조기술로도 의미를 파악할 수 있는가?

점검 방법

  • 코드 내 지시사항이 색, 위치, 소리만으로 전달되는지 확인합니다.
  • 사용자 설명 문구에 식별 가능한 텍스트가 포함되어 있는지 확인합니다.
  • 스크린 리더 테스트를 통해 지시사항의 이해 가능성을 확인합니다.

준수/미준수 사례

미준수 사례

문제점 :
버튼의 역할이 불명확합니다.
색상(파란색)만으로 버튼을 설명하고 있습니다.
스크린 리더 사용자에게 혼란을 줄 수 있습니다.
버튼이 무엇을 하는지에 대한 기능적인 설명이 부족합니다.

준수 사례

설명 :
aria-label을 사용하여 버튼의 기능을 명확하게 설명합니다.
스크린 리더 사용자에게도 버튼의 역할을 명확히 전달합니다.
색상 외에도 버튼의 목적을 설명하여 모든 사용자가 이해할 수 있도록 합니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

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

결론

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

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

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