Блог

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

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

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

Мой вопрос прост: как вы можете сделать таблицу с вложенными таблицами или элементами управления доступной?

Например, представление основных сведений DevExpress утверждает, что оно доступно. https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/

Вложенные таблицы прекрасно подходят, если они семантические. Я бы не стал использовать пример таблицы основных сведений в качестве вашего шаблона. Это довольно странно. Код чрезмерно сложен, неправильно использует сетку/ячейку сетки вместо таблицы/ячейки таблицы, и программа чтения с экрана испытывает трудности с переходом к вложенной таблице.

Если вы используете реальное <table> вместе со связанным <tr> с ним , <th scope="row/col"> , <td> , и <caption> тогда вы можете сделать так, чтобы одна из ячеек таблицы ( <td> ) содержала другую <table> .

Пользователь программы чтения с экрана может использовать Tклавишу для перехода к таблице (при использовании JAWS или NVDA), а затем ctrl alt arrowдля навигации внутри таблицы. TПовторное нажатие приведет к переходу к вложенной таблице, и пользователь сможет перемещаться внутри вложенной таблицы. Все это отлично работает.

Я бы рекомендовал использовать a <caption> , чтобы вы могли назвать свою таблицу, и пользователь программы чтения с экрана будет знать назначение таблицы.