符合WCAG 2：vs <div> for layout </div> <table> </table>

Question

如您所知，在某些情况下，制作包含大量边框的布局（即：某种打印填写表单）可能会非常痛苦。那么，WCAG 2.0中哪一行可以接受/正确使用table与divs进行布局？

Answer 1

与流行的看法相反，WCAG 2.0并不禁止使用表格进行布局。它通过设置使用表格进行布局时不应该做的事情来间接接受它，例如：使用th元素（通常表示表格数据），例如在F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables。

因此，使用布局表不会违反WCAG 2.0，只要该表不包含错误地建议表格数据的标记。当然，作者通常不会在布局表中使用th或caption元素，因为它们对它们没用。

另一方面，填写表格可以被视为表格数据，例如，在一列中包含标签，在另一列中包含控件（字段）。因此，即使您使用caption（表单标题）或th（对于包含标签的单元格，因为它们也可以被视为行标题），它也不会违反WCAG 2.0。

Answer 2

我同意Jukka所说的话。但是，我对其中的一部分略有不同意见。

  

当然，作者通常不会在布局表中使用th或caption元素，因为它们对它们没用。

我见过开发人员在表中随机使用<th>，因为他们需要一些居中或粗体的东西，然后他们使用CSS来撤消他们不需要的任何部分。实际上，这在过去几周发生了两次。

Jukka没有提到的一件事是ARIA。如果您需要使用表格进行布局，最好将role="presentation"添加到<table>声明中。虽然Assistive Technology非常擅长猜测表何时用于演示，但声明ARIA角色，却告诉它忽略表标签。

Answer 3

嗯......我不确定我是否同意上述两条评论。是的，它没有在WCAG 2.0本身中明确提到，但代理暗示了它：

检查点4.1.1：H88: Using HTML according to spec

“以规范规定的方式使用功能HTML规范提供了有关如何在语义上处理和理解特定元素，属性和属性值的具体指导。但是，有时候，作者使用的功能不是在规范的支持下，例如，使用语义元素来实现视觉效果而不打算传达底层语义消息。这导致用户代理和辅助技术的混淆，这些技术依赖于正确的语义信息来呈现页面的连贯表示。重要的是仅按照HTML规范的规定使用HTML功能。“

因此 HTML4和HTML5规范都说：

“不应将表格用作布局辅助工具[...]如果要将表格用于布局，则必须标记属性role =”presentation“”。

然后通过代理，使用表格进行布局将使技术失败（除非使用了role =“presentation” - 这应该是最后的手段）并且失败检查点4.1.1（级别A）。相当繁琐的链接，但简而言之，使用表格进行布局意味着您不太可能成为WCAG 2.0投诉。