Przejdź do treści
Mera News

Poradnik dla wydawców, rozdział 6

Dane dla czytników ekranu i maszyn

Ostatnia weryfikacja: listopad 2026

Czytnik ekranu, wyszukiwarka i czytnik kanałów zależą od tego, jak zbudowana jest Twoja strona. Czysty HTML, dane strukturalne i uporządkowany kanał dają każdemu z nich to, czego potrzebuje.

Zacznij od HTML

Te elementy nadają stronie punkty orientacyjne, dzięki czemu użytkownik czytnika ekranu może przejść prosto do artykułu.

<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>
  • Punkty orientacyjne: Używaj header, nav, main, aside i footer zgodnie z ich przeznaczeniem. Gdy strona ma więcej niż jeden nav, opisz każdy etykietą.
  • Link pomijający: Pozwala użytkownikom klawiatury ominąć powtarzającą się nawigację, co pomaga spełnić kryterium sukcesu WCAG 2.4.1. Spraw, by był widoczny po otrzymaniu fokusu.
  • Nagłówki: Używaj jednego h1 dla tytułu i zachowaj kolejność poziomów. h4 tuż po h2 to przykład pominięcia, którego należy unikać. Wybieraj nagłówek według jego miejsca w konspekcie, nigdy według rozmiaru.
  • Listy i tabele: Używaj prawdziwych elementów ul, ol i table, aby ich strukturę mogło odczytać oprogramowanie (kryterium sukcesu 1.3.1).

Język

Ustaw lang na elemencie html w każdej wersji językowej (kryterium sukcesu 3.1.1). Bez tego czytnik ekranu może czytać artykuł niewłaściwym głosem. Oznaczaj też fragmenty w innym języku (kryterium sukcesu 3.1.2).

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

Obrazy

  • Pisz tekst alt, który daje czytelnikowi to, co obraz wnosi do historii.
  • Używaj alt="" dla obrazów czysto dekoracyjnych. Nie pomijaj atrybutu, bo niektóre czytniki ekranu przeczytają nazwę pliku na głos.
  • Używaj teł CSS do czystej dekoracji tam, gdzie to możliwe.
  • Używaj figure i figcaption do podpisów i informacji o autorstwie zdjęć.

Na każdym ekranie

Wymagania WCAG 2.2 AA, które mają największe znaczenie dla szablonu serwisu informacyjnego:

WymaganieCelKryterium
Kontrast tekstu4,5:1, a dla dużego tekstu 3:11.4.3
Zmiana rozmiaru tekstuDo 200% bez utraty treści1.4.4
ZawijanieSzerokość 320 pikseli CSS bez przewijania w bok1.4.10
Widoczny fokusWidoczny wskaźnik fokusu klawiatury2.4.7
Fokus niezasłoniętyFokus nigdy nie jest całkowicie ukryty2.4.11
Rozmiar celuCo najmniej 24 na 24 piksele CSS2.5.8

Na telefonie testuj z VoiceOver lub TalkBack i z najwyższym ustawieniem rozmiaru tekstu. Na komputerze przejdź przez stronę, używając wyłącznie klawiszy Tab, Enter i Escape.

Opublikuj deklarację dostępności, która mówi, co spełniasz, czego jeszcze nie i jak zgłosić problem.

Europejski akt o dostępności

Dyrektywa (UE) 2019/882 dotyczy wymienionych usług świadczonych konsumentom po 28 czerwca 2025 roku. Na liście są usługi handlu elektronicznego, e-booki i usługi zapewniające dostęp do audiowizualnych usług medialnych. Usługi handlu elektronicznego są zdefiniowane jako usługi świadczone na odległość, za pośrednictwem stron internetowych i usług na urządzenia mobilne, na wniosek konsumenta, w celu zawarcia umowy. Mikroprzedsiębiorstwa świadczące usługi są wyłączone.

Akt nie wymienia serwisów informacyjnych jako takich. Serwis, który sprzedaje subskrypcje online albo e-booki lub dostęp do wideo, nadal może do niego należeć, a przepisy krajowe dodają szczegóły. Sprawdź swoją sytuację z prawnikiem.

Dane strukturalne dla artykułów

Znaczniki NewsArticle pomagają Google zrozumieć stronę. Przewodnik Google mówi, że nie ma wymaganych właściwości, więc dodaj te, które mają zastosowanie.

<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>
  • Używaj dat w formacie ISO 8601 ze strefą czasową.
  • Utrzymuj daty w znacznikach takie same jak daty na stronie i pokazuj je z etykietą, taką jak „Opublikowano” lub „Ostatnia aktualizacja”.
  • Dostarczaj obrazy w proporcjach 16x9, 4x3 i 1x1, każdy co najmniej 50 000 pikseli po pomnożeniu szerokości przez wysokość.
  • Używaj obrazów redakcyjnych, nigdy swojego logo.
  • Utrzymuj te same znaczniki na telefonie i komputerze.

Uporządkowany kanał RSS

Twój kanał to najprostsza maszynowo czytelna wersja Twojego serwisu i to Ty decydujesz dokładnie, co zawiera.

<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>
  • Każdy kanał wymaga title, link i description.
  • Nadaj każdemu elementowi stabilny guid i używaj stałego linku tam, gdzie to możliwe.
  • Zapisuj pubDate w formacie RFC 822 pokazanym tutaj.
  • Używaj kanonicznych adresów URL artykułów.
  • Utrzymuj krótki description i nie umieszczaj w nim płatnego tekstu.
  • Dodaj link wykrywania do head każdej strony.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Wysyłaj nagłówki ETag lub Last-Modified i odpowiadaj 304 Not Modified, gdy If-None-Match lub If-Modified-Since z czytnika kanałów pokazuje, że nic się nie zmieniło. Dzięki temu częste pobierania są tanie dla Twojego serwera.

Lista kontrolna

  • Dodaj lang do elementu html w każdej wersji językowej.
  • Dodaj link pomijający i jeden punkt orientacyjny main do każdego szablonu.
  • Opisz etykietą każdy nav i aside.
  • Uruchom kontrolę konspektu nagłówków na szablonie artykułu.
  • Sprawdź tekst alt w swoim CMS i uczyń go polem wymaganym dla obrazów redakcyjnych.
  • Sprawdź kontrast linków, podpisów i podpisów autorów.
  • Przetestuj z klawiaturą oraz z VoiceOver lub TalkBack.
  • Opublikuj deklarację dostępności z adresem kontaktowym.
  • Zapytaj prawnika, czy europejski akt o dostępności dotyczy Twoich usług.
  • Dodaj JSON-LD NewsArticle z datami zgodnymi ze stroną.
  • Zwaliduj swój kanał i upewnij się, że wysyła ETag lub Last-Modified.

Źródła