레이블과 네임

무엇을 요구하나요?

화면에 글자가 보이는 버튼·링크·입력 칸은, 프로그램이 읽는 이름(접근 가능한 이름)에 보이는 글자가 그대로 들어 있어야 합니다. 음성 입력 사용자는 화면에 보이는 글자를 말해서(“검색 누르기”) 요소를 누릅니다. 보이는 글자와 프로그램 이름이 다르면 말해도 눌리지 않습니다.

자주 틀리는 예

1. 보이는 글자와 다른 aria-label

<button aria-label="상품 찾기">검색</button>

<button>검색</button>

보충 설명이 필요하면 보이는 글자로 시작하게 합니다.

<a href="/notice" aria-label="더보기 공지사항">더보기</a>

2. 레이블과 다른 aria-label을 덮어씀

<label for="tel">휴대폰 번호</label>
<input id="tel" aria-label="연락처">

<label for="tel">휴대폰 번호</label>
<input id="tel">

aria-label은 연결된 label보다 우선해서 읽히므로, 보이는 레이블과 다른 이름이 됩니다.

3. 아이콘 + 글자 버튼

화면에 “장바구니”가 보이는데 이름이 “카트”이면 안 됩니다. 아이콘은 aria-hidden="true"로 숨기고 보이는 글자를 이름으로 쓰세요.

확인하는 방법

1. 개발자 도구의 접근성 패널(Accessibility → Name)에서 요소의 이름이 보이는 글자를 포함하는지 확인하세요.
2. aria-label, aria-labelledby가 붙은 요소를 검색해 보이는 글자와 비교하세요.
3. 자동 검사(axe)는 보이는 글자와 이름이 다른 경우 일부를 찾아줍니다. 크롬 확장 프로그램으로 실제 페이지를 검사해 보세요.