7.3.2 레이블 제공

요구 사항

사용자 입력(입력 상자, 라디오 버튼, 체크박스, 드롭다운 등)은 용도를 이해할 수 있도록 레이블을 제공해야 합니다.

• 대응하는 레이블 제공: 입력 서식 근처에 용도를 알려 주는 레이블을 두고, 보조기술이 알 수 있도록 해당 컨트롤과 프로그램적으로 연결합니다. 단순히 텍스트를 옆에 두기만 하면 보조기술은 그 입력란의 레이블을 인식하지 못합니다.

표준에서 레이블은 HTML label 요소에 한정되지 않고, 사용자가 구성요소를 식별하도록 제시된 텍스트를 말합니다.

KWCAG 2.1의 해당 항목: 7.4.1 레이블 제공(7.4 입력 도움 지침)

왜 필요한가요

화면낭독기는 입력란에 초점이 가면 연결된 레이블을 읽어 줍니다. 연결이 없으면 “편집 창”이라고만 읽혀 무엇을 입력해야 할지 알 수 없습니다. label을 연결하면 레이블을 눌러도 입력란이 선택되어 누르는 영역도 넓어집니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 인지장애·학습장애가 있는 사용자
• 운동 기능에 제약이 있는 사용자(넓은 클릭 영역)
• 음성 명령 사용자

적용 방법

<label for>와 입력란의 id를 연결하는 것이 기본입니다. 화면에 레이블을 표시하기 어려운 검색창 등은 title이나 aria-label을 쓰며, 플레이스홀더만으로 레이블을 대신하지 않습니다. 관련된 라디오·체크박스 묶음은 fieldset/legend로 묶습니다(폼 가이드).

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

<fieldset>
  <legend>수신 방법</legend>
  <label><input type="checkbox" name="rcv" value="sms"> 문자</label>
  <label><input type="checkbox" name="rcv" value="mail"> 이메일</label>
</fieldset>

<!-- 화면에 레이블이 없는 검색창 -->
<input type="search" aria-label="사이트 내 검색" placeholder="검색어를 입력하세요">

사례

<label for="tel">휴대전화</label>
<input id="tel" type="tel">

<span>휴대전화</span> <input type="tel">

<input type="text" placeholder="아이디">

자주 하는 실수

• label의 for 값과 입력란 id가 다르거나 id가 중복됩니다.
• 입력란에 레이블이 전혀 없거나 플레이스홀더로만 대신합니다.
• 전화번호처럼 여러 칸으로 나뉜 입력란 중 일부에만 레이블이 있습니다.
• 하나의 label이 여러 입력란을 가리킵니다.

검사 방법

• 모든 input, select, textarea에 label, title, aria-label, aria-labelledby 중 하나로 레이블이 연결되어 있는지 확인합니다.
• 레이블 텍스트가 입력란의 용도를 설명하는지 확인합니다.
• 화면낭독기로 각 입력란에 초점을 옮겨 레이블이 함께 읽히는지 확인합니다.
• 인증 심사에서는 전문가 심사와 장애인 사용자 심사로 확인하므로, 자동 검사 도구 결과만으로 준수를 판단하지 않습니다.

관련 ARIA

다른 지침의 대응 항목