使用HTML表“summary”属性

Question

HTML4.01（http://www.w3.org/TR/html401/struct/tables.html#adef-summary）的规范声明表摘要属性应包含“...表格目的和结构 ...的摘要”和示例给予支持使用。

Web内容辅助功能指南2.0（http://www.w3.org/TR/WCAG20-TECHS/H73.html）表示摘要属性是“简要概述数据如何组织到表格中或简要说明如何导航表格”

WCAG 1.0（http://www.w3.org/TR/WCAG10-HTML-TECHS/#table-summary-info）说了类似的内容，这些例子再次显示了用于描述表格的目的和结构的用法。

<小时/> 另一方面，伊利诺伊州信息技术无障碍中心iCITA（http://html.cita.uiuc.edu/nav/dtable/dtable-rules.php）将该属性的最佳实践描述为“应该描述表格的内容或结论作者打算通过表中的数据传达“

我怀疑iCITA已经明确地选择了这一点，还有其他HTML书籍和指南可以提供类似的做法。

在许多方面，这种用法对我来说更有意义，因为明智地使用thead和th元素以及范围和标题属性应该足以向无视用户描述表的结构，而在那里对于没有视力的用户而言，获取复杂表格的要点以匹配有视力的用户通过快速扫描表格获得的相同信息级别是没有其他办法的。

但是，我不愿意与WCAG的研究建议背道而驰。

所以，我的问题是：如果你在数据表的summary属性中放入任何东西，你输入目的，结构，内容描述，结论和/或其他东西，为什么？基于此属性的真实用户反馈的原因特别受欢迎。

Answer 1

摘要属性已过时。如果表标题元素不合适，则将表放在figure元素中，在figcaption元素中添加其他信息。轴属性也已过时;相反，在适当的元素上使用范围。

关于摘要来自W3C：

  

  
• 元素表不得显示为标题元素的后代。
  
• table元素的summary属性已过时。考虑在标题元素或包含table元素的figure元素中描述表的结构;或者，简化表的结构，以便不需要描述。
  
• table元素的align属性已过时。改用CSS。
  
• table元素的width属性已过时。改用CSS。
  
• table元素的bgcolor属性已过时。改用CSS。
  
• table元素的border属性值必须为“1”或空字符串。要调整表格边框的粗细，请改用CSS。
  
• table元素的cellpadding属性已过时。改用CSS。
  
• table元素上的cellspacing属性已过时。改用CSS。
  
• table元素的frame属性已过时。改用CSS。
  
• table元素的rules属性已过时。改用CSS。
  

关于轴的W3C：

  

  
• td元素的scope属性已过时。而是在第th个元素上使用scope属性。
  
• td元素的abbr属性已过时。请考虑使用简洁的文本开始单元格内容，然后根据需要进一步详细说明。
  
• td元素上的axis属性已过时。请改用scope属性。
  
• td元素上的align属性已过时。改用CSS。
  
• td元素的width属性已过时。改用CSS。
  
• td元素上的char属性已过时。改用CSS。
  
• td元素上的charoff属性已过时。改用CSS。
  
• td元素的valign属性已过时。改用CSS。
  
• td元素上的bgcolor属性已过时。改用CSS。
  
• td元素的height属性已过时。改用CSS。
  
• td元素上的nowrap属性已过时。改用CSS。
  

Answer 2

我提了一个内容说明。可以将其视为您可能在标题中看到的文本。该表不应该 结论，它应该支持结论（在其他地方提到）。

考虑到页面其余部分的内容，通常表格的目的很明确。例如，如果您正在讨论与投票模式相关的人口统计学变化，那么很明显为什么您有一张表中有州人口增长率的表格。如果没有，你可以简要提一下它为什么存在。

至于为什么，它很简单：可访问性。那些使用屏幕阅读器的人依靠这些信息来提供表格上下文。您是否需要使您的网站可访问取决于您的雇主或客户。即使不是必需的，也建议（并且肯定会受到那些依赖它的人的赞赏）。

Answer 3

我使用summary属性来描述表的结构以及行和列之间的关系。它会扩充<tbody>和<th>元素以及scope，axis以及id和headers属性。可以使用这些元素和属性来理解表的结构，但是在前面有一个简单的说明是很好的。

不要低估通过简单地查看表格在视觉上传达的信息量。这是我尝试在summary属性中捕获的内容。

Answer 4

根据W3C

表元素的summary属性使此信息 适用于使用屏幕阅读器的人；信息不是 直观显示。

当表具有复杂的结构（对于 例如，当有几组行或列标题时，或者 有多组列或行）。摘要也可能是 对于包含许多列或行的简单数据表很有用 数据。

无论表中是否包含一个 字幕元素。如果两者都使用，则摘要不应重复 标题。

在HTML5中，摘要属性已过时。因此，假设我们使用以下来自Tables - W3C

的HTML表

<TABLE border="1"
          summary="This table gives some statistics about fruit
                   flies: average height and weight, and percentage
                   with red eyes (for both males and females).">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
    <TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>

，然后使用W3C Validator测试是否一切正常。然后我们将得到以下错误

table元素上的summary属性已过时。考虑 在标题元素或表格中描述表格的结构 包含表格的图形元素；或者，简化结构 表格，因此无需说明。

因此，我将使用 caption tag而不是摘要，并写一个简单的描述（用于解释和详细说明表格的几行文字）。

Answer 5

我列出了表中数据试图传达的信息摘要。

Answer 6

我会遵循WCAG指南。你可以尝试的一件事是获得一个屏幕阅读器软件包，闭上你的眼睛，看看它对你的表的看法，有或没有标题和摘要。这应该可以让您很好地了解文本描述中缺少的内容，以帮助传达表格中的信息。