6.5.3 네임 안의 레이블

요구 사항

• 메뉴, 링크, 버튼 등 사용자 인터페이스 구성요소는 음성 명령 사용자가 제어할 수 있도록 시각적으로 표시되는 텍스트(레이블)를 네임으로 제공해야 합니다.
• 시각적으로 표시되는 텍스트(레이블)는 서식의 용도와 목적에 맞게 제공해야 합니다.
• 네임은 표시되는 텍스트의 문자열 순서와 일치하는 순서로 제공해야 합니다.
• 추가 정보를 제공해야 한다면 네임의 앞부분에 보이는 텍스트를 두는 것이 바람직합니다. 텍스트나 텍스트 이미지가 포함된 레이블이 없는 구성요소에는 적용되지 않습니다.

개정 내역: 2025년 개정에서 새로 추가된 검사 항목입니다.

왜 필요한가요

음성 명령 사용자는 화면에 보이는 글자를 말해 컨트롤을 누릅니다. 네임에 그 글자가 없으면 명령이 통하지 않습니다. 화면낭독기로 들으면서 화면을 함께 보는 사용자도 들리는 이름과 보이는 글자가 같아야 혼란이 없습니다.

도움받는 사용자

• 음성 명령(Android Voice Access, iOS 음성 제어) 사용자
• 화면을 보면서 화면낭독기를 쓰는 저시력인
• 인지장애인

적용 방법

보이는 텍스트가 있는 컨트롤에는 보통 별도의 레이블을 주지 않는 것이 가장 안전합니다. 레이블을 덮어써야 한다면 보이는 텍스트로 시작하게 합니다(접근 가능한 이름 참고).

// 비권장: 보이는 글자 "구매"와 다른 이름
buyButton.text = "구매"
buyButton.contentDescription = "결제 화면으로 이동"
// 권장: 보이는 글자로 시작
buyButton.contentDescription = "구매, 12,000원"

buyButton.setTitle("구매", for: .normal)
buyButton.accessibilityLabel = "구매"            // 또는 지정하지 않음
buyButton.accessibilityHint = "결제 화면으로 이동합니다"   // 추가 설명은 힌트로
// 음성 제어에 부를 이름을 추가로 지정할 수 있습니다.
buyButton.accessibilityUserInputLabels = ["구매", "구매하기"]

// 비권장: <Pressable accessibilityLabel="결제 진행"><Text>구매</Text></Pressable>
<Pressable accessibilityRole="button" accessibilityHint="결제 화면으로 이동합니다"><Text>구매</Text></Pressable>

사례

화면: [다음]   TalkBack: "계속 진행, 버튼"
음성 명령 "다음 누르기" → 동작하지 않음

화면: [다음]   TalkBack: "다음, 버튼"

자주 하는 실수

• 보이는 텍스트와 전혀 다른 접근성 레이블로 덮어씁니다.
• 보이는 텍스트를 레이블의 중간이나 끝에 넣거나 단어 순서를 바꿉니다.

검사 방법

• TalkBack·VoiceOver로 텍스트가 보이는 컨트롤을 탐색하며 낭독되는 이름에 보이는 텍스트가 같은 순서로 포함되는지 확인합니다.
• Android Voice Access 또는 iOS 음성 제어로 “○○ 누르기”라고 말해 컨트롤이 동작하는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목