HTML label, fieldset ve legend: Form Alanlarını Doğru Etiketleme

label neden gerekli?

Bir alanın yanına düz metin yazmak görsel olarak yeterli görünebilir, ama tarayıcı için bu metinle alan arasında hiçbir ilişki yoktur. MDN input sayfası bu durumu açıkça "erişilemez" diye örnekler. <label> ile kurulan bağın iki somut yararı vardır:

• Programatik ad: etiket metni alanın erişilebilir adı olur. Ekran okuyucu, kullanıcı alana odaklandığında bu metni okur ve ne girilmesi gerektiğini anlatır.
• Daha büyük tıklama alanı: etikete tıklamak ya da dokunmak odağı bağlı alana taşır ve olayı alan için de tetikler. Küçük onay kutuları ve radyo düğmelerinde bu fark büyüktür; dokunmatik ekran kullananlar ve motor güçlüğü olan kişiler için ciddi kolaylık sağlar.

<!-- Erişilemez: metin ile alan arasında bağ yok -->
<p>Adınız: <input id="ad1" type="text" /></p>

<!-- Doğru: etiket alana bağlı -->
<p>
  <label for="ad2">Adınız:</label>
  <input id="ad2" type="text" name="ad" />
</p>

Açık bağlama ve örtük bağlama

Bir etiketi alana bağlamanın iki yolu vardır. Açık (explicit) bağlamada alana bir id verir, etiketin for özniteliğine aynı değeri yazarsınız. Örtük (implicit) bağlamada alanı doğrudan etiketin içine koyarsınız; bu durumda for ve id gerekmez.

<!-- Açık bağlama -->
<label for="bulten">Bülten almak istiyorum</label>
<input type="checkbox" id="bulten" name="bulten" />

<!-- Örtük bağlama -->
<label>
  Kampanya duyurularını almak istiyorum
  <input type="checkbox" name="kampanya" />
</label>

<!-- İkisi birlikte: for, içerdeki alanı göstermek zorunda -->
<label for="sozlesme">
  <input type="checkbox" id="sozlesme" name="sozlesme" />
  Kullanım koşullarını kabul ediyorum
</label>

İki yöntem eşdeğer kabul edilir, ama MDN bazı farklara dikkat çeker. Yaygın tarayıcı ve ekran okuyucu ikilileri örtük bağlamayı destekler, yine de bütün yardımcı teknolojiler desteklemez. Açık bağlamada alan ve etiket kardeş öğeler olduğu için düzen açısından daha esnektir. Öte yandan açık bağlama belgede benzersiz bir id gerektirir; bileşen tabanlı uygulamalarda bunu sağlamak ek özen ister.

MDN'in genel önerisi, harici araçlarla ve yardımcı teknolojilerle uyum için for özniteliğiyle açık bağlamadır. En geniş uyumluluk için alanı etiketin içine koyup aynı zamanda for ve id de yazabilirsiniz; tek şart, for değerinin içerideki alanı göstermesidir.

for özniteliği nasıl eşleşir?

Tarayıcı, belgede id değeri for ile aynı olan ilk öğeyi bulur. Bu öğe etiketlenebilir (labelable) bir öğeyse etiketin bağlı denetimi (labeled control) olur; değilse for hiçbir etki yapmaz. Aynı id değerine sahip sonraki öğeler dikkate alınmaz. Bu kural, tekrar eden id hatasının neden sessizce yanlış alanı etiketlediğini açıklar (sık yapılan HTML hataları).

Bir alana birden fazla etiket bağlanabilir: aynı for değerine sahip iki <label> yazmanız yeterlidir. JavaScript tarafında for özniteliği htmlFor özelliğiyle okunur; MDN label sayfası bu yansıtma özelliğini ayrıca belirtir.

<label for="kullanici">Kullanıcı adınız:</label>
<input id="kullanici" name="kullanici" type="text" />
<label for="kullanici">Kullanıcı adınızı mı unuttunuz?</label>

Hangi öğeler etiketlenebilir?

MDN içerik kategorileri rehberine göre etiketlenebilir öğeler şunlardır: <button>, type="hidden" dışındaki bütün <input> türleri, <meter>, <output>, <progress>, <select> ve <textarea>. Gizli alan görünmediği için etiketlenemez.

Düğmeler bir istisna oluşturur. Değeri dolu bir <input type="button"> ya da metni olan bir <button> adını zaten kendi metninden alır; MDN bunlara ayrıca etiket bağlamanın yardımcı teknolojilerin düğmeyi yorumlamasını bozabileceğini belirtir. İlerleme ve ölçüm çubukları için progress, meter ve output yazısına bakabilirsiniz.

label içine ne konmaz?

Teknik özete göre <label> yalnızca ifade içeriği (phrasing content) alır; içinde başka bir <label> bulunamaz ve bağlı denetim dışında etiketlenebilir başka bir öğe olamaz. Bunun yanında MDN iki erişilebilirlik kuralı koyar:

• Etkileşimli öğe koymayın: etiketin içine <a> ya da <button> yerleştirmek, kullanıcının asıl alanı etkinleştirmesini zorlaştırır. Koşullar bağlantısını etiketin dışına, tercihen alandan önce koyun.
• Başlık koymayın: h1 ile h6 arasındaki başlıklar ekran okuyucularda gezinme aracıdır; etiketin içinde olmaları bu gezinmeyi bozar. Görsel büyüklük gerekiyorsa etikete bir CSS sınıfı verin; bir bölüm başlığı gerekiyorsa fieldset ve legend kullanın.

<p>
  <a href="/kosullar">Kullanım koşullarını okuyun</a>
</p>
<label for="kabul">
  <input id="kabul" type="checkbox" name="kabul" />
  Kullanım koşullarını kabul ediyorum
</label>

<label> öğesinin örtük bir ARIA rolü yoktur ve üzerine hiçbir role yazılmasına izin verilmez. Bir etiketi düğme ya da bağlantı gibi davranacak şekilde değiştirmeye çalışmayın.

placeholder ve title etiketin yerini tutmaz

MDN Text labels and names rehberi, her form öğesinin görünür bir etiketi olmasını ister ve yer tutucu metne güvenilmemesini söyler, çünkü yazmaya başlanınca kaybolur. input sayfası da title özniteliğinin alanın amacını açıklayan birincil yöntem olarak kullanılmamasını, bunun yerine for ile bağlı bir etiket kullanılmasını önerir. title ve placeholder ancak ek ipucu olarak düşünülmelidir.

fieldset ile alanları gruplamak

<fieldset>, bir formun içindeki ilgili denetimleri ve etiketlerini bir grup hâline getirir. Teknik özete göre isteğe bağlı bir <legend> ve ardından akış içeriği alır; örtük ARIA rolü group olur. Tarayıcılar varsayılan olarak etrafına ince bir çerçeve çizer ve legend metnini çerçevenin üst kenarına yerleştirir; bu görünüm CSS ile tamamen değiştirilebilir.

Üç özniteliği vardır:

• disabled: içindeki bütün form denetimlerini tek seferde devre dışı bırakır. Bu denetimler düzenlenemez, odak ve tıklama almaz ve formla birlikte gönderilmez. Tek istisna <legend> içindeki denetimlerdir; onlar devre dışı kalmaz.
• form: fieldset öğesini başka bir forma bağlar. MDN bu kullanımın kafa karıştırıcı olduğunu vurgular: içerideki alanlar kendiliğinden bağlanmaz, her birine ayrıca form yazmanız gerekir.
• name: gruba bir ad verir. Fieldset gönderilebilir bir öğe olmadığı için bu ad form verisine eklenmez.

<form action="/kayit" method="post">
  <fieldset>
    <legend>Teslimat adresi</legend>
    <label for="sehir">Şehir</label>
    <input type="text" id="sehir" name="sehir" />
    <label for="posta">Posta kodu</label>
    <input type="text" id="posta" name="posta" />
  </fieldset>

  <fieldset disabled>
    <legend>Fatura adresi (teslimat ile aynı)</legend>
    <label for="fsehir">Şehir</label>
    <input type="text" id="fsehir" name="fsehir" />
  </fieldset>
  <button type="submit">Kaydet</button>
</form>

Bu örnekte ikinci gruptaki fsehir alanı devre dışı olduğu için gönderilmez. "Fatura adresi teslimat adresiyle aynı" gibi bir onay kutusunu legend içine koyarsanız, grup devre dışıyken bile o kutu çalışmaya devam eder; MDN'in tanımladığı istisna tam olarak bu senaryoya izin verir.

legend: grubun başlığı

<legend>, üst öğesi olan fieldset için bir başlıktır ve yalnızca ilk alt öğe olduğunda geçerlidir. İfade içeriği ve h1 ile h6 arasındaki başlıkları alabilir; örtük rolü yoktur ve role yazılamaz. MDN Text labels and names rehberi, legend olmayan bir grubun yardımcı teknoloji kullanıcılarını grubun amacını tahmin etmeye zorladığını, bu yüzden her fieldset için açık bir legend yazılmasını önerir.

Radyo düğmeleri bu konunun en tipik örneğidir. "Evet" ve "Hayır" tek başına bir anlam taşımaz; sorunun kendisi legend içinde durmalıdır:

<fieldset>
  <legend>Hesabınıza iki adımlı doğrulama eklensin mi?</legend>
  <input type="radio" id="iki-evet" name="iki-adim" value="evet" />
  <label for="iki-evet">Evet</label>
  <input type="radio" id="iki-hayir" name="iki-adim" value="hayir" checked />
  <label for="iki-hayir">Hayır</label>
</fieldset>

MDN legend sayfası bir yenilikten de söz eder: özelleştirilebilir select yapısında legend, <optgroup> öğesinin alt öğesi olarak da kullanılabilir ve grubun label metninin yerini alır; tarayıcı desteği için MDN uyumluluk tablosuna bakın (select yazısı).

Cümle içine gömülü alanlar

Bazen soru ve cevap aynı cümlede yer alır: "Bilgisayarı 10 dakika sonra kapat" gibi. Sayı kutusu cümlenin ortasındadır ve "dakika" sözcüğü alanın arkasından gelir. MDN Multipart labels rehberi bu durumda aria-labelledby önerir: alan, cümlenin parçalarının id değerlerini sırayla listeler ve bunlar birleşerek tek bir erişilebilir ad oluşturur. aria-labelledby, varsa label bağının önüne geçer.

<span id="kapat-metin">Bilgisayarı</span>
<input type="text" id="kapat-sure" value="10"
       aria-labelledby="kapat-metin kapat-sure kapat-birim" />
<span id="kapat-birim">dakika sonra kapat</span>

Burada alan kendi id değerini de listeye ekleyerek mevcut değerini adın içine katar. ARIA ile ad vermenin diğer yolları erişilebilir ad yazısında anlatılıyor.

Hangi denetim etiket ister?

MDN Text labels and names rehberi kuralı geniş tutar: bir formdaki her öğenin amacını belirten bir etiketi olmalıdır. Bu kural bütün <input> türlerini, <button>, <output>, <select>, <textarea>, <progress> ve <meter> öğelerini ve switch ARIA rolü taşıyan her öğeyi kapsar. Rehber ayrıca etiketin görünür olmasını ister; görünür etiketler yalnızca ekran okuyucu kullananlara değil herkese alanın ne için olduğunu anlatır.

Etiketleme yöntemi denetimin türüne göre değişir. Form alanlarında <label> kullanılır; bağlantılarda, düğmelerde ve tıklanabilir öğelerde ise adı genellikle öğenin kendi metni verir. Rehbere göre aria-label ancak başka bir seçenek kalmadığında son çare olarak düşünülmelidir. Pratikte bu, görünür metni olan bir düğmeye ek ad vermemeniz, metni olmayan bir arama kutusuna ise en azından erişilebilir bir ad sağlamanız anlamına gelir.

Etiket metnini yazarken de MDN'in input sayfasındaki uyarıyı hatırlayın: kullanıcıların sizin bildiğiniz her şeyi bildiğini varsaymayın. Kısa ama açık bir etiket, beklenen biçim için görünür bir ipucu ve gerekirse alanın önüne konmuş bir açıklama, formun herkes tarafından aynı şekilde anlaşılmasını sağlar. MDN, koşullar bağlantısı gibi gerekli bağlamın denetimden önce yer almasını, böylece kullanıcının alanla etkileşime girmeden önce okuyabilmesini önerir.

Uygulamalı örnek: erişilebilir bir iletişim formu

Aşağıdaki örnek bu yazıdaki kuralları bir araya getiriyor: her alanın açık bağlamalı bir etiketi var, kişisel bilgiler ve iletişim tercihi ayrı gruplarda, radyo grubunun sorusu legend içinde ve koşullar bağlantısı onay kutusundan önce, etiketin dışında duruyor.

<form action="/iletisim" method="post">
  <fieldset>
    <legend>Kişisel bilgiler</legend>
    <label for="i-ad">Ad soyad</label>
    <input type="text" id="i-ad" name="ad" autocomplete="name" required />
    <label for="i-eposta">E-posta</label>
    <input type="email" id="i-eposta" name="eposta" autocomplete="email" required />
  </fieldset>

  <fieldset>
    <legend>Size nasıl dönelim?</legend>
    <input type="radio" id="d-eposta" name="donus" value="eposta" checked />
    <label for="d-eposta">E-posta ile</label>
    <input type="radio" id="d-telefon" name="donus" value="telefon" />
    <label for="d-telefon">Telefonla</label>
  </fieldset>

  <p><a href="/gizlilik">Gizlilik politikasını okuyun</a></p>
  <input type="checkbox" id="i-onay" name="onay" required />
  <label for="i-onay">Gizlilik politikasını kabul ediyorum</label>

  <button type="submit">Gönder</button>
</form>

Radyo düğmeleri tek tek "E-posta ile" ve "Telefonla" diye adlandırılır; legend sayesinde yardımcı teknolojiler bu seçeneklerin "Size nasıl dönelim?" sorusuna ait olduğunu da kullanıcıya sunabilir. Onay kutusunun etiketi tıklanabilir alanı büyütür ve bağlantı etiketin dışında olduğu için yanlışlıkla kutuyu işaretlemez. Gönder düğmesinin adı kendi metninden geldiği için ayrıca etiket gerekmez.

Sık yapılan hatalar

• for değerini name ile eşleştirmek: for, alanın name değerine değil id değerine bakar.
• Aynı id değerini iki kez kullanmak: etiket ilk eşleşen öğeye bağlanır, ikinci alan etiketsiz kalır.
• Etiketin içine bağlantı veya başlık koymak: alanı etkinleştirmeyi ve sayfa içi gezinmeyi zorlaştırır.
• Radyo grubunu fieldset olmadan bırakmak: grubun sorusu ekran okuyucuya ulaşmaz.
• fieldset üzerindeki form özniteliğinin içeriye yayıldığını sanmak: yayılmaz; her alana ayrı yazılmalıdır.
• Gizli alana etiket yazmak: type="hidden" etiketlenebilir değildir.
• Görünür etiket yerine yalnızca placeholder kullanmak: metin yazılınca yönlendirme kaybolur.

Sık Sorulan Sorular

Açık mı örtük bağlama mı kullanmalıyım?

MDN, uyumluluk için açık bağlamayı (for ve id) önerir. Alanı etiketin içine koymak istiyorsanız aynı anda for da yazabilirsiniz.

Bir alanın iki etiketi olabilir mi?

Evet. Aynı for değerine sahip birden fazla <label> aynı alanı etiketler.

fieldset yalnızca radyo düğmeleri için mi?

Hayır. Adres, kart bilgileri veya iletişim tercihleri gibi birbiriyle ilgili her alan grubunda kullanılabilir. Radyo ve onay kutusu gruplarında ise neredeyse zorunlu kabul edilmelidir.

label içine div koyabilir miyim?

Hayır. <label> yalnızca ifade içeriği (phrasing content) alır; <div> ise akış içeriğidir. Etiket metnini bölmeniz gerekiyorsa <span> kullanın. Tersi serbesttir: label ifade içeriği kabul eden her öğenin içinde, dolayısıyla bir div içinde durabilir.

legend yerine bir başlık öğesi kullanabilir miyim?

Fieldset içinde başlık işlevini legend görür. İsterseniz legend içine bir h2 gibi başlık öğesi koyabilirsiniz; MDN teknik özeti buna izin verir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · form etiketi · input türleri · checkbox ve radio · erişilebilir ad · ARIA nedir · sık yapılan HTML hataları