Bu kural ne anlama geliyor

Başarı Ölçütü 1.3.1, görsel biçimlendirme yoluyla aktarılan tüm bilgi, yapı ve ilişkilerin yardımcı teknolojiler tarafından da erişilebilir olmasını gerektirir. Gören kullanıcılar bir başlığı büyük ve kalın yazıldığı için başlık olarak algıladığında, ekran okuyucu kullanıcıları da aynı yapısal bilgiyi doğru HTML semantiği aracılığıyla almalıdır. Bu kural başlıklar, listeler, tablolar, form etiketleri, belirgin bölgeler ve görsel sunum ile aktarılan tüm gruplamalar için geçerlidir.

Temel ilke son derece basittir: yapı görünüyorsa, kodlanmalıdır. Satır ve sütun başlıklarına sahip bir veri tablosu, yardımcı teknolojilerin hücre ilişkilerini duyurabilmesi için <th> öğeleri kullanmalıdır. Bir gezinme alanı, kullanıcıların doğrudan atlayabilmesi için <nav> belirgin bölgesi kullanmalıdır. Kırmızı yıldız ile gösterilen zorunlu bir form alanının zorunluluk durumu programatik olarak sunulmalıdır.

Neden önemlidir

Bu ölçüt, neredeyse tüm WCAG gereksinimleri arasında en geniş etkiye sahip olandır. Ekran okuyucu kullanıcıları sayfa düzenini anlamak için tamamen programatik yapıya bağlıdır. Doğru semantik olmadan karmaşık bir veri tablosu anlaşılmaz bir metin akışına, bir form tahmin oyununa ve sayfa gezintisi imkansız bir göreve dönüşür. Sesli kontrol kullanıcıları da "gönder düğmesine tıkla" veya "gezintiye git" gibi komutlar verebilmek için etiketlenmiş öğelere ihtiyaç duyar.

Yardımcı teknolojilerin ötesinde, doğru semantik yapı SEO performansını artırır, tarayıcıların varsayılan stillemesini iyileştirir ve kod tabanlarını daha sürdürülebilir kılar. Semantik HTML, erişilebilir web geliştirmenin temel taşıdır.

İlgili axe-core kuralları

td-headers-attr — Veri tablosundaki her hücrenin headers niteliğinin geçerli <th> öğelerine başvurduğunu doğrular.
th-has-data-cells — <th> öğelerinin gerçekten veri hücreleriyle ilişkili olduğundan emin olur.
scope-attr-valid — <th> öğelerindeki scope niteliğinin yalnızca geçerli değerler kullandığını kontrol eder.
p-as-heading — <h1>–<h6> yerine başlık gibi stillendirilmiş paragrafları tespit eder.
list / listitem — <li> öğelerinin <ul> veya <ol> içinde yer aldığını doğrular.
heading-order — Başlık düzeylerinin atlanmadığından emin olur.
label — Her form girdisinin programatik olarak ilişkilendirilmiş bir etikete sahip olduğunu doğrular.
landmark-one-main — Sayfanın tam olarak bir <main> belirgin bölgesine sahip olduğundan emin olur.
region — Tüm sayfa içeriğinin bir belirgin bölge içinde yer aldığını kontrol eder.

Nasıl test edilir

axe DevTools veya WAVE gibi bir tarayıcı eklentisi kullanarak yapısal ihlalleri tarayın.
Sayfayı bir ekran okuyucu (VoiceOver, NVDA, JAWS) ile gezinerek başlıkların, listelerin, tabloların ve form alanlarının doğru rollerle duyurulduğunu doğrulayın.
CSS'i devre dışı bırakın ve sayfanın aynı bilgi hiyerarşisini hâlâ aktardığını kontrol edin.
DOM'u inceleyerek görsel gruplandırmaların semantik öğelere (<nav>, <aside>, <section>, <fieldset> vb.) karşılık geldiğini doğrulayın.
Her veri tablosunun uygun <th> öğelerine ve scope niteliklerine sahip olduğunu, karmaşık tabloların headers/id ilişkilendirmesi kullandığını doğrulayın.

Nasıl düzeltilir

Mantıksal bir belge taslağı oluşturmak için doğru başlık öğelerini kullanın:

<h1>Sayfa Başlığı</h1>
<h2>Bölüm Başlığı</h2>
<h3>Alt Bölüm Başlığı</h3>
<p>Alt bölüm içeriği.</p>
<h2>Başka Bir Bölüm</h2>

Veri tablolarını başlık hücreleri ve scope ile işaretleyin:

<table>
  <caption>Bölgelere Göre Üç Aylık Satışlar</caption>
  <thead>
    <tr>
      <th scope="col">Bölge</th>
      <th scope="col">Ç1</th>
      <th scope="col">Ç2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Kuzey</th>
      <td>1,2M ₺</td>
      <td>1,5M ₺</td>
    </tr>
  </tbody>
</table>

Form etiketlerini girdileriyle ilişkilendirin:

<label for="email">E-posta adresi</label>
<input type="email" id="email" name="email" required
       aria-describedby="email-hint">
<p id="email-hint">E-postanızı asla paylaşmayız.</p>

Sayfayı yapılandırmak için belirgin bölgeler kullanın:

<header role="banner">
  <nav aria-label="Ana gezinti">...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer role="contentinfo">...</footer>

Sık yapılan hatalar

<h1>–<h6> yerine başlık olarak stillendirilmiş <div> veya <span> öğeleri kullanmak.
Veri tablolarını CSS Grid veya Flexbox ile iç içe <div> öğelerinden oluşturarak tablo semantiğini tamamen yok etmek.
Form girdileri için <label> öğelerini atlayıp yalnızca yer tutucu metne güvenmek.
Tek bir sayfada birden fazla <main> belirgin bölgesi kullanmak veya banner öğelerini başka bölgelerin içine yerleştirmek.
Başlık düzeylerini atlamak (örneğin <h1>'den <h4>'e geçmek) ve belge taslağını bozmak.
Görsel liste oluşturmak için <ul>/<ol> ve <li> yerine <br> etiketleri kullanmak.

1.3.1 Bilgi ve İlişkiler