Перейти до вмісту
Mera News

Посібник для видавців, розділ 6

Дані для скрінрідерів і машин

Остання перевірка: листопад 2026 року

Скрінрідер, пошукова система та читалка стрічок залежать від того, як побудовано ваш сайт. Чіткий HTML, структуровані дані й чистий канал дають кожному з них потрібне.

Почніть із HTML

Ці елементи дають сторінці орієнтири, щоб користувач скрінрідера міг одразу перейти до статті.

<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>
  • Орієнтири: Використовуйте header, nav, main, aside і footer за призначенням. Коли на сторінці більше одного nav, позначайте кожен міткою.
  • Посилання пропуску: Воно дає користувачам клавіатури змогу минути повторювану навігацію, що допомагає виконати критерій успіху WCAG 2.4.1. Робіть його видимим у фокусі.
  • Заголовки: Використовуйте один h1 для заголовка й тримайте рівні по порядку. h4 одразу після h2 є тим пропуском, якого слід уникати. Обирайте заголовок за місцем у структурі, а не за розміром.
  • Списки й таблиці: Використовуйте справжні елементи ul, ol і table, щоб програмне забезпечення могло прочитати їхню структуру (критерій успіху 1.3.1).

Мова

Задавайте lang в елементі html для кожної локалі (критерій успіху 3.1.1). Без нього скрінрідер може читати вашу статтю не тим голосом. Позначайте й уривки іншою мовою (критерій успіху 3.1.2).

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

Зображення

  • Пишіть текст alt, що дає читачеві те, що картинка додає до історії.
  • Використовуйте alt="" для суто декоративних зображень. Не пропускайте цей атрибут, бо деякі скрінрідери читатимуть уголос назву файла.
  • Де можете, використовуйте для суто декоративних елементів CSS-тло.
  • Використовуйте figure і figcaption для підписів і джерел фотографій.

На кожному екрані

Вимоги WCAG 2.2 AA, що найважливіші для шаблону новин:

ВимогаМетаКритерій
Контрастність тексту4,5:1, або 3:1 для великого тексту1.4.3
Зміна розміру текстуДо 200% без втрат1.4.4
Перебудова макетаШирина 320 CSS-пікселів без бічної прокрутки1.4.10
Видимий фокусВидимий індикатор фокуса клавіатури2.4.7
Фокус не закритийФокус ніколи не ховається повністю2.4.11
Розмір ціліЩонайменше 24 на 24 CSS-пікселі2.5.8

На мобільних перевіряйте за допомогою VoiceOver або TalkBack і з найбільшим розміром тексту. На комп'ютерах пройдіть сторінку, користуючись лише клавішами Tab, Enter та Escape.

Опублікуйте заяву про доступність, що каже, що ви виконуєте, чого ще ні і як повідомити про проблему.

Європейський акт про доступність

Директива (ЄС) 2019/882 застосовується до перелічених послуг, наданих споживачам після 28 червня 2025 року. До переліку входять послуги електронної комерції, електронні книги й послуги, що надають доступ до аудіовізуальних медіа. Послуги електронної комерції визначено як послуги, що надаються дистанційно, через вебсайти та послуги на мобільних пристроях, на запит споживача для укладення договору. Мікропідприємства, що надають послуги, звільнені.

Акт не називає новинні сайти як такі. Сайт, що продає підписки онлайн або продає електронні книги чи доступ до відео, усе ж може підпадати під нього, а національні закони додають подробиць. Перевірте своє становище з юристом.

Структуровані дані для статей

Розмітка NewsArticle допомагає Google зрозуміти сторінку. Посібник Google каже, що обов'язкових властивостей немає, тож додавайте ті, що застосовні.

<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>
  • Використовуйте дати ISO 8601 з часовим поясом.
  • Тримайте дати в розмітці такими самими, як дати на сторінці, і показуйте їх із підписом, як-от «Опубліковано» чи «Востаннє оновлено».
  • Надайте зображення у співвідношеннях 16x9, 4x3 і 1x1, кожне щонайменше 50 000 пікселів, якщо помножити ширину на висоту.
  • Використовуйте редакційні зображення, ніколи свій логотип.
  • Тримайте розмітку однаковою на мобільних і комп'ютерах.

Чистий RSS-канал

Ваш канал є найпростішою машинночитною версією вашого сайту, і ви самі визначаєте, що саме він містить.

<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>
  • Кожному каналу потрібні title, link і description.
  • Давайте кожному елементу стабільний guid і використовуйте постійне посилання, де можете.
  • Записуйте pubDate у форматі RFC 822, як показано тут.
  • Використовуйте канонічні URL-адреси статей.
  • Тримайте description коротким і не додавайте платний текст.
  • Додайте посилання для виявлення в head кожної сторінки.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Надсилайте заголовки ETag або Last-Modified і відповідайте 304 Not Modified, коли If-None-Match або If-Modified-Since від читалки стрічок показує, що нічого не змінилося. Так часті запити лишаються дешевими для вашого сервера.

Контрольний список

  • Додайте lang до елемента html для кожної локалі.
  • Додайте посилання пропуску й один орієнтир main до кожного шаблону.
  • Позначте міткою кожен nav і aside.
  • Перевірте структуру заголовків у шаблоні статті.
  • Перегляньте тексти alt у вашій CMS і зробіть це поле обов'язковим для редакційних зображень.
  • Перевірте контрастність посилань, підписів і підписів авторів.
  • Протестуйте з клавіатури та за допомогою VoiceOver або TalkBack.
  • Опублікуйте заяву про доступність із контактною адресою.
  • Запитайте юриста, чи застосовується до ваших послуг Європейський акт про доступність.
  • Додайте JSON-LD NewsArticle з датами, що збігаються зі сторінкою.
  • Перевірте свій канал і переконайтеся, що він надсилає ETag або Last-Modified.

Джерела