Skip to Main Content

Accessible Web Sites: Tables

Tips for coding accessible web sites that meet ADA requirements.

Accessibilitiy Checkers

Tables

When working on tables in Rich Text/HTML editor:

  • do not fill in anything on the Legacy tab (these are deprecated, i.e., no longer acceptable HTML)
  • identify table headers
  • give the table a caption (this will appear above the table)
  • Choose a class (either "table table-bordered" or "table table-striped")

Table edit screen

Table Sample

Tables should be set up to help screen readers identify key elements. A table head section identifies the column headings and a caption functions as the table title.

 

<table class="table table-striped"> <caption>Delivery Slots</caption> <tr> <td>&nbsp;</td> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> <th scope="col">Thursday</th> <th scope="col">Friday</th> </tr> <tr> <th scope="row">09:00 &ndash; 11:00</th> <td>Closed</td> <td>Open</td> <td>Open</td> <td>Closed</td> <td>Closed</td> </tr> <tr> <th scope="row">11:00 &ndash; 13:00</th> <td>Open</td> <td>Open</td> <td>Closed</td> <td>Closed</td> <td>Closed</td> </tr> </table>
Delivery Slots
  Monday Tuesday Wednesday Thursday Friday
09:00 – 11:00 Closed Open Open Closed Closed
11:00 – 13:00 Open Open Closed Closed Closed

DO NOT USE TABLES FOR LAYOUT

Top Bottom