Making Tables More Accessible With HTML5

HTML 24Hour Trainer Cover

Ed’s Note: This is an extract from the book HTML5 24-Hour Trainer by Joseph W. Lowery and Mark Fletcher copyright John Wiley & Sons 2011. For Source Code, Sample Chapters, the Author Forum and other resources, got to the book’s homepage on wrox.com.

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 screen readers 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 screen readers, 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> 
</table> 

When rendered, the content in the <caption> tag is centered above the table as shown in Figure 18-1. As you can see, no additional styling is applied, by default. You can, of course, use CSS to style the caption tag selector however you like.

Styling the caption

Figure 18-1

Although the caption normally appears above the table, you can move it to the bottom through the CSS property caption-side. CSS3 specifications call for caption-side to accept top, bottom, left, and right values, but almost all modern browsers (as of this writing) only support top and bottom. The exception is Firefox, which supports all four caption-side values.

Incorporating Details and Summary

If the caption is not enough to explain the table, HTML5 provides additional tags that can be used: <summary> and <details>. These two tags are placed within the <caption> tag and rendered on the screen in the same position as the caption. Here’s an example taken from the W3C HTML5 specification:

<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.</p>
  </details>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

IFigure 18-2

Figure 18-2

Notice how the <details> tag is placed within the <caption> tag and, further, how the <summary> tag is within <details>. The content in the <details> tag that is not in the <summary> tag is considered the actual details of the table. When rendered by the browser (Figure 18-2), the caption is immediately followed by the summary and then the details.

The summary is really intended for screen readers and often does not add anything useful to the visual display. If that is the case with your design, you can use CSS to move it off screen, but at the same time, keep it accessible to assistive technology. Here’s an example CSS rule:

summary {
  position: absolute;
  left: -999px;
}

Through absolute positioning, the summary tag selector is moved a good distance (999 pixels) from the left edge of the screen, effectively hiding it from view while still keeping the content within the document flow.

The negative absolute positioning method is a better technique than the use of the display: none directive because most screen readers ignore content that is explicitly not defined.

Try It

In this Try It you learn how to make a table more accessible.

Lesson Requirements

You will need the tpajupiter.html file from the Lesson18 folder, as well as a text editor and web browser.

You can download the code and resources for this lesson from the book’s web page at http://www.wrox.com.

Step-by-Step

  1. Open your text editor.
  2. From the Lesson18 folder, open tpajupiter.html.
  3. Put your cursor before the closing </style> tag within the <head> section and press Enter (Return).
  4. Enter the following code:
caption {
   font-size: 14px;
   padding-bottom: 5px;
   font-weight: bold;
}
  1. Put your cursor at the end of the opening <table> tag before the first <tr> tag and press Enter (Return).
  2. Enter the following code:

<caption>Available Jupiter Moon Tours</caption>
  <ol start="7">
     <li>Save your file.</li><li>In your browser, open tpa_jupiter.html to view the rendered
        table with the new caption, as shown in Figure 18-3.</li></ol>

Figure 18-3

Figure 18-3

To see an example from this lesson that shows you how to make a table more accessible, watch the video for Lesson 18 on the DVD with the print book, or watch online at www.wrox.com/go/html5video.

You might also like...

Comments

About the author

Dan Maharry

Dan Maharry United Kingdom

Dan Maharry is the editor of DeveloperFusion. He has covered the latest in software development since the mid 90s. Not wishing to preach what he doesn't practice, Dan has also worked as a profes...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“In theory, theory and practice are the same. In practice, they're not.”