Caption

The HTML table caption element provides accessible names for data tables, ensuring screen readers announce table context immediately. Learn proper implementation for WCAG-compliant, semantic tables.

Understanding the Caption Element

The <caption> HTML element specifies the caption or title of a table, providing the table an accessible name or accessible description. Unlike a plain text heading above a table, the caption is semantically associated with the table itself, creating a formal relationship that assistive technologies can leverage.

This semantic connection means that when a screen reader user navigates to a table, they immediately hear the caption, giving them context for what data the table contains without requiring them to read every cell first. The caption must be placed as the first child of its parent <table> element, making it immediately discoverable by both parsing software and human readers scanning the document structure.

Why Captions Matter

Accessibility: Screen readers announce caption content automatically when users navigate to a table
WCAG Compliance: Tables require accessible names to meet Level A and AA success criteria
User Experience: Captions help users quickly understand table content and relevance
Semantic Correctness: Captions establish formal relationships between table content and its title

Basic Caption Element Syntax

1<table>2 <caption>Quarterly Sales Results by Region</caption>3 <thead>4 <tr>5 <th>Region</th>6 <th>Q1</th>7 <th>Q2</th>8 </tr>9 </thead>10 <tbody>11 <tr>12 <td>North America</td>13 <td>$125,000</td>14 <td>$142,000</td>15 </tr>16 </tbody>17</table>

Accessibility Fundamentals

Essential accessibility considerations for table captions

Screen Reader Integration

Screen readers announce caption content automatically when users navigate to a table, providing immediate context without requiring them to read cell contents first.

WCAG Requirements

The Web Content Accessibility Guidelines (WCAG) require tables to have accessible names, making captions essential for meeting Level A and AA success criteria.

Tables Mode Navigation

When users activate Tables Mode in their screen reader, captions become the primary mechanism for identifying tables on a page.

Caption vs Summary

Captions provide the table's accessible name, while summaries offer additional context about data organization for complex tables.

CSS Styling and Positioning

Modern caption styling uses CSS properties rather than deprecated HTML attributes. The caption-side property controls vertical positioning, while text-align handles horizontal alignment.

Caption-Side Property

The caption-side property accepts values of top (default), bottom, or logical values for different writing modes:

caption-side: top - Position caption above the table
caption-side: bottom - Position caption below the table
caption-side: inline-start - Position at the inline start direction
caption-side: inline-end - Position at the inline end direction

Text Alignment

Use text-align to control caption text alignment:

text-align: left - Left-align caption text
text-align: center - Center-align caption text
text-align: right - Right-align caption text

To learn more about how CSS properties work with HTML elements, explore our guide on basic CSS selectors for targeting specific elements in your stylesheets.

Caption Styling Example

1/* Caption positioning */2caption {3 caption-side: top;4 text-align: left;5 padding: 12px 0;6 font-weight: bold;7 font-size: 1.1em;8 color: #333;9}10 11/* Bottom caption variant */12caption.bottom {13 caption-side: bottom;14 text-align: center;15 padding-top: 8px;16}17 18/* Background color must be explicitly applied */19table {20 background-color: #f5f5f5;21 border-collapse: collapse;22}23 24caption {25 background-color: #f5f5f5; /* Explicitly set */26 padding: 12px;27}

Background Color Gotcha

Any `background-color` applied to the `<table>` element does NOT automatically apply to its caption. If you want the caption to share the table's background color, you must explicitly apply it to the caption element as well.

Advanced Implementation

Captions with Complex Content

While simple captions contain plain text, the element can include HTML content for richer descriptions:

<caption>
 Quarterly Sales Results<br>
 <span style="font-size: 0.9em; color: #666;">
 Data includes all product categories across North American regions
 </span>
</caption>

Using Figcaption with Tables

When a table is wrapped in a <figure> element, use <figcaption> instead:

<figure>
 <figcaption>Sales Comparison Chart</figcaption>
 <table>
 <!-- table content -->
 </table>
</figure>

Note: Using <figcaption> may reduce accessibility in some contexts, as screen reader "Tables Mode" typically expects captions within table elements.

Aria-Describedby for Table Summaries

For complex tables requiring detailed summaries:

<p id="table-summary">
 This table shows quarterly sales by region.
 Columns represent quarters, rows represent geographic regions.
</p>
<table aria-describedby="table-summary">
 <caption>Quarterly Sales Results</caption>
 <!-- table content -->
</table>

For comprehensive accessibility implementation across your website, consider partnering with experts in accessible web development who understand how semantic HTML, ARIA attributes, and proper table structures work together to create inclusive digital experiences.

Frequently Asked Questions

Where must the caption element be placed?

The `<caption>` element must be the first child of its parent `<table>` element, appearing immediately after the opening `<table>` tag and before any other table content such as `<thead>`, `<tbody>`, or `<tfoot>`.

Can I use multiple captions on one table?

No, HTML tables can only have one `<caption>` element. If you need both a title and a detailed summary, you can include both within the single caption element using HTML markup like `<br>` tags or `<span>` elements.

What is the difference between caption and figcaption?

`<caption>` is used directly inside `<table>` elements and is the primary accessibility mechanism for tables. `<figcaption>` is used with `<figure>` wrappers when treating the entire table as a figure. For maximum accessibility, `<caption>` within `<table>` is preferred.

How do I hide a caption visually but keep it accessible?

Use CSS to visually hide the caption while keeping it available to assistive technology: `.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }`

Does the caption element affect table styling?

The caption is positioned outside the table's main box model, so properties like `background-color` applied to the table do not affect the caption. You must apply styling directly to the `<caption>` element for consistent appearance.

Are captions required for WCAG compliance?

WCAG requires tables to have accessible names. Captions are the most straightforward way to provide this, though other techniques like `aria-label` can also satisfy the requirement. Captions are recommended for their semantic correctness and broad support.

Best Practices for Writing Captions

Effective Caption Guidelines

Do:

Use concise, descriptive phrases that identify table content
Write captions that answer "What data does this table contain?"
Maintain consistent style and formatting across all tables
Include the caption as the first element within <table>

Avoid:

Generic titles like "Table 1" or "Data"
Overly long captions that become unwieldy
Inconsistent capitalization or punctuation
Missing captions on data tables

Caption Examples

Poor Caption	Good Caption
Table 1	Monthly Website Traffic Statistics
Data	Customer Satisfaction Ratings by Product
Stats	Q4 2024 Sales Performance by Region
Information	Employee Benefits Comparison Chart

Testing Checklist

Caption appears as first child of <table> element
Screen reader announces caption when navigating to table
Caption text clearly describes table content
CSS styling applies correctly to caption
No deprecated align attribute is used
Complex tables have appropriate summaries if needed

Accessibility by the Numbers

100%

WCAG Level A requirement for accessible table names

Caption per table maximum

CSS properties replace deprecated align attribute

First

Child element position requirement

Related Concepts

Table Structure Elements

The caption works in conjunction with other semantic table elements to create fully accessible data tables:

Element	Purpose
`<thead>`	Groups header content at the top of the table
`<tbody>`	Groups the main body content
`<tfoot>`	Groups footer content at the bottom
`<th>`	Defines header cells with scope attribute
`<td>`	Defines data cells
`<colgroup>`	Specifies column groups for styling

Related Pieces in This Cluster

Basic Selectors: Understanding HTML element selection for table styling
Table Editor: Working with table structures in web editors
Contenteditable: Making table content editable in web applications

Build Accessible, Semantic Tables

Our web development team specializes in creating accessible, standards-compliant web applications with proper table implementations. Contact us to learn how we can help improve your website's accessibility and user experience.