Можно ли создать доступную таблицу без строк с помощью CSS-сетки?

ProgramBox

Можно ли создать доступную таблицу без строк с помощью CSS-сетки?

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#html #css #accessibility

Вопрос:

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

Нижеприведенную таблицу будет легко сделать отзывчивой display: grid (на узких экранах .KeyCell и .ValueCell будет идти вертикально), поэтому в ней нет тегов строк просто потому, что они ей не нужны.

 <div class="Table" role="table">
  
  <div class="KeyCell" role="rowheader">Given name</div>
  <div class="ValueCell" role="cell">Gregg</div>
  
  <div class="KeyCell" role="rowheader">Family name</div>
  <div class="ValueCell" role="cell">Simmons</div>

  <div class="KeyCell" role="rowheader">Gender</div>
  <div class="ValueCell" role="cell">male</div>
  
</div>

Однако приведенная выше разметка влияет на доступность, поскольку программа чтения с экрана не поймет, что каждая видимая строка состоит из KeyCell и ValueCell . Можно ли решить эту проблему с role aria помощью атрибутов и без добавления новых тегов?

1. Будет ли у этого только 2 столбца (пара ключевых значений)? Если это так, то у меня есть гораздо лучшая альтернатива, которую я могу вам предложить. Для создания доступных таблиц без использования a <table> требуется совсем немного WAI-АРИИ, вот и все!

2. @GrahamRitchie, спасибо за комментарий. Могу я попросить вас поделиться ссылкой с соответствующим примером.

3. Если это пара ключевых значений , вы должны использовать <dl> <dt> и <dd> элементы, которые вы можете свободно стилизовать. Но именно поэтому я спрашиваю, является ли это парой ключ-значение только для того, чтобы я мог привести вам пример.

4. Если это таблица с более чем двумя столбцами, то мы можем это сделать, но потребуется много ВАЙ-АРИИ, поэтому я пытался упростить ее. Я могу помочь, если у вас есть пример таблицы с несколькими столбцами (поскольку отношения столбцов и строк немного изменяют необходимые атрибуты).

5. Как сказал Грэм, сделать таблицу доступной без использования table будет непросто. Конечно, было бы лучше использовать table и приложить эти усилия, чтобы сделать его отзывчивым? Если вам нужен ярлык, есть несколько вариантов, в том числе библиотеки JS, такие как таблицы данных (которые автоматически сворачивают таблицы и используют отображение, похожее на аккордеон, для отображения скрытых данных).

Ответ №1:

Как уже говорили другие, использование родного <table> языка является первым выбором, но иногда есть причины использовать несемантические элементы и давать им роли. Адаптивный дизайн может быть веской причиной для этого.

Используя простую таблицу 4×4 с заголовками строк и столбцов, изначально она выглядела бы примерно так:

 <table>
  <tr>
    <th></th>
    <th scope="col">col 1</th>
    <th scope="col">col 2</th>
    <th scope="col">col 3</th>
  </tr>
  <tr>
    <th scope="row">row 1</th>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <th scope="row">row 2</th>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <th scope="row">row 3</th>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>

Используя все <div> элементы, вы можете иметь одну и ту же структуру, но заменить

<table> с role="table"
<tr> с role="row"
<td> с role="cell"
<th scope="col"> с role="columnheader"
<th scope="row"> с role="rowheader"

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

 <div role="table">
  <div role="row">
    <div role="columnheader">amp;nbsp;</div>
    <div role="columnheader">col 1</div>
    <div role="columnheader">col 2</div>
    <div role="columnheader">col 3</div>
  </div>
  <div role="row">
    <div role="rowheader">row 1</div>
    <div role="cell">a</div>
    <div role="cell">b</div>
    <div role="cell">c</div>
  </div>
  <div role="row">
    <div role="rowheader">row 2</div>
    <div role="cell">d</div>
    <div role="cell">e</div>
    <div role="cell">f</div>
  </div>
  <div role="row">
    <div role="rowheader">row 3</div>
    <div role="cell">g</div>
    <div role="cell">h</div>
    <div role="cell">i</div>
  </div>
</div>

1. Спасибо вам за ответ. Давайте вынесем вердикт. Правильно ли я понял, что невозможно удалить»<div роль=» строка » > » из вашего примера без потери доступности?

2. Я не уверен, что правильно понимаю ваш вопрос. Если вы не хотите использовать собственные <table> элементы, то вам нужно указать различные роли (таблица, строка, ячейка), если вы хотите, чтобы ваш код был интерпретирован как таблица средствами чтения с экрана.

Метки: Можно ли создать доступную таблицу без строк с помощью CSS-сетки?