Layout tables and WCAG 2 error

Question

I know that WCAG 2.0 allows tables for layout, yet for some reason achecker keeps giving me the following error:

Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells

Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers.

HTML code:

<table id="mainTable">
    <tbody>
        <tr>
            <th id="h150" scope="row">Row 1</th>
            <td headers="h150" colspan="3">Value 1</td>
        </tr>
        <tr>
            <th id="h151" scope="row">Row 2_1</th>
            <td headers="h151">Value 2</td>
            <th id="h1511" scope="row">Row 2_2</th>
            <td headers="h1511">
                <table>
                    <tr>
                        <td>Inner 1</td>
                        <td>Inner 2</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

If I remove that inner layout table, validation passes. Why do I get this error with the nested layout table?

Any suggestions would be appreciated.

You should add `role="presentation"` to your layout table in order to remove its table semantics. Doing so might even appease AChecker. — danielnixon, Jan 18 '17 at 00:50

score 1 · Accepted Answer · edited May 23 '17 at 12:33

The accessibility checker that you are using, which is apparently the IDI Web Accessibility Checker, is in error. It incorrectly handles the inner table (layout table) as if its cells were cells of the outer table (data table). This becomes evident if you move the inner table out of the outer table, to stand on its own after it; the document then passes the check, as it should, since layout tables are indeed allowed, under certain conditions.

Even though no repair is needed to conform to WCAG 2.0 in this respect, consider using CSS instead of a layout table, as suggested in WCAG 2.0. If the layout table is just a two-cell table, this is usually simple.

That's what I suspected - thank you for confirming it. I'd love to use CSS, but this HTML is generated by JSF components, so I don't have direct control over it. — Val Blant, Aug 22 '13 at 16:52

Layout tables and WCAG 2 error

1 Answers1