Блог

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

Дело в том, что в этом списке я сгруппировал элементы по месяцам. Итак, в целом они отсортированы по дате, и теперь они также сгруппированы по месяцам.

Пример:

 January 2010
- Item 1
– Item 2

February 2010
- Item 3
– Item 4

March 2010
- Item 5
– Item 6

  

Как я мог бы сделать эту информацию более доступной.

Я нашел этот пост о role="group" который, кажется, находится прямо здесь ?! https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role

Так будет ли следующая структура иметь смысл?

 <ul>
  <li role="group">
    <h3>January 2010</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li role="group">
    <h3>February 2010</h3>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </li>
</ul>

  

Или как бы я пояснил, что вложенный ul является группой.

Или я бы оставил вложенные ul, построил все с помощью одного, ul с равным li для каждой записи?

Или я бы сделал что-то вроде:

 <div role="list">
  <div>
    <h3 id="label-1">January 2010</h3>
    <ul aria-labelledby="label-1" role="group">
      <div role="listitem">Item 1</div>
      <div role="listitem">Item 2</div>
    </ul>
  </div>
  <div>
    <h3 id="label-2">February 2010</h3>
    <ul aria-labelledby="label-2" role="group">
      <div role="listitem">Item 3</div>
      <div role="listitem">Item 4</div>
    </ul>
  </div>
</div>
  

Я был бы очень рад некоторым вводным данным.

Заранее благодарю вас. приветствия

role="group" не предназначен для использования с неинтерактивными элементами. Он предназначен для группировки элементов управления, таких как входные данные, кнопки, вместе или для группировки связанных элементов.

Ваш третий пример наиболее близок к тому, как это должно быть структурировано. Заголовки отлично подходят для быстрой навигации (поскольку уровни заголовков являются одним из основных способов навигации пользователей программы чтения с экрана по странице), а связи создаются внутри самого HTML, устраняя необходимость в какой-либо дополнительной WAI-ARIA.

И снова нет необходимости в role="group" .

Следующий пример был бы вполне приемлемым и доступным. Я изменил его на набор перечисленных <ul> и <li> , поскольку это семантически правильно и устраняет необходимость в какой-либо WAI-ARIA там также. (Золотое правило, используйте семантические элементы, если можете, поскольку поддержка для них составляет 100%, поддержка WAI-ARIA все еще немного неоднородна. и so следует использовать для дополнительной информации / если нет способа достичь желаемой структуры документа / отношений с использованием стандартных элементов HTML5.)

Очевидно, что если элементы с 1 по 4 являются интерактивными элементами, и вы оставили это для краткости, то это совсем другое дело, и я изменю этот ответ.

     <ul>
      <li>
        <h3>January 2010</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li>
        <h3>February 2010</h3>
        <ul>
          <li>Item 3</li>
          <li>Item 4</li>
        </ul>
      </li>
    </ul>