Блог

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

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

#html #semantic-markup #wai-aria

#HTML #семантическая разметка #вай-ария

Вопрос:

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

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

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

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

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

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

Комментарии:

1. Будет ли тизер содержать краткое содержание и фрагмент предварительного просмотра или только один из двух?

2. Только одно из двух. Я оставил это подразумеваемым, потому что, хотя я знаю, что было бы очевидно, что вам нужен только один, они семантически различны на некотором уровне. Когда я попытался провести это различие, я обнаружил, что либо отвлекаюсь от реального вопроса, либо объединяю семантические различия, поэтому я просто оставил подразумеваемую взаимную эксклюзивность.

Ответ №1:

Вы, кажется, хорошо разбираетесь в семантическом html и в том, как это помогает пользователям программы чтения с экрана. Заголовки для статей — отличное начало. Использование семантического <article> тега тоже хорошо, хотя поддержка перехода непосредственно к тегу <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 — нет), но я бы не рекомендовал «скрывать» информацию в элементе <time> . Например,

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

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

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

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

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

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

Комментарии:

1. Я думаю, у вас есть смысл поставить под сомнение использование «расчетного времени чтения», а не какой-либо другой аналогичной, но более объективной метрики, которая все же лучше, чем предоставление необработанного количества слов.

2. Отмечу, что в моем конкретном случае непосредственного использования все мои предварительные просмотры также являются ссылками на саму статью, поэтому ссылка «подробнее» была бы избыточной.