0Pricing
HTML Academy · Ders

label Öğesi ve Erişilebilirlik

Ekran okuyucu desteği için etiketleri girdilerle ilişkilendirmeyi öğrenin.

label Öğesi ve Erişilebilirlik, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

label'lar Neden Önemlidir?

<label> öğesi, bir metin açıklamasını form denetimiyle ilişkilendirir:

  • Ekran okuyucular, input odaklandığında label'ı duyurur
  • label'a tıklamak ilişkili input'u etkinleştirir
  • Label olmadığında ekran okuyucu kullanıcıları bir alanın ne amaçla kullanıldığını bilemez

for ile Açık label İlişkilendirmesi

for özniteliği, bir label'ı id aracılığıyla input'a bağlar:

<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 -->

Örtük label (Sarma)

input'u label'ın içine sarmak örtük bir ilişkilendirme oluşturur:

<!-- 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) -->

label ve input Ayrılığı

label ve input bitişik olamadığında aria-labelledby kullanın:

<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 -->

Alternatif Olarak aria-label

Görünür bir label mümkün olmadığında aria-label kullanın:

<!-- 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>

Her input İçin Bir label

Her input tam olarak bir label'a sahip olmalıdır. Birden fazla input için ayrı label'lar kullanılmalıdır:

<!-- 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">

Zorunlu Alan Göstergesi

Zorunlu alanları erişilebilir biçimde belirtin:

<!-- 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>

Gruplar İçin fieldset ve legend

İlişkili input'ları <fieldset> ve <legend> ile gruplayın:

<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>

Radyo Grupları İçin fieldset

Radyo düğmesi grupları her zaman bir fieldset ve legend gerektirir:

<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 label Değildir

Kullanıcı yazdığında placeholder kaybolur — label'ın yerini tutamaz:

<!-- 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">

Görsel Olarak Gizli label'lar

Tasarımda görünür bir label yoksa, ekran okuyucular için koruyarak görsel olarak gizleyin:

<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;
}

Hızlı Kontrol

Açık ilişkilendirme kullanarak bir label'ı input ile nasıl ilişkilendirirsiniz?

Özet: label Erişilebilirliği

label kullanımının temel noktaları:

  • Her input'un her zaman bir label'a ihtiyacı vardır
  • <label for="id"> açık ilişkilendirme sağlar
  • input'u label'ın içine sarmak = örtük ilişkilendirme
  • aria-labelledby, id aracılığıyla herhangi bir öğeye bağlanır
  • Görünür metni olmayan yalnızca simgeli düğmeler için aria-label kullanılır
  • Gruplandırılmış denetimler için <fieldset> + <legend> kullanılır

Sıkça Sorulan Sorular

“label Öğesi ve Erişilebilirlik” dersi ücretsiz mi?

Evet — “label Öğesi ve Erişilebilirlik” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“label Öğesi ve Erişilebilirlik” dersinde ne öğreneceğim?

Ekran okuyucu desteği için etiketleri girdilerle ilişkilendirmeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“label Öğesi ve Erişilebilirlik” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. form Öğesi: action, method ve enctype
  2. Girdi Türleri: text, password, email, number ve tel
  3. label Öğesi ve Erişilebilirlik
  4. button Öğesi: submit, reset ve button
← HTML Academy Sayfasına Dön