HTML Academy · 강의

label 요소와 접근성

스크린 리더를 지원하도록 label을 입력 요소와 연결합니다.

label 요소와 접근성은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

레이블이 중요한 이유

<label> 요소는 텍스트 설명을 폼 컨트롤과 연결합니다:

화면 낭독기는 입력 필드에 포커스가 맞춰질 때 레이블을 안내합니다
레이블을 클릭하면 연결된 입력 필드가 활성화됩니다
레이블이 없으면 화면 낭독기 사용자는 필드의 용도를 알 수 없습니다

for를 사용한 명시적 레이블

for 속성은 id를 통해 레이블과 입력 필드를 연결합니다:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

암시적 레이블(감싸기)

입력 필드를 레이블 안에 넣으면 암시적 연결이 만들어집니다:

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

레이블과 입력 필드 분리

레이블과 입력 필드를 나란히 배치할 수 없을 때는 aria-labelledby를 사용합니다:

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

대안으로 사용하는 aria-label

화면에 표시되는 레이블을 사용할 수 없을 때는 aria-label을 사용합니다:

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

입력 필드마다 레이블 하나씩

각 입력 필드에는 정확히 하나의 레이블이 있어야 합니다. 여러 입력 필드에는 별도의 레이블을 사용해야 합니다:

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

필수 필드 표시

필수 필드를 접근성을 고려하여 표시합니다:

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

그룹을 위한 fieldset과 legend

<fieldset>과 <legend>로 관련 입력 필드를 그룹화합니다:

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

라디오 그룹을 위한 fieldset

라디오 버튼 그룹에는 항상 fieldset과 legend가 필요합니다:

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

placeholder는 레이블이 아닙니다

사용자가 입력을 시작하면 플레이스홀더가 사라지므로 레이블을 대신할 수 없습니다:

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

시각적으로 숨긴 레이블

디자인상 화면에 레이블을 표시할 수 없다면 화면 낭독기를 위해 레이블을 유지하면서 시각적으로 숨기십시오:

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

빠른 확인

명시적 연결을 사용하여 레이블과 입력 필드를 연결하려면 어떻게 해야 하나요?

복습: label 접근성

레이블의 핵심 내용입니다:

모든 입력 필드에는 항상 레이블이 필요합니다
<label for="id">는 명시적 연결입니다
입력 필드를 레이블 안에 넣는 것은 암시적 연결입니다
aria-labelledby는 id를 통해 모든 요소와 연결합니다
화면에 텍스트가 없는 아이콘 전용 버튼에는 aria-label을 사용합니다
그룹으로 묶은 컨트롤에는 <fieldset>과 <legend>를 사용합니다

자주 묻는 질문

“label 요소와 접근성” 강의는 무료인가요?

네 — “label 요소와 접근성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“label 요소와 접근성”에서 뭘 배우나요?

스크린 리더를 지원하도록 label을 입력 요소와 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“label 요소와 접근성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

form 요소: action, method, enctype
입력 타입: text, password, email, number, tel
label 요소와 접근성
button 요소: submit, reset, button

← HTML Academy(으)로 돌아가기