O'Reilly logo

HTML5 24-Hour Trainer by Mark Fletcher, Joseph W. Lowery

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required