다양한 탐색 방법 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 다양한 탐색 방법
요약 설명

관련 지침(쉬운 내비게이션) : 메뉴·검색·내비게이션 등 두 가지 이상의 탐색 수단을 제공하는가?
한 가지 탐색 방식(예: 깊은 계층 메뉴만)에 의존하면 인지·운동 특성에 따라 서비스 이용이 어려워질 수 있습니다.

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

필요성

검색, 바로가기, 최근 목록, 목차 등 서로 다른 경로가 있으면 사용자는 자신에게 맞는 방법으로 목표에 도달할 수 있습니다.

대상

  • 기억·인지 부담이 큰 사용자

    계층 메뉴 위치를 외우기 어려워 검색·즐겨찾기를 선호하는 사용자.

  • 운동 장애인

    긴 스크롤보다 바로가기 타일이 편한 사용자.

  • 스크린 리더 사용자

    헤딩·랜드마크·검색으로 같은 화면에 도달할 수 있어야 하는 사용자.

  • 파워 사용자

    딥링크·위젯·단축 Siri/Android 단축어로 반복 작업을 줄이려는 사용자.

체크리스트

  • 두 경로 이상

    핵심 기능(설정, 고객센터, 결제 내역 등)에 서로 다른 진입 경로가 있는가?

  • 검색 범위

    전역 검색이 화면별 필터와 역할이 겹치지 않고 보완하는가?

  • 구조 탐색

    헤딩·탭·랜드마크만으로도 주요 구역에 도달하는가?

  • 딥링크

    URL 스킴·App Links로 특정 화면을 직접 열 수 있는가?

구현 시 참고

  • 글로벌 검색과 화면별 필터가 역할이 겹치지 않도록 명확히 나눕니다.
  • 스크린 리더에서 랜드마크·헤딩 순탐으로도 주요 구역에 도달할 수 있는지 확인합니다.
  • 딥링크 URL 스킴으로 특정 화면을 직접 열 수 있으면 탐색 보조가 됩니다.

점검 방법

  • 동일 목표 화면까지 메뉴 경로와 검색 경로를 각각 시간을 재며 비교합니다.
  • 스크린 리더만 켜고 헤딩/컨테이너 탐색으로 도달 가능한지 체크리스트를 만듭니다.

개발방법

아래 코드는 다양한 탐색 방법 검사항목을 실제 UI 동작에 반영할 때 참고할 수 있는 예시입니다. 메뉴, 검색, 바로가기처럼 성격이 다른 탐색 경로를 함께 제공해 접근성을 높입니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

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

결론

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

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

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