İçeriğe geç
Mera News

Yayıncı rehberi, bölüm 6

Ekran okuyucular ve makineler için veri

Son gözden geçirme: Kasım 2026

Bir ekran okuyucu, bir arama motoru ve bir besleme okuyucu, sitenizin nasıl yapılandırıldığına bağlıdır. Net HTML, yapılandırılmış veri ve temiz bir besleme, her birine ihtiyacı olanı verir.

HTML ile başlayın

Bu ögeler bir sayfaya yer işaretlerini verir; böylece bir ekran okuyucu kullanıcısı doğrudan makaleye atlayabilir.

<html lang="en">
<body>
  <a href="#main">Skip to the article</a>
  <header>
    <nav aria-label="Main">...</nav>
  </header>
  <main id="main">
    <article>
      <h1>Article headline</h1>
      <p>By <a href="/authors/jane-doe">Jane Doe</a></p>
      <p><time datetime="2026-11-05T08:00:00+01:00">Published 5 November 2026</time></p>
      <h2>First section</h2>
      <p>Article text.</p>
    </article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>
</html>
  • Yer işaretleri: header, nav, main, aside ve footer ögelerini amaçlandıkları gibi kullanın. Bir sayfada birden fazla nav varsa her birini etiketleyin.
  • Atlama bağlantısı: Klavye kullanıcılarının tekrarlanan gezinmeyi geçmesini sağlar ve WCAG başarı ölçütü 2.4.1'i karşılamaya yardımcı olur. Odaklandığında görünür yapın.
  • Başlıklar: Başlık için bir h1 kullanın ve sıraları düzenli tutun. Bir h2'nin hemen ardından gelen h4, kaçınılması gereken türden bir atlamadır. Bir başlığı boyutuna göre değil, ana hatlardaki yerine göre seçin.
  • Listeler ve tablolar: Gerçek ul, ol ve table ögeleri kullanın; böylece yapıları yazılım tarafından okunabilir (başarı ölçütü 1.3.1).

Dil

Her yerelde html ögesinde lang ayarlayın (başarı ölçütü 3.1.1). Onsuz bir ekran okuyucu makalenizi yanlış sesle okuyabilir. Başka dildeki bölümleri de işaretleyin (başarı ölçütü 3.1.2).

<p>The minister called it <span lang="fr">une erreur historique</span>.</p>

Görseller

  • Resmin habere kattığını okura veren alt metni yazın.
  • Tamamen süs amaçlı görseller için alt="" kullanın. Özniteliği hiç bırakmayın, çünkü bazı ekran okuyucular dosya adını yüksek sesle okur.
  • Mümkün olduğunda salt süsleme için CSS arka planlarını kullanın.
  • Fotoğraf alt yazıları ve kaynak bilgileri için figure ve figcaption kullanın.

Her ekranda

Bir haber şablonu için en önemli WCAG 2.2 AA gereklilikleri:

GereklilikHedefÖlçüt
Metin kontrastı4,5:1 veya büyük metin için 3:11.4.3
Metin yeniden boyutlandırmaHiçbir şey kaybolmadan %200'e kadar1.4.4
Yeniden akış320 CSS piksel genişlikte yana kaydırma olmadan1.4.10
Odak görünürGörünür bir klavye odak göstergesi2.4.7
Odak gizlenmezOdak hiçbir zaman tamamen gizlenmez2.4.11
Hedef boyutuEn az 24 x 24 CSS piksel2.5.8

Mobilde VoiceOver veya TalkBack ile ve en büyük metin ayarıyla test edin. Masaüstünde sayfayı yalnızca Tab, Enter ve Escape tuşlarıyla gezin.

Neleri karşıladığınızı, neleri henüz karşılamadığınızı ve bir sorunun nasıl bildirileceğini söyleyen bir erişilebilirlik beyanı yayımlayın.

Avrupa Erişilebilirlik Yasası

Directive (EU) 2019/882, 28 Haziran 2025'ten sonra tüketicilere sunulan listelenmiş hizmetler için geçerlidir. Liste e-ticaret hizmetlerini, e-kitapları ve görsel-işitsel medyaya erişim sağlayan hizmetleri içerir. E-ticaret hizmetleri, bir tüketicinin talebi üzerine sözleşme yapmak için web siteleri ve mobil cihaz tabanlı hizmetler aracılığıyla uzaktan sunulan hizmetler olarak tanımlanır. Hizmet sunan mikro işletmeler muaftır.

Yasa haber sitelerini bu şekilde listelemez. Çevrimiçi abonelik satan veya e-kitap ya da video erişimi satan bir site yine de kapsama girebilir ve ulusal yasalar ayrıntı ekler. Kendi durumunuzu hukuk danışmanınızla kontrol edin.

Makaleler için yapılandırılmış veri

NewsArticle işaretlemesi Google'ın sayfayı anlamasına yardımcı olur. Google'ın rehberi zorunlu özellik olmadığını söyler; bu yüzden geçerli olanları ekleyin.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2026-11-05T08:00:00+01:00",
  "dateModified": "2026-11-05T09:20:00+01:00",
  "author": [{
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane-doe"
  }]
}
</script>
  • Saat dilimli ISO 8601 tarihlerini kullanın.
  • İşaretlemedeki tarihleri sayfadaki tarihlerle aynı tutun ve onları “Yayımlandı” veya “Son güncelleme” gibi bir etiketle gösterin.
  • Görselleri 16x9, 4x3 ve 1x1 olarak, genişlik yükseklikle çarpıldığında her biri en az 50.000 piksel olacak şekilde sağlayın.
  • Editoryal görseller kullanın, asla logonuzu değil.
  • İşaretlemeyi mobil ve masaüstünde aynı tutun.

Temiz bir RSS beslemesi

Beslemeniz sitenizin en basit makine tarafından okunabilir sürümüdür ve neyi taşıdığına tam olarak siz karar verirsiniz.

<item>
  <title>Article headline</title>
  <link>https://example.com/news/article-headline</link>
  <guid isPermaLink="true">https://example.com/news/article-headline</guid>
  <pubDate>Thu, 05 Nov 2026 07:00:00 GMT</pubDate>
  <description>One or two sentences that describe the article.</description>
  <category>Politics</category>
</item>
  • Her kanal title, link ve description gerektirir.
  • Her öğeye kararlı bir guid verin ve mümkün olduğunda kalıcı bağlantıyı kullanın.
  • pubDate değerini burada gösterilen RFC 822 biçiminde yazın.
  • Kanonik makale URL'lerini kullanın.
  • description değerini kısa tutun ve ücretli metni dışarıda bırakın.
  • Her sayfanın head bölümüne bir keşif bağlantısı ekleyin.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

ETag veya Last-Modified üst bilgileri gönderin ve bir besleme okuyucunun If-None-Match veya If-Modified-Since değeri hiçbir şeyin değişmediğini gösterdiğinde 304 Not Modified ile yanıt verin. Bu, sık getirmeleri sunucunuz için ucuz tutar.

Kontrol listesi

  • Her yerelde html ögesine lang ekleyin.
  • Her şablona bir atlama bağlantısı ve tek bir main yer işareti ekleyin.
  • Her nav ve aside ögesini etiketleyin.
  • Makale şablonunuzda bir başlık ana hat kontrolü çalıştırın.
  • CMS'nizdeki alt metnini denetleyin ve editoryal görseller için zorunlu alan yapın.
  • Bağlantılarda, alt yazılarda ve imzalarda kontrastı kontrol edin.
  • Klavyeyle ve VoiceOver veya TalkBack ile test edin.
  • İletişim adresi olan bir erişilebilirlik beyanı yayımlayın.
  • Avrupa Erişilebilirlik Yasası'nın hizmetleriniz için geçerli olup olmadığını hukuk danışmanınıza sorun.
  • Sayfayla eşleşen tarihlerle NewsArticle JSON-LD ekleyin.
  • Beslemenizi doğrulayın ve ETag veya Last-Modified gönderdiğini onaylayın.

Kaynaklar