다양한 감각 지원 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 다양한 감각 지원
요약 설명

관련 지침(적응성) : 지시·알림이 색·위치·소리 등 한 가지 감각에만 의존하지 않도록 제공했는가?
‘빨간 글씨=오류’, ‘아래 버튼’, ‘삐 소리만 알림’처럼 단일 단서는 환경·능력에 따라 전달이 끊깁니다. 텍스트·아이콘·패턴·진동 등을 조합합니다.

모바일 앱 접근성 체크리스트(MACAG) 전체 보기
WCAG 2.2 — Sensory Characteristics

필요성

조용한 환경·청각 장애·색약·시야 좁힘 등 사용자 상황은 다양합니다. 동일한 의미가 시각·청각·촉각 중 두 가지 이상으로 확인 가능할 때 신뢰도가 높아집니다.

대상

  • 색각 이상·저시력

    색만으로 상태를 구분하기 어려운 사용자.

  • 청각 장애

    소리 알림만으로는 변화를 인지하지 못하는 사용자.

  • 시각 장애

    ‘오른쪽’ 등 위치 설명만으로는 대상을 찾기 어려운 사용자.

  • 전체 사용자

    주행 중·회의 중 등 소리·진동을 끈 상태에서도 UI를 써야 하는 사용자.

체크리스트

  • 색+무엇

    오류·성공·경고에 색과 함께 아이콘·텍스트 라벨이 있는가?

  • 위치 설명

    ‘위/아래’ 대신 컨트롤 이름·랜드마크 기준 설명을 병행하는가?

  • 소리

    소리만 있는 알림에 시각 토스트·배지·배너가 동반되는가?

  • 햅틱

    진동 패턴이 의미를 전달한다면 설정에서 끌 수 있는가?

구현 시 참고

  • 토스트와 스낵바에 accessibilityLiveRegion(Android) / 적절한 알림(iOS)을 연결합니다.
  • 폼 오류는 필드 인접 메시지와 요약 영역을 함께 제공합니다.
  • 지도·게임 등 위치 의존 UI는 음성 랜드마크와 탐색 모드를 제공합니다.

점검 방법

  • 색 필터·고대비 모드에서 상태 구분이 유지되는지 확인합니다.
  • 무음·진동 끔 상태에서 알림 시나리오를 재현합니다.

개발방법

아래 코드는 다양한 감각 지원 검사항목을 구현할 때 바로 참고할 수 있는 기본 예시입니다. 색상·위치·소리 한 가지 단서에만 의존하지 않고 텍스트/아이콘 등 대체 단서를 함께 제공합니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

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

결론

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

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

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