6.5.3 레이블과 네임

요구 사항

메뉴, 링크, 버튼 같은 구성요소에 화면에 보이는 텍스트(레이블)가 있다면 보조기술이 읽는 네임(접근 가능한 이름)에도 그 텍스트가 들어 있어야 합니다.

• 네임과 보이는 텍스트는 동일하게 제공하는 것이 좋습니다.
• 다르게 제공한다면 보이는 텍스트를 네임의 앞부분에 두는 것이 좋습니다.
• 텍스트나 텍스트 이미지 레이블이 없는 구성요소(아이콘만 있는 버튼 등)에는 적용되지 않습니다.

KWCAG 2.2에서 새로 추가된 검사 항목입니다.

왜 필요한가요

음성 명령 사용자는 화면에 보이는 글자를 말해 버튼을 누릅니다(“검색 누르기”). 네임이 보이는 글자와 다르면 명령이 동작하지 않습니다. 화면낭독기 사용자와 함께 보는 사람 사이의 혼란도 줄어듭니다.

도움받는 사용자

• 음성 명령(음성 입력) 사용자
• 화면낭독기와 화면을 함께 쓰는 저시력 사용자
• 인지장애가 있는 사용자

적용 방법

가장 쉬운 방법은 보이는 텍스트를 그대로 네임으로 쓰는 것입니다(aria-label을 덮어쓰지 않기). 추가 정보는 보이는 텍스트 뒤에 숨긴 텍스트나 aria-describedby로 붙입니다. 이름 계산 방식은 접근 가능한 이름 가이드를 참고하세요.

<!-- 비권장: 보이는 글자는 "검색"인데 네임은 "찾기 실행" -->
<button type="submit" aria-label="찾기 실행">검색</button>

<!-- 권장: 보이는 글자가 네임 앞부분에 포함 -->
<button type="submit">검색<span class="sr-only"> (통합검색)</span></button>
<a href="/notice" aria-label="더보기 - 공지사항">더보기</a>

사례

<label for="q">검색어</label>
<input id="q" type="search">

<a href="/cart" aria-label="쇼핑 바구니로 이동">장바구니</a>

자주 하는 실수

• aria-label이 화면의 버튼 글자와 다른 단어로 되어 있습니다.
• 보이는 텍스트가 네임 중간이나 끝에 있어 음성 명령이 인식되지 않습니다.
• 텍스트 이미지 버튼의 대체 텍스트가 이미지 속 글자와 다릅니다.

검사 방법

• 보이는 텍스트가 있는 버튼·링크·입력 서식을 찾아 개발자 도구의 접근성 패널에서 계산된 네임을 확인합니다.
• 네임에 보이는 텍스트가 같은 순서로 포함되어 있는지(가능하면 앞부분) 확인합니다.
• 음성 명령 기능(Windows 음성 액세스, Voice Control 등)으로 보이는 글자를 말해 실행되는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목