Перейти к содержимому
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:11.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.

Источники