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.
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.
<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>