WCAG Compliance

WCAG Compliance

WhiteWalkerDragonWhiteWalkerDragon Posts: 1Questions: 0Answers: 0

Hi all,

I know I'm asking a question as a dicussion, but compliance is becoming more and more of an issue these days with trolling lawsuits so I thought discussion was more appropriate.

I'm getting this out of SortSite and other WCAG scanners.
I've tried to find a solution and haven't been able to:

Data tables allow screen reader users to understand column and row relationships.Layout tables read cells as a series of unrelated paragraphs with no tabular structure.Without TH or ROLE, screen readers apply heuristics to decide whether a table is a layout table or data table.These heuristics vary greatly between screen readers, and are affected by browser being used, window size,and font size (so the outcome is very unpredictable without TH or ROLE).If a data table has headers marked up using TD, then change these to TH.If a data table has no headers, add TH elements describing each row and/or column.If the table is only used for layout add role='presentation' to the TABLE element.
Impact on users:

•JAWS Reading: Treats tables without TH and ROLE as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used.
•NVDA Reading: Applies a 'layout table' heuristic to tables without TH and ROLE which varies depending on the browser used and on the window size in some circumstances.
•VoiceOver Safari OSX 10.9 Reading: Uses a sophisticated heuristic on tables without TH and ROLE, which is similar (but not identical) to the heuristic used by NVDA with Firefox.

Here's an example of the ouput:

        <table id="tablepress-16" class="tablepress tablepress-id-16">
        <thead>
        <tr class="row-1 odd">
            <th class="column-1">Costs</th><th class="column-2"><b>Cost of Attendance (On-Campus)</b></th><th class="column-3"><b>Cost of Attendance (Off-Campus)</b></th>
        </tr>
        </thead>
        <tbody class="row-hover">
        <tr class="row-2 even">
            <td class="column-1">Tuition</td><td class="column-2">$32,742</td><td class="column-3">$32,742</td>
        </tr>
        <tr class="row-3 odd">
            <td class="column-1">Student Housing</td><td class="column-2">$15,600</td><td class="column-3"></td>
        </tr>
        <tr class="row-4 even">
            <td class="column-1"><b>TOTAL</b></td><td class="column-2"><b>$48,342</b></td><td class="column-3"><b>$32,742</b></td>
        </tr>
        </tbody>
        </table>

What are recommendations here? Is this a "real" issue, or just a problem with a compliance engine false positive?

Or, how can I add TH or ROLE? I can't seem to find anything in the docs.

TIA!

Replies

  • allanallan Posts: 63,471Questions: 1Answers: 10,467 Site admin

    Hi,

    I'm not sure I 100% understand the issue I'm afraid. You have a th in the table header which is defining the column. Is that not what you what? Or have I (as I suspect) misunderstood?

    Allan

This discussion has been closed.