<label>은 form 컨트롤에 접근성 있는 이름과 더 큰 클릭 대상을 제공합니다. 연결하는 방법은 두 가지가 있으며, 그렇게 하는 것은 accessibility에 필수적입니다.
방법 1: for + id (명시적)
html
<label =>Email address
label의 for가 input의 id와 일치합니다. 마크업에서 인접해 있지 않아도 동작합니다.
<label>
Email address
<input type="email" />
</label>
input이 label 안에 중첩됩니다. id가 필요 없습니다.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- 텍스트를 클릭하면 checkbox가 토글된다 -->
<input placeholder="Email" /> <!-- ❌ 입력 시 사라지고, 대비가 나쁘며, label이 아니다 -->
placeholder는 사용자가 입력하면 사라지고 안정적으로 안내되지 않습니다. 절대 유일한 label로 사용하지 마십시오.
<input type="search" aria-label="Search products" /> <!-- 접근성 있는 이름, 보이는 label 없음 -->
보이는 label이 정말로 불가능할 때만 aria-label(또는 aria-labelledby)을 사용하십시오.
적절히 연결된 label은 form에서 가장 영향력 있는 accessibility 관행 중 하나입니다. 모든 컨트롤에 보조 기술을 위한 이름을 부여하고 모두를 위해 클릭 대상을 넓힙니다.
진짜 <label>을 우선하고, 꼭 필요할 때만 aria-label로 대체하며, 절대 placeholder를 label로 의존하지 마십시오.