OzWiki

Making Tables Accessible

Tables are useful for presenting data in a format that allows for quick and easy cross-referencing. While the basic structure of columns and rows is not easily interpreted by assistive technology that operates in a linear fashion, tables can be made accessible through effective markup and good practice.

This also applies to tables used for web page layout, with a few specific considerations.

You’re most likely here because you need to make sure the way you use tables doesn’t make your web content inaccessible to people with disabilities.

You might have a specific problem, like:

  • whether or not to use a table CAPTION
  • how to use table headers to enhance accessibility
  • how table nesting affects accessibility
  • how complex data tables can be made accessible
  • how tables used for layout affect accessibility

Perhaps you need a comprehensive list of likely accessibility issues with tables – and how to address them. Or maybe you just want to ask a direct question and get a clear, expert response.

You’re in the right place.

OzWiki will tell you what you need to know in order to use tables in an accessible way. The Tables section details 25 accessibility problems and how to address them, demonstrating compliance with 24 WCAG Level A success criteria, and 1 WCAG Level AA success criterion.

As a subscriber, you’ll also be able to request further or more detailed information relating to your specific situation.

See an example

Data tables do not have a CAPTION element

Data tables do not have a CAPTION element

CategoryTable
TopicCoding
WCAG SC 1.3.1: Info and Relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html

See more errors for this SC

LevelA
Technique(s)

H39: Using caption elements to associate data table captions with data tables

ImpactMedium

Error

The data table does not use the CAPTION element to name the table.

Incorrect Example(s)

Screenshot:Data table containing options to subscribe to the New York Times, with costs and information about access
.
Code:
<table><thead><tr><td>&nbsp;</td><td><p>Web + Smartphone Try for 99&cent; Get web + Smartphone apps &#x25BA;</td><td>first 4<br /> weeks<br /> 99&cent;</td><td>Every Week<br /> Thereafter<br /> $3.75</td><td>HideSee Details</td></tr></thead></table>

Solution

Ensure all tables use the CAPTION element to name the table.

Already a subscriber?

Log in!

Want access?

Subscribe!

OzWiki is an accessible resource that provides best known methods to achieve A & AA level design and interaction for web content in areas such as Audio, Video, Link, Captcha, Maps, Navigation and more. These outlined accessibility errors, examples and solutions help you become 508 compliant by demonstrating associated WCAG 2.0 success criteria and techniques.

Gain access to more detailed information on all OzWiki categories for only $39/month by purchasing a subscription today! You can cancel your subscription at any time.