Как правильно аннотировать содержание предварительного просмотра статьи / блога для обеспечения доступности и SEO? - PullRequest
Новая
       22

Как правильно аннотировать содержание предварительного просмотра статьи / блога для обеспечения доступности и SEO?

3 голосов
/ 30 марта 2019

Довольно часто требуется предварительный просмотр статей и постов в блогах, и вы видите это в нескольких местах, включая новостные сайты, сайты личных блогов и тому подобное. Есть несколько вещей, которые вы можете отобразить в рамках этого предварительного просмотра:

  • Название статьи
  • Дата публикации
  • Сколько времени может потребоваться, чтобы прочитать
  • Различные категориальные теги
  • Краткое содержание статьи
  • Короткий предварительный просмотр фрагмента с начала поста

Первые четыре довольно очевидно о том, как вы должны их комментировать:

  • Для заголовков статей и блогов следует использовать <h1> - <h6>, если это вообще возможно / практично, а если нет, они должны быть помечены ARIA role="heading". Программы чтения с экрана и поисковые системы понимают, как интерпретировать оба варианта.
  • Дата, в которой оно было опубликовано, должно использовать <time>, где это возможно, помеченное datetime, установленным в качестве даты как для программ чтения с экрана справки (например, JAWS ), так и для сканеров поисковых систем.
  • Оценка времени чтения также должна использовать <time>, но с datetime, установленным на чистую продолжительность. Это позволяет поисковым системам читать его намного проще.
  • Списки тегов должны просто использовать неупорядоченный список ссылок, чтобы помочь читателям экрана правильно перемещаться по нему. Поисковые системы обычно распознают их другими способами, поэтому формат в основном предназначен для доступности.

Но последние два не так очевидны. Я знаю, что к ним, вероятно, следует относиться аналогично, но я не могу найти никаких рекомендаций нигде. Моя первая реакция заключается в том, чтобы заключить их в <p> с, но это кажется ужасно неправильным, поскольку они имеют довольно распространенное семантическое значение, а не просто блок текста.

Как правильно аннотировать резюме и превью статей и постов в блогах специально для доступности и SEO? (Я конкретно не , включая такие вещи, как Microdata и JSON-LD, просто базовые HTML + ARIA.)

1 Ответ

2 голосов
/ 30 марта 2019

Вы, кажется, хорошо разбираетесь в семантическом html и в том, как это помогает пользователям программы чтения с экрана. Заголовки статей - отличное начало. Использование семантического тега <article> также хорошо, хотя поддержка перехода непосредственно к тегу

поддерживается только в некоторых программах чтения с экрана (JAWS и VoiceOver, но не NVDA).

Если у вас есть фрагмент статьи, который заканчивается эллипсами и ссылкой типа «читать дальше», убедитесь, что в разделе «читать дальше» содержится дополнительная контекстная информация, например: 

<article>
  <h2 id="articleHeading1">Are flying cars a reality?</h2>
  <p>Flying cars are common in science fiction movies, but do we have the technology to build them today. In an
    interview with Dr Foobar...<a href="#" id="readMore1" aria-labelledby="readMore1 articleHeading1">read more</a>
  </p>
  <ul aria-label="tags">
    <li>science fiction</li>
    <li>cars</li>
  </ul>
</article>

Элемент <time> помогает некоторым программам чтения с экрана (VoiceOver сообщит об этом, а NVDA - нет), но я бы не рекомендовал «скрывать» информацию в элементе 

<p>We open presents on <time datetime="2019-12-25 06:00">Christmas</time> early in the morning.</p>

VoiceOver скажет «Мы открываем подарки на Рождество, 25 декабря 2019 года, 6 утра, рано утром» , но NVDA просто скажет «Мы открываем подарки на Рождество рано утром» .

Таким образом, некоторые пользователи программы чтения с экрана услышат дополнительную информацию о дате / времени («6 утра»), а другие - нет. И зрячий пользователь тоже не узнает о времени 6 утра. Если вы зеркально отобразите то, что отображается визуально, с помощью элемента

Хорошо, если ваш список тегов в <ul>. Этого достаточно семантической информации, чтобы иметь смысл. Пользователь программы чтения с экрана может перемещаться по элементам списка с помощью сочетания клавиш L . Вам не нужно специальное описание «это теги», но вы, безусловно, можете это сделать. 

<ul aria-label="these are the tags">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
</ul>

Время, чтобы прочитать статью - именно то, что вы сказали, просто текст. A <p> в порядке. Имейте в виду, однако, что оценка чтения может быть стрессовой для некоторых пользователей. В случае когнитивных расстройств, которые приводят к более медленному чтению, эти пользователи могут испытывать «давление», чтобы прочитать статью за это время. Оценка является хорошим предположением о длине статьи, но она субъективна для среднего времени чтения. Предпочтительный подход может заключаться в том, чтобы просто указать, какова длина статьи, возможно, по количеству абзацев или приблизительной оценке количества «страниц», если бы она была напечатана с использованием настроек по умолчанию. Таким образом, статья, которая является «полстраницей», может означать 15 секунд для пользователя программы чтения с экрана, у которого установлена ​​очень высокая скорость речи, или 3 минуты для обычного читателя, или 15 минут для расстройства чтения.

...