Как разметить неясный макет таблицы данных для программ чтения с экрана?

У меня есть следующий дизайн, который мне нужно разметить, макет которого я не могу изменить:

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

Я выбрал стол, так как он на 95% похож на стол. Но я в тупике, когда дело доходит до соответствующей семантической разметки для расположения точек данных под каждым элементом. Каждая точка отличается, т. е. это не текст произвольной формы, и каждый раз он помещается в одно и то же относительное положение, но это нарушает традиционный макет таблицы данных, поскольку для этих точек не отображаются назначенные заголовки или метки. Мне интересно разметить такой макет, чтобы он был одновременно:

  1. Семантика
  2. Доступно для современных программ чтения с экрана (я знаю, что в некоторых старых программах чтения с экрана есть различные ошибки, но, как и в старых браузерах, я не думаю, что справедливо ограничивать лучшие/новые методы устаревшим программным обеспечением).

Я сталкивался с этой проблемой много раз за последние несколько лет, и, наконец, взломал и обратился к сообществу за советом. Я пытался:

  1. Использование отдельных tbody для каждого элемента, а также использование второй строки для дополнительных точек данных, но я сдался, когда не смог понять, как связать «подстроку» с элементом.
  2. Расположение таблицы со всеми различными точками данных и заголовками по горизонтали, а затем использование CSS для позиционирования вещей. К сожалению, вопреки моему более раннему утверждению об устаревшем программном обеспечении, мне необходимо поддерживать IE 7, и этот метод не работает.
  3. Я рассматривал возможность использования скрытых строк-th и rowspans для создания более сложного макета таблицы и пытался использовать ARIA. чтобы получить желаемые результаты чтения с экрана, все безрезультатно.
  4. Я также рассматривал возможность использования вложенных таблиц, но это кажется очень и очень неправильным.

Любая помощь приветствуется.

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


html css accessibility screen-readers
person Matt    schedule 05.09.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вообще говоря, у меня была бы таблица с 1 строкой заголовка и 6 строками данных, с нечетными строками данных, имеющими 3 ячейки, и четными строками данных, имеющими одну ячейку, охватывающую три столбца.

Внутри ячеек с четными строками у меня был бы элемент <h?> для строки «lorem 102» и список точек детализации. В элементе <td> ячеек с четной строкой у меня был бы атрибут headers, указывающий на первую ячейку строки выше, чтобы обеспечить ассоциацию от подстроки к элементу.

Я вполне мог бы включить элемент <caption> или атрибут summary в элемент <table>, чтобы описать структуру.

ОБНОВЛЕНИЕ: увидев ответ Джаспера де Вриса, я понимаю, что пропустил столбец удаления. Просто следуйте его совету.

person Alohci    schedule 06.09.2012
comment
Я бы не использовал заголовки в ячейке таблицы, а scope="row". - person Jasper de Vries; 06.09.2012
comment
@JasperdeVries - scope="row" в моей аранжировке не сработало бы. Для работы потребуется scope="rowgroup" с каждой парой строк в tbody. Я чувствовал, что headers проще. Хотя твой ответ тоже хорош. - person Alohci; 06.09.2012
comment
После изучения scope и headers в результате этого ответа он выглядит как W3 рекомендует headers, когда требуются более сложные макеты таблиц. - person Matt; 06.09.2012

arrow_upward
3
arrow_downward

Да, иди со столом! Мне потребовалось несколько итераций, чтобы получить сайт, содержащий таблицы, совместимые с Webrichtlijnen, но в конце концов он прошел все критерии. Есть несколько вещей, о которых вам нужно позаботиться:

Примером таблицы может быть:

<table summary="summary">
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">
        <div class="title">Title</div>
        <div class="sub-title">Subtitle</div>
        <div class="period">Period</div>
      </td>
      <td class="number">1.45</td>
      <td class="number">$1,047</td>
      <td><a href="">Delete</a></td>
    </tr>
  <tbody>
</table>

Если вы решите использовать Ajax для ссылки на удаление, сначала реализуйте ее без использования Javascript (просто укажите URL-адрес, который удаляет соответствующий элемент), а затем добавьте к нему функциональные возможности Ajax.

person Jasper de Vries    schedule 06.09.2012
comment
@RyanB спасибо за ваше предложение по редактированию. Должно быть, я нажал не на ту кнопку, я не собирался их отвергать. - person Jasper de Vries; 06.09.2012
comment
Моя проблема с этой разметкой заключается в том, что программы чтения с экрана не будут правильно читать точки данных title, subtitle и period при связывании со строкой таблицы. Думаю, я надеюсь, что это будет читаться почти так, как если бы ряд был плоским. - person Matt; 06.09.2012