네임 안의 레이블 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 네임 안의 레이블
요약 설명

관련 지침(입력 방식) : 시각적 레이블이 있는 UI 구성요소는 접근 가능한 이름(네임)에 해당 레이블 텍스트를 포함하는가?
화면에 보이는 ‘검색’과 음성으로 읽히는 이름이 ‘버튼’만으로 다르면 음성 입력·음성 제어 사용자가 요소를 찾지 못합니다.

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

필요성

시각 레이블과 접근성 이름이 일치하면 사용자는 보이는 텍스트와 동일한 단어로 보조 기술을 조작할 수 있습니다.

대상

  • 음성 입력 사용자

    “검색 탭”처럼 화면 글자를 그대로 말해 조작하려는 사용자.

  • 음성 제어·스위치 사용자

    표시 이름과 일치하는 명령만 인식되는 사용자.

  • 스크린 리더 사용자

    보이는 레이블과 음성 피드백이 다르면 혼란스러운 사용자.

  • 국제화

    번역된 UI 문자열이 접근성 이름에도 동일하게 반영되어야 하는 사용자.

체크리스트

  • 부분 일치

    시각 레이블의 핵심 단어가 접근성 이름에 그대로 포함되는가? (대소문자·공백 정규화)

  • 아이콘+텍스트

    복합 버튼에서 텍스트가 이름의 앞부분에 오는가?

  • 플레이스홀더

    플레이스홀더만 보이는 필드는 상시 레이블과 이름이 함께 설정되었는가?

  • 추가 접두사

    내부 ID나 디버그 문자열이 이름 앞에 붙지 않는가?

구현 시 참고

  • 아이콘+텍스트 복합 버튼은 접근성 이름에 텍스트를 포함하고, 아이콘은 보조 설명으로 둡니다.
  • 플레이스홀더만 있는 필드는 레이블이 비어 있는 것으로 간주될 수 있으니 상시 레이블을 제공합니다.
  • 내부 구현용 ID가 이름으로 노출되지 않게 합니다.

점검 방법

  • 접근성 검사 도구로 시각 텍스트와 computed accessibilityLabel/ contentDescription을 비교합니다.
  • 음성 제어(가능한 환경)에서 화면에 보이는 단어로 버튼을 활성화할 수 있는지 시험합니다.

개발방법

아래 코드는 네임 안의 레이블 검사항목을 실제 UI 동작에 반영할 때 참고할 수 있는 예시입니다. 시각 레이블과 접근 가능한 이름이 같은 단어를 포함하도록 구성해 음성 입력 호환성을 확보합니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

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

결론

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

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

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