입력 목적 식별 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 입력 목적 식별
요약 설명

관련 지침(적응성) : 입력 항목의 목적(이름·이메일·전화번호 등)을 프로그램적으로 식별 가능하게 제공했는가?
브라우저·OS의 자동완성, 비밀번호 관리자, 입력 보조 기능이 필드 목적을 알아야 사용자가 반복 입력 부담을 줄이고 오류를 낮출 수 있습니다.

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

필요성

모호한 입력란은 인지 부하를 높이고, 모션 제한이 있는 사용자에게는 치명적일 수 있습니다. 각 필드가 어떤 종류의 데이터를 받는지 OS에 알려 주면 키보드 유형, 자동완성, 보안 정책이 맞물립니다.

대상

  • 운동·세밀 조작이 어려운 사용자

    자동완성으로 타이핑 횟수를 줄일 수 있는 사용자.

  • 인지·기억 장애인

    ‘무엇을 넣어야 하는지’를 시스템이 안내해 주는 것이 도움이 되는 사용자.

  • 저시력·고령 사용자

    적절한 키보드(숫자·이메일)가 곧바로 열리면 오입력이 줄어드는 사용자.

  • 전체 사용자

    비밀번호 관리자·OTP 자동 입력 등 일상적 편의를 기대하는 사용자.

체크리스트

  • 필드 유형

    이름, 이메일, 전화, 주소, 신용카드 등 표준 힌트가 있는 항목에 모두 매핑했는가?

  • 하이브리드

    WebView와 네이티브 폼의 힌트 체계가 동일한 의미로 연결되는가?

  • 보이는 레이블

    시각 레이블과 자동완성 힌트가 서로 모순되지 않는가?

  • 민감 정보

    자동완성을 끌 수 있는 옵션이 필요한 화면에서는 importantForAutofill 등으로 제어했는가?

구현 시 참고

Android

  • autofillHints, importantForAutofill로 필드 목적과 자동완성 허용 여부를 지정합니다.
  • 커스텀 뷰는 Autofill 서비스와 호환되는 노드 구조인지 확인합니다.

iOS

  • textContentType(예: .emailAddress, .telephoneNumber, .oneTimeCode)을 지정합니다.
  • 비밀번호 필드는 textContentType과 보안 텍스트 입력 설정을 함께 맞춥니다.

WebView

HTML autocomplete 속성을 네이티브 힌트와 동일한 의미로 유지합니다.

점검 방법

  • 실제 기기에서 자동완성·비밀번호 저장·OTP 제안이 기대대로 뜨는지 주요 폼을 검증합니다.
  • 스크린 리더로 필드에 들어갈 때 이름·힌트·키보드 유형이 일관되는지 확인합니다.

개발방법

아래 코드는 입력 목적 식별 검사항목을 구현할 때 바로 참고할 수 있는 기본 예시입니다. 입력 항목의 목적을 자동완성 속성으로 명시해 사용자 입력 부담을 줄입니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

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

결론

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

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

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