폼 레이블 접근성 검사기

폼 레이블 접근성 검사기 사용 가이드

회원가입·주문 양식에서 입력칸에 레이블이 연결되지 않으면 화면 낭독기는 '편집, 빈칸'이라고만 읽어 무엇을 입력하는지 알 수 없습니다. 이 검사기는 input·select·textarea와 입력용 role을 가진 요소를 모두 찾아, 각 칸의 이름과 그 이름이 label 요소에서 왔는지, placeholder나 title에서 왔는지 표로 보여 줍니다.

placeholder는 입력을 시작하면 사라지고 대비도 낮아 레이블로 인정하지 않고 ✕로 표시합니다. label for가 없는 id를 가리키는 경우, 같은 id가 여러 번 있어 레이블이 엉뚱한 칸에 붙는 경우, aria-describedby·aria-errormessage가 없는 요소를 가리키는 경우도 찾습니다.

같은 name을 가진 라디오·체크박스 묶음에 fieldset+legend 같은 묶음 제목이 없으면 무엇을 고르는 질문인지 알기 어렵다고 알려 줍니다. 이메일·전화·이름·주소처럼 개인정보 입력칸에 autocomplete가 없으면 알맞은 값(email, tel, name 등)을 제안합니다(WCAG 1.3.5).

사용 방법

1. 1'검사할 HTML' 칸에 양식이 든 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 입력칸별 이름과 이름 출처가 나옵니다.
3. 3✕ 표시된 칸에 <label for="id">를 연결하거나 label로 감쌉니다.
4. 4△ 표시(묶음 제목, autocomplete)를 확인해 보완한 뒤 다시 실행합니다.

<label for="name">이름</label><input id="name" autocomplete="name">
<input type="email" placeholder="이메일">
<input type="radio" name="plan" value="basic"> 기본 <input type="radio" name="plan" value="pro"> 프로

입력칸 4개 · 이름 있음 1개

✕ 2 input: placeholder만 있고 레이블이 없습니다(입력하면 사라짐)
△ 2 input: 개인정보 입력칸이면 autocomplete="email"를 넣으세요(1.3.5)
✕ 3 input[name=plan]: 연결된 레이블이 없습니다
△ radio 묶음 "plan"(2개)에 묶음 제목(fieldset+legend 또는 role=radiogroup+이름)이 없습니다

이럴 때 쓰면 좋아요

• 회원가입·주문 양식을 배포하기 전에 레이블을 점검할 때
• 디자인 때문에 레이블을 숨긴 양식이 읽히는지 확인할 때
• 자동 완성(autocomplete)을 넣을 개인정보 칸을 찾을 때
• 오류 메시지 연결(aria-describedby)이 올바른지 볼 때

문제가 생겼을 때

활용 팁

• 같은 질문의 라디오는 <fieldset><legend>질문</legend>…</fieldset>로 묶으면 질문까지 함께 읽힙니다.
• autocomplete 값을 넣으면 휴대폰 자동 완성도 정확해져 모든 사용자의 입력 시간이 줄어듭니다.
• 버튼과 링크 이름은 접근 가능한 이름 계산기로 함께 확인하세요.

자주 묻는 질문