HTML tables can be quite frustrating from an accessibility standpoint. Users who rely on visual readers can find pages with many tables especially difficult to use. One vital way to improve the situation is to only use tables for tabular data, not for layout. Using the following accessibility features for tables in HTML can also improve the experience for those users:

1. Describe the table’s content using the <caption> element (see Figure 5.6). This provides the user with the ability to discover what the table is about before having to listen to the content of each and every cell in the table. If you have an especially long description for the table, consider putting the table within a <figure> element and use the <figcaption> element to provide the description.

2. Connect the cells with a textual description in the header. While it is easy for a sighted user to quickly see what row or column a given data cell is in, for users relying on visual readers, this is not an easy task.

It is quite revealing to listen to reader software recite the contents of a table that has not made these connections. It sounds like this: “row 3, cell 4: 45.56; row 3, cell 5: Canada; row 3, cell 6: 25,000; etc.” However, if these connections have been made, it sounds instead like this: “row 3, Average: 45.56; row 3, Country: Canada; row 3, City Count: 25,000; etc.,” which is a significant improvement.

Listing 5.1 illustrates how to use the scope attribute to connect cells with their headers.

<table> 
   <caption>Famous Paintings</caption> 
   <tr>
      <th scope="col">Title</th> 
      <th scope="col">Artist</th> 
      <th scope="col">Year</th> 
      <th scope="col">Width</th> 
      <th scope="col">Height</th> 
   </tr>
   <tr>
      <td>The Death of Marat</td> 
      <td>Jacques-Louis David</td> 
      <td>1793</td>
      <td>162cm</td>
      <td>128cm</td>
   </tr> 
   <tr> 
      <td>Burial at ornans</td> 
      <td>Gustave Courbet</td> 
      <td>1849</td> 
      <td>314cm</td> 
      <td>663cm</td> 
   </tr> 
</table>

HTML forms are also potentially problematic from an accessibility standpoint. If you remember the advice from the WAI about providing keyboard alternatives and text alternatives, your forms should be much less of a problem.

The forms in this chapter already made use of the <fieldset>, <legend>, and <label> elements, which provide a connection between the input elements in the form and their actual meaning. In other words, these controls add semantic content to the form.

While the browser does provide some unique formatting to the <fieldset> and <legend> elements, their main purpose is to logically group related form input elements together with the <legend> providing a type of caption for those elements. You can, of course, use CSS to style (or even remove the default styling) these elements.

The <label> element has no special formatting (though we can use CSS to do so). Each <label> element should be associated with a single input element. You can make this association explicit by using the for attribute, as shown in Figure 5.30. Doing so means that if the user clicks on or taps the <label> text, that control will receive the focus (i.e., it becomes the current input element, and any keyboard input will affect that control).

Figure 5.30 Associating labels and input elements