如何创建复杂的ADA兼容数据表

Question

我必须创建一个符合ADA的数据表。哪个不太难。然而，当涉及到具有如下图所示的布局的表格时，我倾向于担心如何去做。

目前，下图中的表格不符合ADA。该表描绘了两行数据。每行都有一个表，其中包含已注册的标题，平均值等。此标题表可以有多行（如普通表）。

关于如何编写符合ADA标准的表的任何想法都会非常有用。你可以用一小段代码的形式帮助我，或者建议除了图片中的其他更简单的表格格式。

Answer 1

有没有理由为什么第4行有4个标题单元格和4个数据单元格不在第一行的末尾？我的意思是桌子当前可以有15列而不是11列。 Enrolled将是第12个标题单元格，您将拥有一个简单的代码表。

以下是一个更易于访问的表格的一些提示（根据WCAG 2.0，比1998年的Section 508更新，这仍然是美国目前的“ADA兼容”事情，我猜几个月/年）

• caption元素中的标题，table元素的第一个子元素。不再符合WCAG 2.0标准，但仍然优于无标题：如果您的项目经理不希望为每个人（视力正常的人，使用或不使用屏幕阅读器和盲人的视力正常的人）添加视觉效果，则可以在视觉上隐藏字幕（所以它仍然由屏幕阅读器阅读）
  相关的WCAG 2.0 Technique H39: Using caption elements to associate data table captions with data tables
• th（àla ZenCoding：thead）中第一行标题单元格table > thead > tr > th*15，内容为Subject to Avg cum GPA
• td
中的tbody行和行
• 因为它现在是一个简单的表，每个th是其列中所有数据单元格的标题单元格，因此您可以而且必须/必须添加属性/值scope="col"。相关 WCAG 2.0 Technique H63: Using the scope attribute to associate header cells and data cells in data tables

在不改变表格结构的情况下，它是一个复杂的表格：

• thead中仍然有11个标题单元格，加上3行tr组成的数据的每一行“{1}}已注册，另外3个单元格应该是第2行的标题单元格（第1行数据）和第3行），
不得使用
• scope，因为它不是其列
中所有单元格的标题
• id/headers关联是将数据单元格与其标题单元格关联的唯一方法。相关 WCAG 2.0 Technique H43: Using id and headers attributes to associate data cells with header cells in data tables
  tl; dr 每个th都有一个带有一些有效值的id，每个td都有一个header属性，该值列出了标头id的值它与之相关联的单元格（由空格分隔）。 th本身可以包含标题单元格，因此可以包含header属性，例如第一行中有th和colspan两行。
  此处每个td与一个th相关联：每一行的前11个与{1}}相对应，每行第2部分的th恰好在12-15之上。
  更复杂的表格是一个可以呈现的地狱，因为它耗费时间和繁琐，因此规则＃1是：非常努力只有简单的表格，因此每个人都可以更容易理解（并且Web开发人员也可以更容易地进行可访问的编码）供屏幕阅读器用户理解）
• 对于复杂的表格，您应该向summary元素添加table属性，如果您的doctype仍然是HTML 4.01或XHTML 1.0。据我所知，摘要在HTML5 / HTML Living Standard中已弃用。相关的WCAG 2.0 Technique H73: Using the summary attribute of the table element to give an overview of data tables

Answer 2

我认为您可以通过两种方式访问​​它。让我们调用主要记录“类”，其中包括讲师和会话信息，以及铭刻表“登记”数据表。

1）您可以将“已注册”数据表（包含已注册的标题，平均等）作为嵌套表，并在“类”表中包含自己的标题。此外，您还可以使用嵌套标题并使用标题标记标记单元格。这将是合规的，但对可访问性具有挑战性。

2）您可以将“已注册”表与“类”表分开，并添加一列将相应行链接到“类”记录。

但是，除非您使用<thead>和<th>标记，否则这些更改不会授予可访问性。