2.5.3 이름 속 레이블

요구 사항

텍스트나 텍스트 이미지로 된 레이블이 있는 사용자 인터페이스 구성 요소는, 그 접근 가능한 이름에 화면에 보이는 텍스트가 포함되어야 합니다. 가장 좋은 방법은 이름이 보이는 텍스트로 시작하는 것입니다. 이해 문서는 “X”(닫기)처럼 글자가 레이블이 아니라 기호로 쓰인 경우는 이 기준의 대상으로 보지 않습니다.

왜 필요한가요

음성 인식 사용자는 화면에 보이는 글자를 말해 컨트롤을 조작합니다(“검색 클릭”). 접근 가능한 이름이 “사이트 내 조회”라면 “검색”이라고 말해도 동작하지 않습니다. 화면낭독기와 화면을 함께 보는 사용자도 들리는 이름과 보이는 글자가 달라 혼란을 겪습니다.

도움받는 사용자

• 음성 인식 사용자
• 시각장애인(화면낭독기 사용자)
• 화면낭독기를 화면과 함께 쓰는 저시력 사용자
• 인지·학습 장애가 있는 사용자

적용 방법

• 보이는 텍스트가 있으면 aria-label을 쓰지 말고 텍스트가 이름이 되게 합니다.
• 부가 정보가 필요하면 보이는 텍스트를 이름 앞부분에 두고 뒤에 덧붙이거나, aria-describedby로 설명을 연결합니다.
• 자세한 이름 계산 규칙은 접근 가능한 이름 계산 가이드를 참고하세요.

사례

<button aria-label="사이트 내 조회">검색</button>

<button>검색</button>
<a href="/notice">더보기<span class="sr-only"> 공지사항</span></a>

자주 하는 실수

• aria-label이 보이는 텍스트와 전혀 다른 단어입니다.
• 보이는 텍스트가 이름 중간이나 끝에 들어가 음성 명령이 잘 인식되지 않습니다.
• 입력 필드의 보이는 레이블과 aria-label이 다릅니다.

검사 방법

• 텍스트가 보이는 버튼·링크·입력 필드의 접근 가능한 이름을 개발자 도구로 확인합니다.
• 이름에 보이는 텍스트가 같은 순서로 포함되어 있는지 확인합니다.
• 가능하면 음성 인식 소프트웨어로 보이는 텍스트를 말해 조작해 봅니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.5.3 (새 창)