Web Accessibility services and resources for producing web sites accessible to people with special needs.
Many of us spend our time retrofitting existing websites for accessibility, rather than creating accessible websites from scratch. One inconvenient aspect of retrofitting is the default style changes when converting an existing <TD> in a table to a <TH>; the text becomes centered and bolded, so requiring changes to the stylesheet. While this seems simple, depending on the size of the enterprise and the politics of changing a stylesheet, it can be a nightmare requiring weeks of negotiation.
I was browsing the Freedom Scientific site late last week doing some research on complex tables. Freedom Scientific is the maker of the popular screen reader, JAWS. They provide an excellent HTML reference section, the HTML Challenge. While it is oriented toward the user of JAWS, excellent examples of accessibility HTML technique can be found in the source code. Much to my surprise, as I usually follow the W3C examples where the scope attribute is used in the <TH> tag, Freedom Scientific places the scope attribute in the <TD> for the row header.
Here's the example from their site page:
<td style="width: 40%;" headers="c1" scope="row"><p>Jenkins, R</p></td>
Intrigued, I did some JAWS testing on a sample table I had set up. The code in row 2 and 3 uses the standard <TH> in the second column. The code in row 4 uses the scope attribute in the <TD>. In my test, JAWS correctly spoke the row headings in all the rows.
| Task # | Task Name | Days Estimated | Date Start | Date Completed | Status |
|---|---|---|---|---|---|
| 1 | Business Requirements | 4 | 3/11/05 | 3/17/05 | Not Started |
| 2 | Design Prototype | 4 | 3/18/05 | 3/23/05 | |
| 3 | Coding | 18 | 3/24/05 | 4/18/05 |
The code for rows 3 and 4 are as follows:
<tr> <td>2</td> <th scope="row">Design Prototype</th> <td>4</td> <td> 3/18/05 </td> <td> 3/23/05 </td> <td> </td> </tr> <tr> <td>3</td> <td scope="row">Coding</td> <td>18</td> <td> 3/24/05 </td> <td> 4/18/05 </td> <td> </td> </tr>
Much easier than changing the stylesheet! I will be testing next week in IBM's Home Page Reader. Check back.