Kurumsal Web Sitelerinde Semantik HTML5 ve Erişilebilirlik (A11y)

Hızlı Özet (TL;DR)

Modern web geliştirmede sıkça yapılan en büyük mühendislik hatalarından biri, sayfadaki her görsel ve metinsel öğeyi anlamsız <div> ve <span> etiketleriyle sarmalamaktır (Div çorbası / Div soup). Görsel olarak CSS ile kusursuz görünen bir sayfa, kaputun altında anlamsız etiketlerden oluştuğunda hem arama motoru botları (Googlebot, Bingbot) hem de yardımcı teknolojiler (ekran okuyucular) için okunamaz bir metin yığınına dönüşür. <main>, <article>, <nav>, <section>, <header>, <aside> ve <footer> gibi Semantik HTML5 etiketlerinin WAI-ARIA standartlarıyla birlikte doğru kullanımı; arama motorlarının sayfa mimarisini ve içerik hiyerarşisini sıfır hatayla dizine eklemesini sağlarken, WCAG 2.1 / 2.2 AA düzeyinde kurumsal erişilebilirlik (Accessibility - A11y) uyumu kazandırır.

DOM Ağacı, Erişilebilirlik Ağacı (Accessibility Tree) ve Teknik SEO İlişkisi

Bir web tarayıcısı HTML dokümanını indirdiğinde yalnızca ekrana pikselleri çizen DOM (Document Object Model) ağacını oluşturmaz; aynı zamanda işletim sisteminin erişilebilirlik API’leri ve ekran okuyucular (NVDA, JAWS, VoiceOver) ile haberleşen paralel bir Erişilebilirlik Ağacı (Accessibility Tree) inşa eder. Bu ağaçtaki her düğüm dört temel bilgi taşır: Rol (Role), İsim (Name), Durum (State) ve Değer (Value).

Aynı mantık Google ve yapay zeka tabanlı arama motoru tarayıcıları için de geçerlidir. Googlebot bir kurumsal sayfayı tararken, sayfanın üst menüsündeki standart linkler ile alt bilgideki (footer) telif hakkı metinlerini sayfanın asıl değer üreten çekirdek içeriğinden ayırmak ister. Sayfa mimarisi semantik dönüm noktalarıyla (Landmarks) yapılandırıldığında:

• Arama motoru botu <main> etiketi içindeki metinlere en yüksek anlamsal ağırlığı (SEO ağırlığı) verir.
• <article> içindeki başlık, yayın tarihi (<time datetime="...">) ve yazar bilgisi doğrudan Google Keşfet (Discover) ve zengin sonuç (Rich Snippets) algoritmalarıyla eşleşir.
• <nav> ve <aside> içindeki tekrarlayan bağlantılar “yardımcı gezinme” olarak sınıflandırılarak anahtar kelime yamyamlığı (keyword dilution) önlenir.

Semantik HTML5 vs Anlamsız Div Mimarisi

Kurumsal web projelerinde sayfa iskeletini oluştururken kaçınılması gereken eski alışkanlıklar ve bunların yerine kullanılması gereken modern semantik karşılıkları aşağıdaki tabloda özetlenmiştir:

Kullanım Alanı	Anlamsız Eski Kodlama (Div Soup)	Doğru Semantik HTML5 Karşılığı	Teknik SEO ve Erişilebilirlik (A11y) Etkisi
Site Navigasyonu	<div class="menu">	<nav aria-label="Ana Menü">	Botlar ve ekran okuyucular birincil gezinme menüsünü anında tespit eder
Ana İçerik Alanı	<div id="icerik">	<main id="anaIcerik">	Sayfanın benzersiz çekirdek içeriği doğrudan hedeflenir; “İçeriğe Atla” bağlantısı buraya bağlanır
Bağımsız Makale	<div class="post">	<article>	İçeriğin tek başına anlamlı, paylaşılabilir bir doküman olduğu bildirilir
Mantıksal Bölüm	<div class="bolum">	<section aria-labelledby="baslik-1">	Doküman anahatlarında (Document Outline) tematik bir grup oluşturur
Yan Bilgi / Kutu	<div class="sidebar">	<aside>	İkincil veya tamamlayıcı içeriğin ana metin akışından ayrılması sağlanır
Sayfa / Bölüm Üstü	<div class="header">	<header>	Sayfanın veya makalenin giriş ve başlık kümesi (banner rolü) tanımlanır
Görsel ve Açıklama	<div class="resim"><img...><p>...</p></div>	<figure><img...><figcaption>...</figcaption></figure>	Görsel ile altındaki teknik açıklamanın birbirine bağlı olduğu tescillenir
Etkileşimli Tetikleyici	<div class="btn" onclick="...">	<button type="button">	Doğal Tab odaklanması, Enter/Space tuş desteği ve button rolü kazanılır

Doğal Semantik Elemanların Gücü: Neden <div onclick> Kullanılmamalıdır?

Özel yazılım veya kurumsal arayüz geliştirirken bir <div> veya <span> etiketine JavaScript ile tıklama olayı (addEventListener('click', ...)) eklemek, klavye kullanıcıları ve motor beceri kısıtı olan ziyaretçiler için o bileşeni tamamen erişilemez kılar. Bir <div class="buton"> öğesini gerçek bir <button> gibi çalıştırmak için geliştiricinin manuel olarak tabindex="0", role="button" ve keydown (hem Enter hem Space tuşları için) dinleyicileri yazması gerekir. Oysa yerel <button> etiketi tüm bu davranışları sıfır JavaScript maliyetiyle tarayıcı çekirdeğinde barındırır.

Benzer şekilde, kullanıcıyı başka bir URL adresine yönlendiren işlemler daima <a href="..."> etiketiyle; sayfa içinde bir modal açan, form gönderen veya filtreleme yapan işlemler ise <button> etiketiyle kurgulanmalıdır.

ARIA (Accessible Rich Internet Applications) İlkeleri ve Altın Kurallar

W3C tarafından geliştirilen WAI-ARIA spesifikasyonunun birinci altın kuralı şudur: “İhtiyacınızı karşılayan yerel (native) bir HTML5 etiketi varsa, asla ARIA kullanmayın.” Ancak modern kurumsal web sitelerinde yer alan sekmeli paneller (Tabs), açılır akordeonlar (Accordions), canlı arama kutuları ve modal pencereler gibi karmaşık bileşenlerin durumlarını ifade etmek için HTML etiketleri tek başına yeterli olmaz. Bu noktada ARIA durum ve özellik nitelikleri devreye girer:

<!-- Erişilebilir ve Semantik Açılır Akordeon Bileşeni -->
<div class="akordeon-grubu">
  <h3>
    <button
      type="button"
      aria-expanded="false"
      aria-controls="sss-cevap-1"
      id="sss-soru-1"
      class="akordeon-tetikleyici"
    >
      Kurumsal Web Tasarımında Süreç Nasıl İşler?
    </button>
  </h3>
  <div
    id="sss-cevap-1"
    role="region"
    aria-labelledby="sss-soru-1"
    hidden
  >
    <p>Proje keşfi, bilgi mimarisi, tel kafes (wireframe), Astro SSG kodlama ve kalite denetimi aşamaları uygulanır.</p>
  </div>
</div>

Bu mimaride kullanıcı butona tıkladığında JavaScript yalnızca aria-expanded değerini "true" yapar ve hidden özniteliğini kaldırır. Ekran okuyucu kullanıcıya anında “Kurumsal Web Tasarımında Süreç Nasıl İşler, düğme, daraltılmış / genişletilmiş” bilgisini seslendirir.

Dinamik Bildirimler İçin aria-live Bölgeleri

Sayfa yenilenmeden gerçekleşen işlemlerde (örneğin bir iletişim formunun gönderilmesi veya ürün filtresinin sonuç sayısını güncellemesi) ekranı gören kullanıcılar görsel uyarıyı fark ederken, ekran okuyucu kullanıcıları bu değişimden haberdar olamaz.

• aria-live="polite": Kullanıcının o anki okuma işlemi bittiğinde yeni durumu nazikçe duyurur (Örn: “Filtreleme tamamlandı, 12 çözüm listelendi”).
• aria-live="assertive" veya role="alert": Kritik form hatalarında veya bağlantı kopmalarında mevcut okumayı keserek hatayı anında bildirir (Örn: “Lütfen geçerli bir kurumsal e-posta adresi giriniz”).

Başlık Hiyerarşisi (<h1> - <h6>) ve Klavye Navigasyonu

Arama motoru algoritmaları ve yardımcı teknolojiler, sayfanın içindekiler tablosunu çıkarmak için başlık etiketlerini (<h1> - <h6>) kullanır. Ekran okuyucu kullanan bir ziyaretçi, klavyesindeki H tuşuna basarak sayfadaki başlıklar arasında hızlıca geçiş yapar:

1. Tekil <h1> İlkesi: Her HTML sayfasında kesinlikle tek bir <h1> bulunmalı ve bu başlık sayfanın ana konusunu ve birincil arama niyetini net biçimde yansıtmalıdır.
2. Başlık Atlamama Kuralı: <h1>’den doğrudan <h3> veya <h4>’e geçilmemeli; hiyerarşi mutlaka <h2> (ana bölümler) ve <h3> (alt başlıklar) üzerinden mantıksal bir ağaç gibi ilerlemelidir.
3. Stil İçin Başlık Kullanmama: Bir metnin sadece yazı boyutunu büyütmek veya kalınlaştırmak için başlık etiketi kullanılmamalı; tipografik görünüm daima harici CSS sınıflarıyla yönetilmelidir.

Klavye Odak Yönetimi (:focus-visible) ve “İçeriğe Atla” Bağlantısı

Sadece klavye (Tab, Shift + Tab, Enter, Escape ve yön tuşları) kullanarak bir web sitesindeki tüm menülere, formlara ve butonlara ulaşılabilmelidir:

• Odak Halkasını Silmeyin: CSS dosyalarında *:focus { outline: none; } yazmak en ağır erişilebilirlik ihlallerinden biridir. Bunun yerine yalnızca klavye ile gezinirken belirginleşen modern :focus-visible seçicisiyle yüksek kontrastlı bir odak çerçevesi tasarlanmalıdır.
• Skip-to-Content (Ana İçeriğe Atla): Sayfanın en başında bulunan ve Tab tuşuna ilk basıldığında görünür hale gelen <a href="#anaIcerik" class="icerige-atla">Ana İçeriğe Atla</a> bağlantısı, kullanıcının her sayfada 30 adet üst menü linkini tek tek geçmek zorunda kalmadan doğrudan <main id="anaIcerik"> alanına inmesini sağlar.

WCAG 2.1 / 2.2 AA Standartları: Kontrast, Formlar ve Görseller

Küresel erişilebilirlik standardı olan WCAG (Web Content Accessibility Guidelines) Düzey AA uyumluluğu, hem Avrupa Erişilebilirlik Yasası (EAA) hem de kamu/kurumsal kalite standartları için temel referanstır:

• Renk Kontrast Oranları: Normal boyutlu gövde metinlerinde metin rengi ile arka plan rengi arasındaki kontrast oranı en az 4.5:1, büyük başlıklarda (18pt+ veya 14pt kalın) ve kullanıcı arayüzü bileşenlerinde en az 3:1 olmalıdır. Açık gri zemin üzerine soluk gri metin yazmak okunabilirliği yok eder.
• Form Etiketleme (<label>): placeholder özniteliği asla <label> yerine kullanılmamalıdır; çünkü kullanıcı yazmaya başladığı anda placeholder kaybolur. Her <input>, <select> ve <textarea> öğesi for ve id eşleşmesiyle görünür bir <label> etiketine bağlanmalı, hatalı girişlerde aria-invalid="true" ve aria-describedby ile hata mesajı ilişkilendirilmelidir.
• Anlamlı vs Dekoratif Görseller: İçeriğe bilgi katan şema, ürün ve ekran görüntülerinde açıklayıcı alt="..." metni zorunludur. Ancak sadece görsel süsleme amaçlı kullanılan arka plan şekilleri ve ikonlarda alt="" (boş alt metni) veya aria-hidden="true" kullanılarak ekran okuyucunun gereksiz dosya adlarını okuması engellenmelidir.

Semantik HTML5 mimarisiyle kodlanan, erişilebilir ve arama motorlarının tam puan verdiği kurumsal web siteleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı ziyaret edebilir, özel web tabanlı iş uygulamaları için Özel Yazılım Geliştirme ve Özel ERP ve İmalat Çözümleri hizmetlerimizi inceleyebilirsiniz.

Sıkça Sorulan Sorular

Semantik HTML5 kullanımı Google SEO sıralamalarını doğrudan etkiler mi?

Evet. Google arama motoru örümceği (Googlebot), sayfa kaynağını ayrıştırırken (parsing) semantik etiketleri kullanarak sayfanın ana içeriğini (<main>, <article>) şablon gürültüsünden (<nav>, <aside>, <footer>) ayırır. Ayrıca doğru <h1>-<h2>-<h3> hiyerarşisi ve semantik tablolar (<table>, <thead>, <th>), sayfanızın Google arama sonuçlarında “Öne Çıkan Snippet” (Featured Snippet) ve yapay zeka özetlerinde kaynak olarak seçilme olasılığını doğrudan artırır.

Erişilebilirlik (A11y) uyumu görsel tasarımı kısıtlar mı veya çirkinleştirir mi?

Kesinlikle hayır. Erişilebilirlik bir görsel kısıtlama değil, iyi tasarım ve temiz mühendislik disiplinidir. Yeterli renk kontrastı güneş ışığı altında mobil ekranına bakan tüm kullanıcıların metni rahat okumasını sağlar; büyük dokunmatik hedefler (minimum 44x44 piksel) ve net odak durumları ise tüm ziyaretçilerin form dönüşüm oranlarını yükseltir.

Bir web sitesinin erişilebilirlik (WCAG) skoru nasıl test edilir?

İlk aşamada Google Chrome DevTools içerisindeki Lighthouse erişilebilirlik denetimi ve axe DevTools eklentisi ile otomatik kod taraması yapılmalıdır. Ancak otomatik araçlar erişilebilirlik sorunlarının yalnızca %40-50’sini yakalayabilir. Bu nedenle fareyi tamamen bırakıp yalnızca klavyedeki Tab, Enter, Space ve Escape tuşlarıyla sitedeki tüm menü ve formların gezilmesi (Klavye Testi) ve NVDA/VoiceOver gibi bir ekran okuyucu ile sayfa akışının dinlenmesi şarttır.