[H44] label요소를 이용하여 '텍스트 레이블(text labels)'과 '폼 컨트롤(form controls)' 연결하기

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H44.html

---

'입력 필드(input field)'에 id 속성 값과 label요소에 for속성 값을 동일하게 해주면 두 요소가 연결된다.

---

기술설명

이 기술의 목적은 label요소를 사용하여 '폼 컨트롤(form controls)'을 '텍스트 레이블(text labels)'과 명시적으로 연결한는 것입니다. label요소의 for 속성으로 해당 '폼 컨트롤(form controls)'과 연결할 수 있습니다. for 속성 값은 해당 '폼 컨트롤(form controls)'의 id속성 값과 동일해야 합니다. '폼 컨트롤(form controls)'의 name 속성 값과 id 속성 값은 동일할 수 있지만 id 속성 값은 다른 id 속성과 중복되지 않게 사용해야 합니다.

 

label요소는 CSS를 사용하여 숨길 수도 있습니다. label요소는 필드(input field)의 목적을 이해하는데 도움이 되는 요소이므로 반드시 표시되어야 합니다.

 

이 기술의 또 다른 장점은 컨트롤의 클릭 영역이 넓어진다는 것입니다.

label요소나 컨트롤을 클릭하면 컨트롤이 활성화되기 때문입니다. 그래서 운동 능력이 떨어지는 사용자들에게 도움이 될 수 있습니다. label요소는 해당 필드 앞에 제공되어야 합니다.

 

*참고. label요소를 사용할 수 있는 ‘폼 컨트롤(form controls)'들 은 다음과 같습니다.

- input type="text"

- input type="checkbox"

- input type="radio"

- input type="file"

- input type="password"

- textarea

- select

 

다음과 같은 요소들은 자체적으로 label역할을 하므로, label요소를 사용하지 않습니다.

- 제출하기 및 리셋버튼 ( input type="submit" or input type="reset")

- 이미지 버튼 ( input type="image")

- 숨김 필드 ( input type="hidden")

- 스크립트용 버튼 (button요소 또는 <input type="button">)

 

 

예시

[예제1] 텍스트 입력 필드

'이름:'이라는 label요소가 있습니다. 이 label요소의 for 속성 값은 해당 input요소의 id 값과 동일합니다.

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

 

[예제2] 체크 박스

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

 

[예제3] 라디오 버튼

<h1>도넛 선택하기</h1>
<p>원하는 도넛을 선택한 다음에 '구매하기'버튼을 눌러주세요.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" /><label for="choc">초코 도넛</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/><label for="cream">크림 가득 도넛</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/><label for="honey">허니 도넛</label><br/>
  <input type="submit" value="구매하기"/>
</p>
</form>

각 요소에 대한 명확한 label이 제공되고 있습니다

 

 

자료

HTML 4.01 양식 레이블

WCAG 2.0을 사용한 접근 가능한 양식

 

 

관련기술

G167: 인접 버튼을 사용하여 필드의 목적에 레이블 지정

H65: 레이블 요소를 사용할 수 없는 경우 title 속성을 사용하여 양식 컨트롤 식별

H71: fieldset 및 legend 요소를 사용하여 폼 컨트롤 그룹에 대한 설명 제공

 

 

점검절차

input요소의 type속성이 text, file, password, textareas, select인 경우:

1. type속성이 text, file, password, textareas, select인 input요소에 목표를 식별하는 label이 있는지 확인합니다.

2. label의 for 속성 값이 해당 input요소의 id 속성 값과 동일한지 확인합니다.

3. label요소가 보이는지 확인합니다.

 

input요소의 type속성이 radio, checkbox인 경우:

1. input요소 뒤에 label요소가 오는지 확인합니다.

2. label의 for 속성 값이 해당 input요소의 id 속성 값과 동일한지 확인합니다.

3. label요소가 보이는지 확인합니다.

 

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

https://link.coupang.com/a/cv9oir

[삼성전자 공식파트너] 갤럭시북4 15.6 코어I5 13세대 가성비 노트북 한컴오피스팩 동봉 - 노트북 |

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

 

나의 정리

'텍스트 레이블(text labels)'과 '폼 컨트롤(form controls)', '입력 필드(input field)' 용어 설명부터 하겠습니다.

 

입력 필드(input field): 웹 페이지에서 사용자가 데이터를 입력하는 공감을 말하며, 주로 input, textareas, select요소를 의미합니다. 

텍스트 레이블(text labels): 입력 양식(form)에서 ‘입력 필드(input field)’의 목적을 설명해주는 텍스트를 말합니다.

쉽게 말해 label요소를 의미합니다.

폼 컨트롤(form controls): 웹페이지에서 사용자가 입력하거나 선택할 수 있는 모든 요소를 말합니다.

입력 필드(input field)와 동일하다고 볼 수 있습니다.

 

용어들을 알았으니 정리해 보겠습니다.

 

이 기술은 폼(form)안에 있는 '입력 필드(input field)'와 '텍스트 레이블(text labels)'을 연결해 주는 방법을 말하고 있습니다.

'입력 필드(input field)'에 id속성을 줍니다. id속성이므로 다른 요소들의 id과 중복되지 않게 고유한 값을 주어야 합니다.

그리고 해당 '입력 필드(input field)'의 목적을 설명하는 label요소에 for속성을 주고 for속성 값은 해당 '입력 필드(input field)'의 id 속성 값을 넣어주면 됩니다.

즉 '입력 필드(input field)'에 id 속성 값과 label요소에 for속성 값을 동일하게 해주면 두 요소가 연결된다는 것입니다.

 

이렇게 연결시키면 사용자는 '입력 필드(input field)'의 목적을 쉽게 이해할수 있으며, '스크린 리더'같은 '보조 기술'들도 데이터를 정확하게 이해 할 수 있게 됩니다.

label요소는 해당 '입력 필드(input field)' 앞에 위치해야  하지만 체크박스(input type="checkbox")와 라디오박스(input type="radio")는 뒤에 위치시킵니다.

 

참고로, 제출 버튼(input type="submit"), 리셋 버튼(input type="reset"), 이미지 버튼(input type="image"), 숨김 필드(input type="hidden"), 버튼(button요소 or input type="button")들은 label요소를 필요로 하지 않습니다.

---

 

H44: Using label elements to associate text labels with form controls

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H44.html

H44: Using label elements to associate text labels with form controls | Techniques for WCAG 2.0