모바일 접근성 제작 기법 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
요약 설명

관련 지침(충분한 시간 제공) : 작업 흐름을 방해하는 인터럽션은 지연·묶음·해제 등 제어 수단을 제공하는가?
인터럽션은 작업 중 갑자기 나타나는 팝업, 권한 재요청, 평가 유도, 프로모션 배너처럼 사용자의 맥락을 끊는 요소입니다. 반복적이거나 예고 없는 인터럽션은 인지 부담을 높이고 작업 실패를 유발할 수 있으므로, 사용자가 시점을 제어할 수 있게 설계해야 합니다.

WCAG 2.2 Quick Reference - Interruptions

필요성

인터럽션이 빈번하거나 사용자가 제어할 수 없으면 현재 진행 중인 입력·결제·작성 흐름이 중단됩니다. 특히 인지 장애 사용자, 보조기술 사용자, 고령자는 갑작스러운 문맥 전환에 더 취약하므로, 중요하지 않은 인터럽션은 지연하거나 묶어서 제공하고 즉시 닫기/다시 보지 않기 같은 제어 수단을 제공해야 합니다.

대상

  • 인지 장애 사용자

    예고 없는 팝업·화면 전환으로 현재 작업 맥락을 잃기 쉬운 사용자.

  • 스크린 리더 사용자

    인터럽션으로 초점이 강제로 이동하면 이전 작업 위치를 놓치기 쉬운 사용자.

  • 운동 장애·스위치 사용자

    작은 닫기 버튼이나 짧은 노출 시간 때문에 인터럽션 해제가 어려운 사용자.

  • 고령 사용자

    반복 알림·광고성 배너로 피로가 빠르게 누적되어 작업을 포기할 수 있는 사용자.

  • 모든 사용자

    입력·결제·인증 같은 핵심 작업 중 불필요한 인터럽션에 의해 실수 가능성이 높아지는 사용자.

체크리스트

  • 표시 시점 제어

    핵심 작업(입력·결제) 중 비필수 인터럽션은 지연하거나 종료 후 표시되는가?

  • 닫기/미루기 제공

    인터럽션에 즉시 닫기, 나중에 보기, 다시 보지 않기 같은 선택지가 있는가?

  • 반복 빈도 제한

    동일 인터럽션이 짧은 시간에 반복 노출되지 않도록 빈도·쿨다운 정책이 있는가?

  • 초점 유지

    인터럽션 종료 후 포커스가 이전 작업 위치로 복귀하고 입력값이 보존되는가?

  • 우선순위 분리

    보안·오류 등 필수 인터럽션과 마케팅성 인터럽션을 구분해 처리하는가?

기기별 테스트 방법

iOS

  • VoiceOver 사용

    iOS의 VoiceOver 기능을 활성화한 후, 알림 메시지가 음성으로 전달되는지 확인합니다.
    예시) 파일 업로드 성공 시, "파일이 성공적으로 업로드되었습니다."라는 메시지가 VoiceOver에서 출력되는지 확인합니다.

  • 진동 및 소리 테스트

    진동 및 소리 알림이 올바르게 전달되는지 확인합니다.

Android

  • TalkBack 사용

    Android의 TalkBack 기능을 활성화하고, 알림 메시지가 음성으로 전달되는지 테스트합니다.
    예시) 오류 발생 시 TalkBack을 통해 "네트워크 연결 오류가 발생했습니다."라는 메시지가 음성으로 출력되는지 확인합니다.

  • 진동 테스트

    알림이 진동 피드백을 통해 적절하게 전달되는지 테스트합니다.

HTML

스크린 리더 사용

NVDA 또는 JAWS와 같은 스크린 리더를 사용하여, 알림이 스크린 리더에서 제대로 인식되는지 확인합니다.
예시) ARIA 라이브 영역을 통해 상태 변경이 스크린 리더에 의해 읽히는지 테스트합니다.

Vue

Vue.js 애플리케이션에서 스크린 리더와의 호환성 및 시각적 피드백(예: 애니메이션)이 제대로 작동하는지 점검합니다.

React

React 애플리케이션에서 Lighthouse 또는 Axe 같은 접근성 도구를 사용해 알림 기능의 접근성을 점검합니다. 스크린 리더로 알림이 적절하게 전달되는지 확인합니다.

QA 지표

  • 알림 전달 성공률

    알림 메시지가 스크린 리더, 진동, 소리 등을 통해 사용자에게 성공적으로 전달되는지 여부.

  • 사용자 피드백

    사용자 테스트를 통해 알림이 적절하게 제공되고 있는지 평가.

  • 알림 우선순위 테스트

    알림의 우선순위가 적절히 설정되었는지 여부.

개발방법

네이티브

iOS

  • 알림 메시지 전송 및 스크린 리더 인식
  • 진동 피드백 제공

Android

  • 알림 메시지 전송 및 스크린 리더 인식
  • 진동 피드백 제공

하이브리드

하이브리드(html)

ARIA 라이브 영역을 통한 알림 메시지 전송 및 CSS 애니메이션을 통한 시각적 알림

하이브리드(Vue)

알림 메시지 및 스크린 리더 인식

하이브리드(React)

알림 메시지 및 스크린 리더 인식

점검 기준

오류유형

  • 알림 메시지의 누락

    중요한 상태 변화가 알림을 통해 전달되지 않는 경우.

  • 스크린 리더와의 호환성 부족

    알림 메시지가 스크린 리더에서 인식되지 않거나 누락되는 경우.

  • 과도한 알림

    불필요한 알림이 너무 자주 발생해 사용자에게 방해가 되는 경우.

주의사항

  • 알림의 적시성

    알림이 적시에 제공되어 사용자가 놓치지 않도록 해야 합니다.

  • 중복 알림 방지

    동일한 알림이 중복되어 발생하지 않도록 주의해야 합니다.

  • 알림의 명확성

    알림 메시지는 사용자가 이해하기 쉬운 언어로 간결하게 작성되어야 합니다.

점검 방법

  • 회원가입·결제·게시글 작성 등 핵심 시나리오 수행 중 인터럽션 노출 시점을 기록하고, 작업 실패·이탈이 발생하는지 확인합니다.
  • 동일 인터럽션이 연속 노출되는지(재진입, 앱 재실행, 화면 복귀) 10회 이상 반복 테스트로 빈도 제한 정책을 검증합니다.
  • TalkBack/VoiceOver를 켠 상태에서 인터럽션 열기/닫기 후 초점 복귀 위치와 입력값 유지 여부를 점검합니다.
  • 설정 화면에서 마케팅성 알림/팝업 비활성화 옵션이 제공되는지, 실제로 재노출이 차단되는지 확인합니다.

관련 영상

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

결론

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

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

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