Search code examples
htmlhtml-tableaccessibility

Meeting 508 Accessibility requirements for complex data tables


I'm using a extension for Firefox to check for 508 compliance issues.

I'm getting the following two errors which I have been unable to resolve on each report:

Fail: Data tables must use th elements to indicate header cells for the first cell in all the columns or rows.

Fail: For complex data tables, the td elements must have headers attributes that point to associated th header ids.

The addon highlights the following table cell for both errors but I can't find anything wrong with it:

<table cellpadding="5" width="100%" style ="text-align:right" class ="ecoRow" summary="Budget History" title="Budget History">

<tr> <th id="date_range" colspan="7" style="text-align:center;">From #params.start_date# To #params.end_date#</th></tr>

What to do?


Solution

  • I'm using this firefox extension and ran into this same issue today. It appears that the tool wants to see some text inside the element.

    Other dev on the team replaced plain text header labels with buttons and anchors. anchors were passing with the tool, but buttons weren't. We already had the scope defined and all the closing tags (I checked).

    Results may differ, but this fixed our issue. Note that the passing lines have actual text between tags.

    • Fail: <th><input type="button" text="blah"></input></th>
    • Fail: <th><img url="blah.jpg"></img></th>
    • Pass: <th><a href="www.blah.com">blah</a></th>
    • Pass: <th><span>blah</span></th>
    • Pass: <th>blah</th>