满足508复杂数据表的可访问性要求

Question

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

https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/

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?

Answer 1

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>

Answer 2

I see several things about the table that can be improved (inline styles, lack of <tbody> , etc), but header identification is not one of them. Then again, I can't see the entire table. But it looks like the plugin evidently doesn't understand a colspan. Try adding a scope="col" to the header.

For an alternative plugin, try the WAVE toolbar: http://wave.webaim.org/toolbar

UPDATE : Now that I see the table via the pastbin link in the comment, I see some serious problems. First and foremost, there's no closing table tag. You have some rows wider than others. You have an empty row that has has been inserted for display purposes. Don't do that, use CSS.