암시적인 label 요소 안의 checkbox 사용에 대해 질문이 있습니다.

Question

암시적인 label 요소 안의 checkbox 사용에 대해 질문이 있습니다.

조회수 7638회

fast-frontend

label

html

implicit-link

input

2

싫어요

checkbox 를 만드는 방법에서 글자 영역을 클릭해도 checkbox를 체크 하는 방법으로

<input type="checkbox" id="check01">
<label for="check01">check01</label>

처럼 input에 id와 label에 for를 연결 시켜 만드는 방법을 주로 사용했는데요,

<label>
    <input type="checkbox"> check01
</label>

label 태그 안에 input요소를 넣어서 만드는 방법도 있다는걸 알게 되었습니다. 이렇게 만들면 id 와 for 속성을 사용하지 않아도 되는것 같습니다.

혹시 후자의 방법이 웹표준에 어긋나거나 안 좋은 방식인 지 궁금합니다. [MDN label] https://developer.mozilla.org/ko/docs/Web/HTML/Element/label 에서 는 후자와 같은 방법도 있다고 소개 되어있는데... 웹표준에 맞는 방식인지 궁금합니다!

제가 예시로 만들어본 코드펜 공유 드립니다. https://codepen.io/Neodahl/pen/YjaMPX

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 4 · Accepted Answer

안녕하세요 NeoDahl 님 ^ ㅡ ^

레이블 × 인풋 요소

레이블과 인풋 요소를 연결하는 방법은 2가지로, 명시적(explicit) 연결과 암시적(implicit) 연결로 나뉩니다.

명시적 연결

명시적 연결은 레이블 요소의 for 속성과 인풋 요소의 id 속성을 동일한 값을 사용하여 명시적으로 연결하는 것을 말합니다.

<label for="user-id">아이디</label>
<input type="text" id="user-id">

암시적 연결

암시적 연결은 인풋 요소를 레이블 요소로 감싸 연결하는 방법입니다.

<label>아이디 <input type="text"></label>

각 연결 방법의 차이점은 무엇일까?

명시적, 암시적 연결 모두 동일한 결과를 제공합니다. 다만, 접근성과 관련하여 차이가 있습니다.

명시적 연결

명시적 연결은 레이블과 인풋 요소 사이에 다른 HTML 요소가 포함될 경우 사용하기 용이합니다.

명시적 연결을 사용하면 레이블 요소를 이용해 인풋 요소와 레이블을 연결해주면 인풋 요소에 어떠한 내용을 입력해야 하는지 명확해 지기 때문에 접근성이 향상 됩니다. 그리고 연결된 레이블 콘텐츠를 사용자가 클릭할 경우, 인풋 요소의 체크 상태가 변경 되므로 사용성 또한 향상 됩니다.

암시적 연결

암시적 연결의 경우, 일부 정보 통신 보조기기에서 연결을 인식하지 못하는 문제가 있어, 접근성을 염두에 둔다면 명시적 연결을 사용하는 것이 보다 권장됩니다. (Generally, explicit labels are better supported by assistive technology)

.

하지만 오늘 날 사용 되는 정보 통신 보조기기 대부분은 암시적 연결을 지원합니다. 그러므로 암시적 연결 방법 사용이 큰 문제가 되지는 않을 것 같습니다. Google Guide - 접근성 트리 글을 참고해 읽어보세요.

.

다만 추후 접근성 문제가 발생한다면 암시적 방법에서 명시적 방법으로 수정 보완해야 할 수도 있습니다.