Tables

Key:

P - Perceivable
O - Operable
U - Understandable
R - Robust

Data tables must have appropriate rows and columns tagged as headers with "th" (P) (U)

Who does this assist?

When a user cannot see the visual indicators of headers in tables a screen reader will speak which headers are associated with a particular data cell.

Good Practice Example

The th element is used to specify which elements are the header elements of a table. Columns and rows can have headers.

The following example has been copied from the WebAIM.org - Creating Accessible Tables (Opens in new window) site.

Example XHTML:


                        		<table>


                                <tr>

                          		
                                <th>Name</th>

                                <th>Age</th>

                                <th>Birthday</th>

                                </tr>


                                <tr>

                                <th>Jackie</th>

                                <td>5</td>

                                <td>April 5</td>

                                </tr>


                                <tr>

                        <th>Beth</th>

                                <td>8</td>

                                <td>January 14</td>

                                </tr>


                                </table>

Demonstration of above code:

Name	Age	Birthday
Jackie	5	April 5
Beth	8	January 14

Identify row and column headers for data tables and use mark-up to associate data cells and header cells for data tables that have two or more logical levels of row or column headers (P)

Who does this assist?

With this technique screen readers will specify the headers associated with a particular data cell. It is used when more than one row and/or column header is associated with a particular cell.

Good Practice Example

Example XHTML

The following code demonstrates the potential requirement for two logical levels of headers. It uses:

the id attribute for the th tag
the headers attribute for the td tag

In this example id attribute uniquely identifies an element for referral by the headers attribute.

This technique also associates th elements with data cells.

The values of the headers attribute are the ids of the associated th tags.

The following example has been copied from the WebAIM.org - Creating Accessible Tables (Opens in new window) site.


                        		<table>


                                <tr>

                                <th id="name">Name</th>

                                <th id="age">Age</th>

                                <th id="birthday">Date</th>

                                </tr>


                                <tr>

                                <th rowspan="2" id="birth">by birth</th>

                                <th id="jackie">Jackie</th>

                                <td headers="birth jackie age">5</td>

                                <td headers="birth jackie birthday">April 5</td>

                                </tr>


                                <tr>

                                <th id="beth">Beth</th>

                                <td headers="birth beth age">8</td>

                                <td headers="birth beth birthday">January 14</td>

                                </tr>


                                <tr>

                                <th id="step">by marriage</th>

                                <th id="jenny">Jenny</th>

                                <td headers="step jenny age">12</td>

<td headers="step jenny birthday">Feb 12</td>

                                </tr>


                                </table>

Example display:

	Name	Age	Age
by birth	Jackie	5	April 5
by birth	Beth	8	January 14
by marriage	Jenny	12	Feb 12