모든 입력에는 실제 label이 필요합니다
label과 필드를 연결해 탭과 읽기가 제대로 작동하게 하세요.
모든 입력에는 실제 label이 필요합니다은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
레이블이 중요한 이유
이름이 없는 양식 필드는 정체를 알 수 없는 상자와 같습니다. 실제 레이블은 시각을 사용하는지 여부와 관계없이 모든 사용자에게 무엇을 입력해야 하는지 정확히 알려 줍니다. 🏷️
label 요소
label 요소는 필드의 이름을 지정하는 HTML의 기본 기능입니다. 브라우저, 스크린 리더, 탭 영역이 이를 자동으로 이해합니다.
for와 id로 연결하기
가장 깔끔한 연결 방법은 레이블의 for 값이 입력 요소의 id와 일치하게 하는 것입니다. 그러면 두 요소가 공식적으로 연결됩니다.
<label for="email">Email</label>
<input id="email" type="email">id는 고유해야 합니다
가리키는 id는 페이지에서 고유해야 합니다. 두 입력 요소가 하나의 id를 공유하면 연결이 조용히 깨집니다.
감싸는 방법도 사용할 수 있습니다
입력 요소를 레이블 안에 감쌀 수도 있습니다. 중첩만으로 연결 관계가 분명해지므로 id가 필요하지 않습니다.
<label>Email
<input type="email">
</label>더 큰 클릭 영역
연결된 레이블은 사용자에게 더 넓은 클릭 영역을 제공합니다. 텍스트를 탭하면 필드에 포커스를 맞추거나 선택할 수 있어 손이 떨리거나 화면이 작을 때 도움이 됩니다.
스크린 리더가 읽습니다
연결된 입력 요소에 포커스가 놓이면 스크린 리더가 먼저 레이블을 읽습니다. 레이블이 없으면 사용자는 필드 유형만 듣게 됩니다.
title만으로는 충분하지 않습니다
title 속성은 마우스를 올렸을 때 표시될 수 있지만 터치와 키보드에서는 안정적으로 작동하지 않습니다. 실제 레이블을 대신할 수 없습니다.
체크박스에도 레이블이 필요합니다
체크박스와 라디오 버튼은 시각적으로는 명확해 보여도 레이블이 있어야 탭할 수 있고 안내받을 수 있습니다. 레이블 없이 두지 마세요.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>숨기는 것보다 보이게 하기
가능하면 레이블을 보이게 유지하세요. 인지 부담을 느끼는 시각 사용자도 스크린 리더 사용자만큼 큰 도움을 받을 수 있습니다.
숨겨야 하는 경우
검색 상자에 텍스트를 표시할 공간이 없다면 visually-hidden 클래스로 레이블을 숨기세요. display none은 사용하지 마세요. 그래야 보조 기술이 레이블에 접근할 수 있습니다.
빠른 확인
레이블은 자신이 어떤 입력 요소의 이름인지 어떻게 알 수 있나요?
복습
모든 입력 요소에는 for와 id로 연결하거나 감싸는 방식으로 연결한 실제 레이블이 필요합니다. 이 한 가지 습관만으로도 양식을 탭하기 쉽고 읽기 쉽고 명확하게 만들 수 있습니다. ✅
자주 묻는 질문
“모든 입력에는 실제 label이 필요합니다” 강의는 무료인가요?
네 — “모든 입력에는 실제 label이 필요합니다” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“모든 입력에는 실제 label이 필요합니다”에서 뭘 배우나요?
label과 필드를 연결해 탭과 읽기가 제대로 작동하게 하세요. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“모든 입력에는 실제 label이 필요합니다” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 모든 입력에는 실제 label이 필요합니다
- Placeholder는 label이 아닙니다
- fieldset과 legend로 필드 그룹화하기
- 도움말 텍스트와 필수 필드 알리기