No Accessibility issues with Table Borders (mostly)
Color used to convey information in text or cell backgrounds ... DOES have issues - use a link and aria-labelledby
as always - WATCH YOUR CONTRAST! (even on borders)
Be sure to add some visual indicator for cells where color has a specific meta meaning.
| Dates | Meals | Hotels | Transport | subtotals |
|---|---|---|---|---|
| 25-Aug-97 | <37.74 | 112.00 | 45.00 | |
| 26-Aug-97 | 27.28 | 112.00 | 45.00 | |
| subtotals | 65.02 | 224.00 | 90.00 | 379.02 |
<item over per diem
<table>
<caption>
San Jose - Travel Expense Report
</caption>
<tr>
...
<tr>
<td>25-Aug-97</td>
<td bgcolor="red">
<a href="#over" aria-labelledby="over"><</a>
/* aria-labelledby only works on focusable elements, so used a link */
37.74</td>
<td bgcolor="#00FF66">112.00</td>
<td bgcolor="#333366">45.00</td>
...
</table>
<p id="over"><span style="background-color:red;"><strong>item</strong></span> over per diem</p>
NOTE: Back Button returns user to their previous location in the table.
Practice table - add caption, headers, and explain the table