Question

编辑：对于将此标记为与ADA无关的人。这个问题与ADA有关。我有很多网站的表格格式就像我试图弄清楚如何让使用屏幕阅读器的人理解它们。

您好我正试图找出一种方法来制作一个包含子标题/分隔符行的表，以便在被屏幕阅读器读取时通知正确的标题。

第一个表按照我的意愿工作，宣布行组的TH然后是列标题。然而，第二张表并没有像我希望的那样宣布。例如，Jill宣布＆＃34; Field Techs，Name，Jill＆＃34;而不是＆＃34; Office，Name，Jill＆＃34;正如我所料。

我已尝试过范围=＆＃34; col＆＃34;和范围=＆＃34; colgroup＆＃34;但没有帮助。这甚至可能吗？或者只是一张结构糟糕的桌子？

感谢您阅读以及您可能提供的任何帮助/建议！

＆＃13;

table thead, table th { background:#d3d3d3; }
table { margin-bottom:40px; }

＆＃13;

<!-- This table's headings seem to work properly -->
<table width="100%" cellspacing="0" cellpadding="4" >
  <thead>
		<tr>
			<td>&nbsp;</td>
			<th id="name_col" scope="col" width="50%">Name</th>
			<th id="position_col" scope="col"  width="50%">Position</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th id="office_row" scope="rowgroup" rowspan="2">Office</th>
			<td headers="office_row name_col">Jill</td>
			<td headers="office_row position_col">Office Manager</td>
		</tr>
		<tr>
			<td headers="office_row name_col">Robert</td>
			<td headers="office_row position_col">Project Manager</td>
		</tr>
		<tr>
		<th id="field_row" scope="rowgroup" rowspan="2">Field Techs</th>
			<td headers="field_row name_col">Jason</td>
			<td headers="field_row position_col">Tech</td>
		</tr>
		<tr>
			<td headers="field_row name_col">Mike</td>
			<td headers="field_row position_col">Tech</td>
		</tr>
	</tbody>
</table>

<!-- This table's headings don't announce correctly.  Jill announces "Field Techs, Name, Jill"-->
<table width="100%" cellspacing="0" cellpadding="4" >
	<thead>
		<tr>
			<th id="name_col" scope="col" width="50%">Name</th>
			<th id="position_col" scope="col"  width="50%">Position</th>
		</tr>
		<tr>
			<th id="office_group" colspan="2">Office</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="office_group name_col">Jill</td>
			<td headers="office_group position_col">Office Manager</td>
		</tr>
		<tr>
			<td headers="office_group name_col">Robert</td>
			<td headers="office_group position_col">Project Manager</td>
		</tr>
	</tbody>
	<thead>
		<tr>
			<th id="field_group" colspan="2">Field Techs</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="field_group name_col">Jason</td>
			<td headers="field_group position_col">Tech</td>
		</tr>
		<tr>
			<td headers="field_group name_col">Mike</td>
			<td headers="field_group position_col">Tech</td>
		</tr>
	</tbody>
</table>

＆＃13;

Answer 1

table只能有零个或一个thead元素(see documentation)。

允许的内容：可选的标题元素，后跟零个或多个colgroup元素，后跟可选的thead元素

通过拥有多个thead元素，您的浏览器和屏幕阅读器仅会考虑最后一个元素。您可以使用ARIA属性和角色来处理多个单独的标题行（使用例如aria-labelledby属性来指定标题）。

WCAG的一个例子： ARIA9: Using aria-labelledby to concatenate a label from several text nodes

Answer 2

您在一个表中使用范围方法和标题/ ID方法，这将产生问题。此外，正如其他人所指出的那样，您使用了多个<th>和<tbody>元素，这些元素也不是很好。

我已经在这里准备了一些关于如何使用scope方法和header / id方法正确编码此表的代码示例： https://jsfiddle.net/oody1b8x/

值得注意的是，<th>和<tbody>不是与辅助功能相关的元素，即使它们看起来像是。这些基本上仅在打印时使用。如果表格需要分页，它可以让打印机知道下一页可以重复标题行。

另外 - 不要为此目的使用ARIA;它只会产生更多问题。原生HTML语义完全能够传达这些数据的结构。

具有子标题/类别分离的可访问表

2 个答案: