Data untuk pembaca layar dan mesin

Terakhir ditinjau November 2026

Pembaca layar, mesin pencari, dan pembaca feed semuanya bergantung pada cara situs Anda disusun. HTML yang jelas, data terstruktur, dan feed yang bersih memberi masing-masing apa yang dibutuhkannya.

Mulai dari HTML

Elemen-elemen ini memberi halaman landmark-nya, sehingga pengguna pembaca layar bisa langsung melompat ke artikel.

<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>

• Landmark: Gunakan header, nav, main, aside, dan footer sesuai peruntukannya. Jika sebuah halaman punya lebih dari satu nav, beri label pada masing-masing.
• Tautan lewati: Memungkinkan pengguna keyboard melewati navigasi yang berulang, yang membantu memenuhi kriteria keberhasilan WCAG 2.4.1. Buat terlihat saat difokuskan.
• Judul bagian: Gunakan satu h1 untuk judul, dan jaga urutan tingkatnya. h4 tepat setelah h2 adalah contoh lompatan yang perlu dihindari. Pilih tingkat judul berdasarkan tempatnya dalam kerangka, bukan ukurannya.
• Daftar dan tabel: Gunakan elemen ul, ol, dan table yang sungguhan, agar strukturnya bisa dibaca perangkat lunak (kriteria keberhasilan 1.3.1).

Bahasa

Atur lang pada elemen html di setiap lokal (kriteria keberhasilan 3.1.1). Tanpanya, pembaca layar mungkin membacakan artikel Anda dengan suara yang salah. Tandai juga kutipan dalam bahasa lain (kriteria keberhasilan 3.1.2).

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

Gambar

• Tulis teks alt yang memberi pembaca apa yang ditambahkan gambar itu pada berita.
• Gunakan alt="" untuk gambar yang murni dekoratif. Jangan menghilangkan atributnya, karena sebagian pembaca layar akan membacakan nama file.
• Gunakan latar belakang CSS untuk dekorasi murni jika bisa.
• Gunakan figure dan figcaption untuk keterangan dan kredit foto.

Di setiap layar

Persyaratan WCAG 2.2 AA yang paling penting untuk templat berita:

Di ponsel, uji dengan VoiceOver atau TalkBack, dan dengan pengaturan teks terbesar. Di desktop, telusuri halaman hanya dengan tombol Tab, Enter, dan Escape.

Terbitkan pernyataan aksesibilitas yang menyebut apa yang sudah Anda penuhi, apa yang belum, dan cara melaporkan masalah.

European Accessibility Act

Direktif (EU) 2019/882 berlaku untuk layanan yang tercantum yang diberikan kepada konsumen setelah 28 Juni 2025. Daftarnya mencakup layanan e-commerce, e-book, dan layanan yang menyediakan akses ke media audiovisual. Layanan e-commerce didefinisikan sebagai layanan yang diberikan dari jarak jauh, melalui situs web dan layanan berbasis perangkat seluler, atas permintaan konsumen untuk membuat kontrak. Usaha mikro yang memberikan layanan dikecualikan.

Undang-undang ini tidak mencantumkan situs berita sebagai tersendiri. Situs yang menjual langganan secara daring, atau menjual e-book atau akses video, tetap bisa termasuk di dalamnya, dan undang-undang nasional menambahkan rincian. Periksakan posisi Anda kepada penasihat hukum.

Data terstruktur untuk artikel

Markup NewsArticle membantu Google memahami halaman. Panduan Google menyatakan tidak ada properti yang wajib, jadi tambahkan yang berlaku.

<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>

• Gunakan tanggal ISO 8601 dengan zona waktu.
• Samakan tanggal di markup dengan tanggal di halaman, dan tampilkan dengan label seperti "Diterbitkan" atau "Terakhir diperbarui".
• Sediakan gambar dalam 16x9, 4x3, dan 1x1, masing-masing minimal 50,000 piksel jika lebar dikalikan tinggi.
• Gunakan gambar editorial, bukan logo Anda.
• Jaga markup tetap sama di ponsel dan desktop.

RSS feed yang bersih

Feed Anda adalah versi situs Anda yang paling sederhana dan bisa dibaca mesin, dan Anda yang menentukan persis apa yang dimuatnya.

<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>

• Setiap channel memerlukan title, link, dan description.
• Beri setiap item guid yang stabil, dan pakai permalink jika bisa.
• Tulis pubDate dalam format RFC 822 seperti yang ditunjukkan di sini.
• Gunakan URL artikel kanonis.
• Jaga description tetap singkat, dan jangan sertakan teks berbayar.
• Tambahkan tautan penemuan ke head setiap halaman.

<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Kirim header ETag atau Last-Modified, dan balas 304 Not Modified ketika If-None-Match atau If-Modified-Since dari pembaca feed menunjukkan tidak ada yang berubah. Ini menjaga pengambilan yang sering tetap murah bagi server Anda.

Daftar periksa

• Tambahkan lang ke elemen html di setiap lokal.
• Tambahkan tautan lewati dan satu landmark main ke setiap templat.
• Beri label pada setiap nav dan aside.
• Jalankan pemeriksaan kerangka judul pada templat artikel Anda.
• Audit teks alt di CMS Anda, dan jadikan kolom wajib untuk gambar editorial.
• Periksa kontras pada tautan, keterangan, dan nama penulis.
• Uji dengan keyboard, dan dengan VoiceOver atau TalkBack.
• Terbitkan pernyataan aksesibilitas dengan alamat kontak.
• Tanyakan kepada penasihat hukum apakah European Accessibility Act berlaku untuk layanan Anda.
• Tambahkan JSON-LD NewsArticle dengan tanggal yang sama dengan halaman.
• Validasi feed Anda, dan pastikan feed mengirim ETag atau Last-Modified.

Sumber

• Page Regions, W3C WAI
• Headings, W3C WAI
• Decorative Images, W3C WAI
• F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute, W3C WAI
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C
• Directive (EU) 2019/882 on the accessibility requirements for products and services, Official Journal of the EU, Publications Office
• Learn About Article Schema Markup, Google Search Central
• Add a Byline Date to Google Search Results, Google Search Central
• RSS 2.0 specification, RSS Advisory Board
• RSS autodiscovery, RSS Advisory Board
• RFC 9110: HTTP Semantics, IETF