Доступная таблица DIV

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html

Я следую примеру W3C для создания доступной таблицы DIV. Я добавил соответствующие теги ролей и атрибуты.

Будет ли упаковка некоторых ячеек в div нарушить доступность таблицы?

Например: обратите внимание, где находится div с "testClass".

<div role="table"
 aria-label="Students"
 aria-describedby="students_table_desc">
<div id="students_table_desc">
  Students currently enrolled in WAI-ARIA 101 for the coming semester
</div>
<div role="rowgroup">
  <div role="row">
    <span role="columnheader">
      First Name
    </span>
    <span role="columnheader">
      Last Name
    </span>
    <span role="columnheader">
      Company
    </span>
    <span role="columnheader">
      Address
    </span>
  </div>
</div>
<div role="rowgroup">
  <div role="row">
    <span role="cell">
      Fred
    </span>
    <div class="testClass">
      <span role="cell">
        Jackson
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
    </div>
    <span role="cell">
      123 Broad St.
    </span>
  </div>
  <div role="row">
    <span role="cell">
      Sara
    </span>
    <span role="cell">
      James
    </span>
    <span role="cell">
      Acme, Inc.
    </span>
    <span role="cell">
      123 Broad St.
    </span>
  </div>

</div>


person dkrasniy    schedule 20.04.2018    source источник
comment
Я выбрал accessibility-developer-guide.com/ examples / tables / и их роли grid / gridcell для интерактивных таблиц.   -  person Robin Wieruch    schedule 01.12.2020


Ответы (3)


Раньше я использовал таблицы ARIA, и хотя я предпочитаю использовать собственные элементы <table>, использование соответствующих ролей таблиц отлично работает, если они все указаны (table, rowheader, columnheader, row, cell). как ваш пример. Тот факт, что у вас есть некоторые ячейки, обернутые в <div> для стилизации, не имеет значения. Поскольку ваш testClass <div> не имеет роли, он будет проигнорирован программой чтения с экрана.

Самое замечательное в ролях таблиц ARIA заключается в том, что программы чтения с экрана рассматривают их как настоящие таблицы, так что ctrl + alt + клавиши со стрелками работают при навигации по стол.

Обратите внимание, что NVDA в IE (в настоящее время) не поддерживает роли table или grid, но работает с общими комбинациями вспомогательных технологий и браузеров, такими как:

  • NVDA + Firefox
  • JAWS + IE / Firefox / Chrome
  • VoiceOver на iOS

Примечание. NVDA + Chrome не поддерживает роль table, но поддерживает роль grid.
NVDA + IE не поддерживает ни одну из ролей.

Примечание 2: роль grid следует использовать, когда ячейки таблицы являются интерактивными (например, электронная таблица). Роль table следует использовать, когда ячейки в таблице статичны.

person slugolicious    schedule 22.04.2018

Нет, не сломается. Не думаю, что сломается. Думаю, это сработает нормально

person Stel Dare    schedule 20.04.2018

Использование div (и промежутков) не дает программам чтения с экрана возможность индексировать ценный контент, поэтому он будет проигнорирован, а SR прочитает текст. Так что ничего не сломается.

Почему не семантическая таблица?

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

person A. Meshu    schedule 20.04.2018
comment
Семантические таблицы очень сложно стилизовать и использовать сложные функциональные возможности. Нужна гибкость DIV, но структура / доступность таблицы. - person dkrasniy; 21.04.2018
comment
а) Что вы имеете в виду под сложным стилем? SR не нужен стиль. (б) какого желаемого результата вы можете достичь с помощью div, чего нельзя получить из элементов таблицы? Если вы думаете о доступности, помните, что div не несут семантической ценности, они просто загромождают ваш HTML-код. Вы должны использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму. developer.mozilla.org/en-US/docs/Learn/ HTML / - person A. Meshu; 22.04.2018