[웹접근성] label 태그

스크린리더와 같은 통신 기기는 label 태그를 통해 input 태그를 인식한다

 

• label 태그는 양식 입력 창의 요소들을 위한 캡션
• 명시적, 암시적 코드 작성 방법이 있다
• 주로 input 태그와 함께 사용

<label for="text">텍스트</label>
<input type="text" id="text" />

label의 for 속성을 input의 id 속성으로 연결

 

 

• 명시적 작성 방식

<label for="text">텍스트</label>
<input type="text" id="text" />

 

• 암시적 작성 방식

<label>
  텍스트
  <input type="text" id="text" />
</label>

 

두 방식 모두 사용하더라도 문제가 없는 것이 표준이지만

일부 통신 기기에서 암시적 방식을 지원하지 않기 때문에 명시적 방식을 사용하는 것이 좋다

 

• 디자인 상 label이 제공되기 어려운 경우는 input 태그에 title 속성을 사용
• input의 placeholder의 경우 스크린리더에서 읽혀지는것을 보장할수 없으므로 title 속성도 사용