Какова правильная семантика для списка как части заголовка? - PullRequest
Новая
       29

Какова правильная семантика для списка как части заголовка?

1 голос
/ 13 апреля 2020

У меня есть текстовый слайдер, который циклически перебирает список отдельных слов. Это большой заголовок, и список продолжает утверждение, такое как я делаю x, я делаю y, я делаю z.

Я знаю, что размещение ul внутри h2 недопустимо, но как правильно семантически обозначить это?

HTML

  <h2><span>Oh hey&nbsp;</span>
    <ul class="vertical slider">
      <li>one.</li>
      <li>two.</li>
      <li>three.</li>
      <li>four.</li>
      <li>five.</li>
    </ul>
  </h2>

Просто span вокруг каждого слова?

FIDDLE https://jsfiddle.net/iraishere/5mtws3po/

1 Ответ

0 голосов
/ 19 апреля 2020

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

<h2>I do foo, bar, and zed.</h2>

Вы можете использовать это в качестве модели для разметки вашей динамически c содержание. Попробуйте сохранить ту же структуру и использовать CSS, чтобы визуально скрыть ненужные детали. 

/* add period and space after each item */
.item:after {
  content: ". ";
}

/* visually hide sentence semantic parts */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
<h2>I do <span class="item">foo</span><span class="sr-only">, </span><span class="item">bar</span><span class="sr-only">, and </span><span class="item">zed</span><span class="sr-only">.</span></h2>

Все остальное зависит от анимации javascript.

...