WCAG 2 compliance : <table> vs <div> for layout

Question

As you know, in some cases making a layout that contains a lot of borders (i.e.: some kind of print fill-out form) can be quite a pain. So, where's the line in WCAG 2.0 where it is acceptable/correct to use a table versus divs for layout purposes?

Answer 1

Contrary to popular belief, WCAG 2.0 does not forbid use of tables for layout. It indirectly accepts it by setting rules on what should not be done when using tables for layout, e.g. using th elements (which generally indicate tabular data), e.g. in F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables.

So using a layout table does not violate WCAG 2.0, as long as the table does not contain markup that incorrectly suggests tabular data. And naturally, authors don’t normally use th or caption elements in layout tables, since they are not useful in them.

On the other hand, a fill-out form may well be regarded as tabular data, e.g. containing labels in one column, controls (fields) in another. So it would not violate WCAG 2.0, even if you used caption (for a form caption) or th (for the cells containing labels, as they could well be considered row headers).

Answer 2

I concur with what Jukka said. However, I disagree slightly with part of it.

And naturally, authors don’t normally use th or caption elements in layout tables, since they are not useful in them.

I have seen developers use <th> randomly in tables because they needed something centered or in bold, then they use CSS to undo whatever part they don't need. This happened twice in the last few weeks actually.

One thing Jukka did not mention is ARIA. If you need to use a table for layout, it is good to add role="presentation" to the <table> declariation. While Assistive Technology is pretty good at guessing when a table is being used for presentation, but declaring the ARIA role, tells it to ignore the table tags.

Answer 3

Hmm... I'm not sure I agree with the two comments above. Yes it's not explicitly mentioned in WCAG 2.0 itself but it is implied by proxy:

Checkpoint 4.1.1: H88: Using HTML according to spec

"Using features in the manner prescribed by the specification The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification."

Therefore when the HTML4 and HTML5 spec both say:

“Tables should not be used as layout aids [...] If a table is to be used for layout it must be marked with the attribute role="presentation"”.

Then by proxy, using tables for layout would fail the technique (unless role="presentation" was used - which should be a last resort) and fail checkpoint 4.1.1 (Level A). Quite a tedious link but in short using tables for layout would mean you are unlikely to be WCAG 2.0 complaint.