접근 가능한 이름 계산기

접근 가능한 이름 계산기 사용 가이드

화면 낭독기 사용자는 버튼과 링크를 '접근 가능한 이름'으로 구분합니다. 아이콘만 있는 버튼, 이름이 비어 있는 링크는 '버튼'이라고만 들려 무엇을 하는지 알 수 없습니다. 이 계산기는 붙여 넣은 HTML에서 대화형 요소와 이미지, role·aria-label이 있는 요소를 찾아 각각의 이름과 그 이름이 어디서 왔는지 표로 보여 줍니다.

이름은 WAI-ARIA 이름 계산 규칙을 간추린 순서로 구합니다. aria-labelledby가 가리키는 글, aria-label, 입력칸의 label 요소, 이미지의 alt, 표의 caption·fieldset의 legend, 버튼·링크 안의 글자, title, placeholder 순입니다. 숨긴 요소(aria-hidden, hidden, display:none)의 글은 빼고, 이미지 alt는 이름에 포함합니다.

문제가 될 만한 경우도 짚어 줍니다. 이름 없는 대화형 요소, '더보기·여기·클릭' 같은 모호한 링크 문구, 같은 문구로 서로 다른 주소를 가리키는 링크, placeholder만으로 정해진 이름, 화면 글자가 aria-label에 포함되지 않아 음성 명령으로 누르기 어려운 경우(WCAG 2.5.3), 역할 없는 div·span의 aria-label이 대상입니다.

사용 방법

1. 1'검사할 HTML' 칸에 페이지 소스 전체나 확인할 부분을 붙여 넣습니다.
2. 2'실행'을 누르면 요소별 역할, 계산된 이름, 이름 출처가 표로 나옵니다.
3. 3✕ 표시(이름 없음)부터 aria-label이나 보이는 글자를 넣어 고칩니다.
4. 4△ 표시(모호한 링크 문구, 2.5.3)를 확인하고 문구를 구체적으로 바꿉니다.

<button aria-label="문서 저장"><svg aria-hidden="true"></svg></button>
<a href="/notice">더보기</a><a href="/event">더보기</a>
<img src="banner.png">

검사한 요소 5개 · 이름이 없는 대화형 요소 1개 · 확인할 점 3개

△ 3 a: 뜻이 모호한 링크 문구
△ 4 a: 뜻이 모호한 링크 문구
✕ 5 img: 이름 없음
△ 같은 링크 문구 "더보기"가 서로 다른 주소 2곳으로 갑니다 — 화면 낭독기 링크 목록에서 구분되지 않습니다.

이럴 때 쓰면 좋아요

• 아이콘 버튼에 이름이 있는지 배포 전에 확인할 때
• '더보기'처럼 모호한 링크 문구를 찾아 고칠 때
• aria-label과 화면 글자가 어긋난 버튼을 찾을 때
• 웹 접근성 인증 심사 전에 기본 항목을 점검할 때

문제가 생겼을 때

활용 팁

• 링크 문구만 따로 읽어도 목적지를 알 수 있게 쓰면 대부분의 경고가 사라집니다.
• 입력칸의 이름 문제는 폼 레이블 접근성 검사기가 더 자세히 알려 줍니다.
• 역할과 속성 값의 오타는 ARIA 속성 검사기로 이어서 확인하세요.

자주 묻는 질문