레이블 제공 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

7.4.1 레이블 제공

이해의 용이성

국제 기준 (WCAG 2.2)

3.3.2 레이블 또는 안내 (A) ↗1.3.1 정보와 관계 (A) ↗

어떻게 검사하나요

모든 입력 서식에 레이블이 연결되어 있는지는 자동 검사되지만, 레이블 내용이 입력 목적을 정확히 설명하는지, placeholder만으로 레이블을 대신하고 있지 않은지 확인하세요.

자동 검사로 잡히는 부분

이 항목은 9개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 입력 서식에 레이블이 없습니다 label

  레이블 없는 입력 필드는 스크린 리더가 "편집창"이라고만 읽어 무엇을 입력해야 할지 알 수 없습니다.

  <!-- 권장: label 요소 연결 -->
  <label for="email">이메일</label>
  <input id="email" type="email" autocomplete="email">
  
  <!-- 시각적 레이블을 둘 수 없는 경우 -->
  <input type="search" aria-label="사이트 검색">

  placeholder는 입력을 시작하면 사라지므로 레이블 대용이 될 수 없습니다.

• select 요소에 접근 가능한 이름이 없습니다 select-name

  <select>에도 <label> 또는 aria-label로 이름을 제공해야 합니다.

• title 속성만으로 레이블을 제공하고 있습니다 label-title-only

  title 속성은 마우스 오버 시에만 보이고 일부 보조기기는 읽지 않습니다. 눈에 보이는 <label>을 제공하세요.

• 하나의 입력에 여러 label이 연결되었습니다 form-field-multiple-labels

  여러 label이 연결되면 보조기기마다 읽는 내용이 달라집니다. label은 하나만 연결하고 부가 설명은 aria-describedby로 제공하세요.

• 버튼에 인식 가능한 텍스트가 없습니다 button-name

  아이콘만 있는 버튼은 스크린 리더가 "버튼"이라고만 읽습니다.

  <!-- 잘못된 예 -->
  <button><svg>…</svg></button>
  <!-- 올바른 예 -->
  <button aria-label="메뉴 열기"><svg aria-hidden="true">…</svg></button>

• input 버튼에 텍스트가 없습니다 input-button-name

  <input type="button|submit|reset">에는 value 속성으로 버튼 이름을 제공하세요.

  <input type="submit" value="신청하기">

• summary 요소에 접근 가능한 이름이 없습니다 summary-name

  접기/펼치기(<details>)의 <summary>에 무엇이 펼쳐지는지 알 수 있는 텍스트를 제공하세요.

• ARIA 입력 필드에 접근 가능한 이름이 없습니다 aria-input-field-name

  role="textbox", role="combobox" 등 커스텀 입력 위젯에 aria-label 또는 aria-labelledby로 이름을 제공하세요.

• ARIA 토글 필드에 접근 가능한 이름이 없습니다 aria-toggle-field-name

  role="checkbox", role="switch" 등 토글 위젯에 이름을 제공하세요.