Semantik HTML

Bir sayfayı yalnız <div> ve <span> ile de kurabilirsin; ekranda aynı görünür. Fark, sayfayı gözle görmeyen her şey için ortaya çıkar: ekran okuyucular, klavye, arama motorları, okuma modu, otomatik testler, tarayıcının kendi kısayolları. Semantik HTML, işaretlemeye "bu bir gezinme, bu ana içerik, bu bir düğme" bilgisini eklemektir. Bu ders o bilginin nerede saklandığını (erişilebilirlik ağacı), doğru ögelerin hangileri olduğunu, ARIA'nın ne zaman gerektiğini ve — daha önemlisi — ne zaman gerekmediğini anlatıyor.

01Ne öğreneceksin

02Neden semantik

Şu iki parça ekranda aynı görünebilir:

<!-- A: anlamsız -->
<div class="ust">
  <div class="menu"><div class="baglanti">Ana sayfa</div></div>
</div>
<div class="icerik">
  <div class="baslik-buyuk">Başvurular</div>
  <div class="dugme" onclick="gonder()">Gönder</div>
</div>

<!-- B: semantik -->
<header>
  <nav aria-label="Ana menü"><a href="/">Ana sayfa</a></nav>
</header>
<main>
  <h1>Başvurular</h1>
  <button type="button" onclick="gonder()">Gönder</button>
</main>

A'nın kaybettikleri somuttur ve hiçbiri "iyi niyet" meselesi değildir:

Ölçülebilir bir örnek: A'daki <div class="dugme"> Tab ile odaklanılamaz, Enter/Boşluk ile çalışmaz, ekran okuyucuda "Gönder" diye metin olarak okunur — tıklanabilir olduğu hiç söylenmez. Aynı davranışı elde etmek için tabindex="0", role="button", keydown dinleyicisi (Enter ve Boşluk, Boşluk'un sayfa kaydırmasını da engelleyerek), aria-disabled yönetimi ve odak halkası CSS'i yazman gerekir. Yani <button> yazmak yerine 15 satır kod yazarsın ve muhtemelen bir ayrıntıyı kaçırırsın.

03Yer imleri (landmark) ve sayfa iskeleti

<body>
  <a class="atla" href="#ana">İçeriğe atla</a>

  <header>
    <a href="/">Kurum logosu</a>
    <nav aria-label="Ana menü"> … </nav>
  </header>

  <nav aria-label="Konum"> Ana sayfa › Başvurular </nav>

  <main id="ana">
    <h1>Başvurular</h1>

    <article>
      <h2>2026-114 numaralı başvuru</h2>
      <p>…</p>
      <footer><time datetime="2026-03-14">14 Mart 2026</time></footer>
    </article>

    <section aria-labelledby="ilgili">
      <h2 id="ilgili">İlgili duyurular</h2>
      …
    </section>
  </main>

  <aside aria-label="Yan bilgiler"> … </aside>

  <footer>
    <p>© 2026 Kurum</p>
  </footer>
</body>

section ile div ayrımı en çok karıştırılan konudur. Basit ölçüt: bu bloğun bir başlığı var mı ve içindekiler o başlık altında toplanıyor mu? Evetse section. Yalnızca Flexbox sarmalayıcısı olarak kutu gerekiyorsa div. section'ı gereksiz yere kullanmak zararsız değildir; ekran okuyucuda anlamsız bölge duyuruları üretir.

Atlama bağlantısı (İçeriğe atla) kurumsal projelerin erişilebilirlik denetiminde ilk bakılan maddelerdendir. Klavye kullanıcısı her sayfada 30 menü bağlantısını Tab'layarak geçmek zorunda kalmasın diye vardır. Görsel olarak gizlenir ama odaklanınca görünür olmalıdır — display:none ile gizlersen odak da alamaz:

.atla {
  position: absolute;
  left: -9999px;
}
.atla:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
}

Başlık hiyerarşisi: tek gerçek yapı

HTML5 tasarlanırken "belge ana hat algoritması" düşünülmüştü: her <section> kendi başlık düzeyini yaratacak, böylece her yerde <h1> yazılabilecekti. Bu algoritma hiçbir tarayıcı ya da yardımcı teknoloji tarafından uygulanmadı ve HTML standardından kaldırıldı. Hâlâ bu şekilde öğreten kaynaklar var; yanlıştır.

Bugün geçerli olan kurallar:

• Sayfada bir <h1>, sayfanın konusu.
• Seviye atlanmaz: h2'den sonra h4 gelmez.
• Seviye görsel boyut için seçilmez; boyut CSS'in işidir.
• Bileşen içinde doğru seviyeyi bilmiyorsan (bileşen her yerde kullanılabiliyorsa) seviyeyi dışarıdan parametre olarak al — 10. ve 11. hattaki bileşen yazımında bu somut bir tasarım kararıdır.

Ekran okuyucu kullanıcılarının sayfayı keşfetme yollarından en çok kullanılanı başlık listesidir. Yani başlık hiyerarşisi, o kullanıcı için sayfanın içindekiler tablosudur ve bozuk hiyerarşi doğrudan gezinme kaybıdır.

04Diğer semantik ögeler

<details> ve <dialog>, "elle yazmak yerine platformu kullan" ilkesinin en iyi örnekleridir. Kendi kalıcı iletişim kutunu yazarsan odak hapsi (modal açıkken Tab'ın arkadaki içeriğe kaçmaması), Esc ile kapanma, açılmadan önceki odağa geri dönme, arka planın ekran okuyucudan gizlenmesi ve sayfa kaydırmasının kilitlenmesi senin sorumluluğundur. <dialog> bunların çoğunu hazır verir.

05Erişilebilirlik ağacı

Tarayıcı DOM'un yanında ikinci bir ağaç kurar: erişilebilirlik ağacı. Ekran okuyucular DOM'u değil bu ağacı okur. Her düğümün dört temel bilgisi vardır:

Bunu görebilirsin: DevTools → Elements → sağdaki Accessibility bölmesi. Bir ögeye tıkla; rolünü, hesaplanan adını ve o adın hangi kaynaktan geldiğini gösterir. Erişilebilirlik hatalarını tahmin etmek yerine burada okumak, bu dersin en pratik çıktısıdır.

Ad hesaplama sırası bilinmesi gereken bir ayrıntıdır, çünkü sürprizler üretir: aria-labelledby > aria-label > yerel etiket (label, alt, iç metin) > title. Yani bir düğmeye aria-label="Kapat" yazarsan, içindeki "İptal" metni duyulmaz. Sesli komut kullanan biri ekranda "İptal" görüp "İptal'e tıkla" der ve hiçbir şey olmaz. Bu yüzden kural şudur: görünen metin, erişilebilir adın içinde geçmelidir (WCAG 2.5.3, "Label in Name").

06ARIA: ne zaman, ne kadar

ARIA (Accessible Rich Internet Applications), HTML'in karşılığı olmayan arayüz desenlerini (sekmeler, ağaç görünümü, birleşik kutu) erişilebilirlik ağacına anlatmak için vardır. Beş kuralı ezberlenir:

1. Yerine geçen bir HTML ögesi varsa onu kullan. <button> dururken <div role="button"> yazma.
2. Yerleşik semantiği bozma. <h2 role="button"> yazarsan artık başlık değildir; başlık listesinden düşer.
3. Tüm etkileşimli ARIA bileşenleri klavyeyle kullanılabilmelidir. Rol vermek davranış getirmez — role="button" yazmak Enter tuşunu çalıştırmaz.
4. Odaklanabilir bir ögeyi aria-hidden="true" yapma. Görünen ama ekran okuyucuda olmayan bir odak noktası üretirsin; kullanıcı Tab'lar, odak "hiçbir yere" gider.
5. Her etkileşimli ögenin erişilebilir bir adı olmalıdır. Yalnız simge içeren düğmeler bu yüzden aria-label ister.

Ve en önemli cümle: ARIA kullanmamak, yanlış ARIA'dan iyidir. Yanlış rol, ekran okuyucuya var olmayan bir gerçeklik anlatır ve kullanıcıyı tamamen yanlış yönlendirir; hiç ARIA olmasa kullanıcı en azından ham metni duyar.

Gerçekten gerekli olduğu yerler:

<!-- Simge düğmesi: görünen metin yok -->
<button type="button" aria-label="Menüyü aç" aria-expanded="false">☰</button>

<!-- Aynı sayfadaki iki gezinme -->
<nav aria-label="Ana menü">…</nav>
<nav aria-label="Konum">…</nav>

<!-- Bulunduğun sayfa -->
<a href="/basvurular" aria-current="page">Başvurular</a>

<!-- Süsleme: ekran okuyucu duymasın -->
<span aria-hidden="true">→</span>

<!-- Sonradan gelen bildirim: kesmeden duyur -->
<div role="status" aria-live="polite">3 kayıt bulundu.</div>

aria-live iki değerle kullanılır: polite kullanıcının o anki okumasını bekler, assertive keser. Neredeyse her zaman polite doğrudur; assertive yalnız kritik hatalar içindir ve kötüye kullanılırsa ekran okuyucu kullanıcısı sayfayı kullanılamaz bulur. Ayrıca canlı bölge sayfa yüklenirken DOM'da bulunmalıdır; içeriğiyle birlikte sonradan eklenen bir bölge çoğu okuyucuda duyurulmaz.

Bu sitede de aynı kurallar uygulanmıştır: üst bardaki hamburger düğmesinde aria-label ve aria-expanded, yan menüde ve kırıntı yolunda aria-label vardır — kaynak koda bakıp doğrulayabilirsin.

Klavye ve odak

Semantik ögelerin en somut kazancı klavyedir. Varsayılan olarak odaklanabilen ögeler: <a href>, <button>, <input>, <select>, <textarea>, <details>, <dialog>. <div> odaklanamaz.

Odak halkasını outline: none ile kaldırmak, klavye kullanıcısı için imleci silmek gibidir. Görsel olarak beğenmiyorsan değiştir, kaldırma:

/* Fare tıklamasında halka çıkmaz, klavyede çıkar */
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
}

Son olarak DOM sırası = okuma sırasıdır. CSS ile görsel sırayı değiştirmek (order, grid-area, flex-direction: row-reverse) klavye ve ekran okuyucu sırasını değiştirmez. Gözle soldan sağa okuduğun düzen, klavyede bambaşka bir sırayla gezilebilir — 9. ve 10. derslerde bu tuzağı tekrar göreceğiz.

07Semantiğin diğer karşılıkları

• SEO. Arama motorları ana içeriği menüden ayırt etmek için semantik yapıyı kullanır. <h1>, <title> ve <meta name="description"> sonuç sayfasında görünen şeyi belirler. Abartılmamalı: semantik doğru işaretlemenin yan faydasıdır, sıralama hilesi değildir.
• Yapılandırılmış veri. Arama sonuçlarında zengin görünüm (etkinlik tarihi, iş ilanı, SSS) için application/ld+json ile schema.org sözlüğü kullanılır. HTML semantiğinin üstüne eklenen ayrı bir katmandır.
• Okuma modu ve paylaşım. Tarayıcının okuma modu, "sonra oku" servisleri ve sosyal paylaşım önizlemeleri <article>, <main> ve Open Graph etiketlerine bakar.
• Testler. 15. hatta yazacağın testlerde getByRole("button", { name: "Gönder" }) gibi seçiciler, CSS sınıfına bağlı seçicilerden çok daha dayanıklıdır: sınıf adı değişince test kırılmaz, ama kullanıcının gördüğü şey değişince kırılır — ki istenen budur.
• Mevzuat. Kamu kurumlarının web siteleri için erişilebilirlik bir tercih değil yükümlülüktür; Avrupa'da EN 301 549, uluslararası ölçüt olarak WCAG 2.x AA. Bir sonraki derste bunun ayrıntısı var.

Ölçme ve araçların sınırı

Otomatik araçlar (Lighthouse, axe, WAVE) erişilebilirlik sorunlarının yalnız bir kısmını yakalar — kontrast, eksik alt, etiketsiz alan, bozuk hiyerarşi gibi makine tarafından ölçülebilen şeyleri. Yakalayamadıkları: alt metninin anlamlı olup olmadığı, odak sırasının mantıklı olup olmadığı, hata mesajının anlaşılır olup olmadığı, canlı bölgenin doğru zamanda duyurulup duyurulmadığı. Bu yüzden denetim üç ayaklıdır: otomatik araç + klavye turu + ekran okuyucuyla deneme.

Klavye turu 60 saniyelik bir testtir ve her özellik için yapılabilir: fareyi bırak, yalnız Tab / Shift+Tab / Enter / Boşluk / ok tuşları / Esc ile sayfayı baştan sona kullan. Odağın nerede olduğunu her an görebiliyor musun? Bir yere sıkışıyor musun? Görünmeyen bir ögeye odaklanıyor musun? Bu üç soru, otomatik araçların bulduğundan daha çok gerçek hata çıkarır.

08Mini alıştırma — Div çorbasını semantiğe çevir

09Kendini sına

Semantik HTML kullanmanın somut faydaları nelerdir? "Aynı görünüyor" itirazına ne cevap verirsin?

Görünüş, HTML'in tek tüketicisi olan tarayıcı ekranı içindir; semantik, sayfayı gözle görmeyen tüketiciler içindir. Somut kazançlar: (1) Ekran okuyucu yer imleri arasında atlar ("ana içeriğe git"), başlık listesi üretir, "düğme" ya da "bağlantı" olduğunu duyurur. (2) Klavye — <button> ve <a href> Tab sırasına kendiliğinden girer, Enter/Boşluk ile çalışır, odak halkası alır; <div onclick> bunların hiçbirini yapmaz ve aynı davranış için 15 satır ek kod ister. (3) Arama motoru ve okuma modu ana içeriği menüden ayırır. (4) Testler role/name üzerinden yazılır ve CSS sınıfı değişince kırılmaz. (5) Bakım — yapı, sınıf adları okunmadan anlaşılır. (6) Mevzuat — kamu projelerinde erişilebilirlik yükümlülüktür ve semantik onun temelidir. "Aynı görünüyor" itirazının cevabı tek cümledir: aynı görünüyor ama aynı çalışmıyor; farkı görmek için fareyi bırakıp sayfayı yalnız klavyeyle kullanmak yeterlidir.

<section> ile <div> arasındaki fark nedir? <article> ne zaman kullanılır?

<div>'in hiçbir anlamı yoktur ve bu bir kusur değildir: yalnız stil/yerleşim için kutu gerektiğinde doğru seçim odur. <section> ise tematik bir bölüm bildirir ve kuralı şudur: başlığı olmalıdır. Başlığı olmayan bir section, erişilebilirlik ağacında adsız bir bölge üretir ya da hiç yer imi sayılmaz — o durumda istediğin şey aslında div'dir. Ölçüt: "bu bloğun bir başlığı var ve içindekiler o başlık altında toplanıyor mu?" <article> için ölçüt farklıdır: bu içeriği kopyalayıp başka bir yere koysan tek başına anlamlı olur mu? Haber, blog yazısı, forum iletisi, ürün kartı, bir başvuru kaydı — evet. Bir sayfanın "Özellikler" bölümü — hayır, o section'dır. İç içe de olabilirler: bir article içinde yorumların her biri ayrı article olabilir. Son bir not: section'ı gereksiz kullanmak zararsız değildir; anlamsız bölge duyuruları gürültü üretir.

<div role="button" onclick> ile <button> arasında pratikte ne fark var?

<button> altı şeyi ücretsiz verir: (1) Tab sırasına girer; (2) Enter ve Boşluk ile tetiklenir (Boşluk'un sayfayı kaydırmasını da engeller); (3) erişilebilirlik ağacında "button" rolüyle görünür; (4) disabled özniteliğiyle hem görsel hem etkileşim hem erişilebilirlik durumunu birlikte yönetir; (5) form içinde type="submit" ile formu gönderir; (6) tarayıcının odak halkasını ve platformun dokunma davranışını alır. <div role="button"> ise yalnız rolü taklit eder — rol vermek davranış getirmez. Aynı sonucu elde etmek için tabindex="0", keydown dinleyicisi (Enter ve Boşluk, preventDefault ile), aria-disabled yönetimi, odak stili ve muhtemelen role'ün gerektirdiği başka durum öznitelikleri yazman gerekir. ARIA'nın birinci kuralı tam olarak bunu söyler: yerine geçen bir HTML ögesi varsa onu kullan. Meşru istisna: mevcut bir tasarım sisteminde iç içe geçmiş yapı yüzünden gerçekten button kullanılamıyorsa — ama o zaman da yukarıdaki listenin tamamı yazılmalıdır.

ARIA ne zaman kullanılır? "ARIA kullanmamak kötü ARIA'dan iyidir" ne demek?

ARIA, HTML'de karşılığı olmayan arayüz desenlerini erişilebilirlik ağacına anlatmak için vardır: sekme grupları, ağaç görünümü, birleşik kutu (combobox), kaydırıcı, canlı bölgeler. Ayrıca var olan ögelere ad ve durum eklemek için kullanılır: simge düğmesine aria-label, açılır menüye aria-expanded, aktif bağlantıya aria-current, bildirime role="status" + aria-live="polite". Kullanılmaması gereken yer, HTML'in zaten karşıladığı her durumdur. "ARIA kullanmamak kötü ARIA'dan iyidir" cümlesi şunu söyler: yanlış bir rol, hiç rol olmamasından daha zararlıdır. Bir <div>'e role="button" yazıp klavye desteği eklemezsen, ekran okuyucu kullanıcısına "burada bir düğme var" dersin ama kullanıcı onu çalıştıramaz — bu, hiç duyurmamaktan kötüdür. Aynı şekilde <h2 role="presentation"> başlığı hiyerarşiden silmiş olur. Beş kural: yerine geçen HTML varsa onu kullan; yerleşik semantiği bozma; ARIA bileşenlerini klavyeyle kullanılabilir yap; odaklanabilir ögeyi aria-hidden yapma; her etkileşimli ögeye erişilebilir bir ad ver.

10Sınav köşesi