HTML5 24-Hour Trainer

Chapter 18. Making Tables More Accessible

One of the main purposes of tables is to make it easy to grasp concepts and details at a glance for most web page visitors. Unfortunately, for a significant minority, tables actually make comprehension a great deal harder. For those who are visually challenged and depend on technology such as screenreaders to translate the Web from a visual to an aural experience, tables represent a significant challenge. HTML5 includes a number of additional tags and attributes that can make tables and their content more accessible to all.

INSERTING CAPTIONS

Often an editor or web copywriter will assume that a table is self-explanatory and place it onto the page without explanation or reference. For example, a visit to any of the major sports websites frequently reveals a table of statistics that is only understandable if you look at it in the full context of informative graphics. To those using screenreaders, such a table is an unclear combination of abbreviations and numbers. If, however, the table included an explanatory passage, such as a caption, the details in the table would become clear.

The <caption> tag is the perfect vehicle for delivering the explanation of a table's function in HTML. The <caption> tag is placed within the table structure, immediately after the opening <table> tag, as shown in the following code fragment:

<table>
<caption>Regional Sales, Q1</caption>
  <thead>
    <tr>
      <th>Region</th>
      <th>Sales</th>
      <th>Amount</th>
    </tr>
  </thead>

When ...