HTML and CSS Reference
In-Depth Information
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 tech-
nology 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 explana-
tory 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>
