레이블 제공

무엇을 요구하나요?

글자 입력 칸, 선택 상자, 체크박스, 라디오 버튼 등 모든 입력 서식에는 무엇을 입력하는지 알려주는 레이블이 있어야 하고, 그 레이블이 프로그램으로 입력 칸과 연결되어 있어야 합니다. 연결되어 있으면 화면 낭독기가 입력 칸에 들어갈 때 “이름, 편집 창”처럼 레이블을 함께 읽고, 레이블 글자를 눌러도 입력 칸이 선택됩니다.

고치는 법

1. label의 for와 입력 칸의 id 연결 (가장 권장)

<label for="user-name">이름</label>
<input type="text" id="user-name" name="name" autocomplete="name">

2. label로 감싸기

<label>
  <input type="checkbox" name="agree"> 개인정보 수집에 동의합니다
</label>

3. 화면에 레이블을 보이기 어려울 때

<label for="q" class="sr-only">검색어</label>
<input type="search" id="q">
<button type="submit">검색</button>

또는 title="검색어", aria-label="검색어"를 쓸 수 있습니다.

자주 틀리는 예

1. placeholder만 있음

<input type="email" placeholder="이메일">

<label for="email">이메일</label>
<input type="email" id="email" placeholder="example@domain.com">

2. 글자는 옆에 있지만 연결되지 않음

<span>휴대폰</span> <input type="tel">

눈으로는 레이블처럼 보여도 span은 입력 칸과 연결되지 않습니다. label for로 바꾸세요.

3. id가 중복되어 다른 칸과 연결됨

for="phone"인데 id="phone"이 두 번 있으면 첫 번째 칸에만 연결됩니다. 복사해서 만든 서식에서 자주 생깁니다. (8.1.1 마크업 오류 방지 참고)

4. 라디오·체크박스 묶음에 질문이 없음

<fieldset>
  <legend>배송 방법</legend>
  <label><input type="radio" name="ship" value="parcel"> 택배</label>
  <label><input type="radio" name="ship" value="pickup"> 방문 수령</label>
</fieldset>

fieldset과 legend로 묶으면 화면 낭독기가 “배송 방법, 택배, 라디오 버튼”처럼 질문과 선택지를 함께 읽습니다.

확인하는 방법

1. 확장 프로그램 페이지 검사는 레이블이 연결되지 않은 입력 칸을 찾아줍니다. placeholder만 있는 칸도 레이블 누락으로 표시합니다.
2. 레이블 글자를 마우스로 눌렀을 때 해당 입력 칸이 선택되는지 확인해 보세요. 선택되면 연결된 것입니다.
3. 레이블 글자가 입력 내용을 충분히 설명하는지(예: “번호” → “휴대폰 번호”)는 직접 판단하세요.