CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1732542395990846989"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732542395990846989"> <title> Caption & Summary | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Caption & Summary" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/tables/caption-summary/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/tables/caption-summary/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/tutorials/tables/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/tutorials/tables/social.png" /> <meta property="twitter:title" content="Caption & Summary" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Caption & Summary","image":"https://www.w3.org/WAI/content-images/tutorials/tables/social.png","url":"https://www.w3.org/WAI/tutorials/tables/caption-summary/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-caption-summary "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/tables/"><span>Tables</span></a></li><li><a lang="en" href="/WAI/tutorials/tables/caption-summary/" aria-current="page"><span>Caption & Summary</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" aria-current="location" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li> <li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" aria-current="page" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Caption & Summary </h1><p>in <a lang="en" href="/WAI/tutorials/tables/"><span>Tables Tutorial</span></a></p></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Overview </h2></header><div class="box-i"> <p><img src="/WAI/content-images/tutorials/tables/img-caption.png" alt="" class=" small right" /> Captions and summaries provide information that can help users find, navigate, and understand tables. While they are not required in every case to meet WCAG, captions and summaries are fairly straightforward ways to provide such information that is often needed.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#identifying-a-table-using-a-caption" id="markdown-toc-identifying-a-table-using-a-caption">Identifying a table using a caption</a></li> <li><a href="#summaries-for-more-complex-tables" id="markdown-toc-summaries-for-more-complex-tables">Summaries for more complex tables</a> <ul> <li><a href="#nesting-summary-inside-the-caption-element" id="markdown-toc-nesting-summary-inside-the-caption-element">Nesting summary inside the <code class="language-plaintext highlighter-rouge"><caption></code> element</a></li> <li><a href="#using-aria-describedby-to-provide-a-table-summary" id="markdown-toc-using-aria-describedby-to-provide-a-table-summary">Using <code class="language-plaintext highlighter-rouge">aria-describedby</code> to provide a table summary</a></li> <li><a href="#using-the-figure-element-to-mark-up-a-table-summary" id="markdown-toc-using-the-figure-element-to-mark-up-a-table-summary">Using the <code class="language-plaintext highlighter-rouge"><figure></code> element to mark up a table summary</a></li> </ul> </li> </ul> </div> </nav> <ul> <li> <p>A <strong>caption</strong> functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. If the user uses “Tables Mode”, captions are the primary mechanism to identify tables. The caption is provided by the <code class="language-plaintext highlighter-rouge"><caption></code> element.</p> </li> <li> <p>A <strong>summary</strong> conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unusual structure (as in the examples below), information about what content can be found in which row or column can be provided to the user. A summary is usually only needed for complex tables.</p> </li> </ul> <p>If both caption and summary are provided for one table, the summary should not duplicate information present in the caption.</p> <p>See WCAG technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H39">H39: Using caption elements to associate data table captions with data tables</a> for more advice on captions.</p> <h2 class="ex" id="identifying-a-table-using-a-caption">Identifying a table using a caption</h2> <p>The caption should be a short heading for the table content. In this example “Concerts” tells users what information is in the table (as the table could, for example, also contain art exhibition information).</p> <p>The <code class="language-plaintext highlighter-rouge"><caption></code> element is placed directly as a child of the <code class="language-plaintext highlighter-rouge"><table></code> element.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <table> <caption>Concerts</caption> <tr> <th>Date</th> <th>Event</th> <th>Venue</th> </tr> <tr> <td>12 Feb</td> <td>Waltz with Strauss</td> <td>Main Hall</td> </tr> <tr> <td>24 Mar</td> <td>The Obelisks</td> <td>West Wing</td> </tr> <tr> <td>14 Apr</td> <td>The What</td> <td>Main Hall</td> </tr> </table> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table></span> <span class="nt"><caption></span>Concerts<span class="nt"></caption></span> <span class="nt"><tr></span> <span class="nt"><th></span>Date<span class="nt"></th></span> <span class="nt"><th></span>Event<span class="nt"></th></span> <span class="nt"><th></span>Venue<span class="nt"></th></span> <span class="nt"></tr></span> <span class="nt"><tr></span> <span class="nt"><td></span>12 Feb<span class="nt"></td></span> <span class="nt"><td></span>Waltz with Strauss<span class="nt"></td></span> <span class="nt"><td></span>Main Hall<span class="nt"></td></span> <span class="nt"></tr></span> […] <span class="nt"></table></span> </code></pre></div></div> </div></aside> <h2 class="ex" id="summaries-for-more-complex-tables">Summaries for more complex tables</h2> <p>In the examples below, different techniques are used to provide summaries to users.</p> <h3 class="ap" id="nesting-summary-inside-the-caption-element">Nesting summary inside the <code class="language-plaintext highlighter-rouge"><caption></code> element</h3> <p>This complex table shows availability of different types and sizes of accommodation in two separate locations. The <code class="language-plaintext highlighter-rouge"><caption></code> element acts as a heading of the table and provides the summary that describes the composition of the table as well.</p> <p>If implemented this way, the summary is available to visual users as well.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <table> <caption style="text-align: left;"> Availability of holiday accommodation<br> <span style="font-size: .75em; display:block;"> Column one has the location and size of accommodation, other columns show the type and number of properties available </span> </caption> <thead> <tr> <td></td> <th id="stud" scope="col"> Studio </th> <th id="apt" scope="col"> <abbr title="Apartment">Apt</abbr> </th> <th id="chal" scope="col"> Chalet </th> <th id="villa" scope="col"> Villa </th> </tr> </thead> <tbody> <tr> <th id="par" class="span" colspan="5" scope="colgroup"> Paris </th> </tr> <tr> <th headers="par" id="pbed1"> 1 bedroom </th> <td headers="par pbed1 stud"> 11 </td> <td headers="par pbed1 apt"> 20 </td> <td headers="par pbed1 chal"> 25 </td> <td headers="par pbed1 villa"> 23 </td> </tr> <tr> <th headers="par" id="pbed2"> 2 bedroom </th> <td headers="par pbed2 stud"> - </td> <td headers="par pbed2 apt"> 43 </td> <td headers="par pbed2 chal"> 52 </td> <td headers="par pbed2 villa"> 32 </td> </tr> <tr> <th headers="par" id="pbed3"> 3 bedroom </th> <td headers="par pbed3 stud"> - </td> <td headers="par pbed3 apt"> 13 </td> <td headers="par pbed3 chal"> 15 </td> <td headers="par pbed3 villa"> 40 </td> </tr> <tr> <th id="rome" class="span" colspan="5" scope="colgroup"> Rome </th> </tr> <tr> <th id="rbed1" headers="rome"> 1 bedroom </th> <td headers="rome rbed1 stud"> 13 </td> <td headers="rome rbed1 apt"> 21 </td> <td headers="rome rbed1 chal"> 22 </td> <td headers="rome rbed1 villa"> 3 </td> </tr> <tr> <th id="rbed2" headers="rome"> 2 bedroom </th> <td headers="rome rbed2 stud"> - </td> <td headers="rome rbed2 apt"> 23 </td> <td headers="rome rbed2 chal"> 43 </td> <td headers="rome rbed2 villa"> 30 </td> </tr> <tr> <th id="rbed3" headers="rome"> 3 bedroom </th> <td headers="rome rbed3 stud"> - </td> <td headers="rome rbed3 apt"> 16 </td> <td headers="rome rbed3 chal"> 32 </td> <td headers="rome rbed3 villa"> 40 </td> </tr> </tbody> </table> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><caption></span>Availability of holiday accommodation <span class="nt"><br></span> <span class="nt"><span></span>Column one has the location and size of accommodation, other columns show the type and number of properties available<span class="nt"></span></span> <span class="nt"></caption></span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p><strong>Note:</strong> A <code class="language-plaintext highlighter-rouge">span</code> element was added to style the summary differently from the caption. This is not required.</p> </div></aside> <h3 class="ap" id="using-aria-describedby-to-provide-a-table-summary">Using <code class="language-plaintext highlighter-rouge">aria-describedby</code> to provide a table summary</h3> <p>In this approach, an element with an <code class="language-plaintext highlighter-rouge">id</code> attribute is associated with a summary by using the <code class="language-plaintext highlighter-rouge">aria-describedby</code> attribute of the table. Any element with a unique <code class="language-plaintext highlighter-rouge">id</code> attribute can be used as a summary for a table in this way.</p> <p>The element containing the summary doesn’t need to be in front of the table in the document, but it helps users to discover the summary more quickly if the summary is near the table, especially if they are not using a screen reader.</p> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p><strong>Note:</strong> This WAI-ARIA feature may not be as widely supported by assistive technology than other approaches for summaries on this page.</p> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <p id="tblDesc" style="max-width: 25.333333333em; font-size: .75em; lin-height: 1.5;">Column one has the location and size of accommodation, other columns show the type and number of properties available.</p> <table aria-describedby="tblDesc" tabindex="0"> <caption style="text-align: left;"> Paris: Availability of holiday accommodation<br> </caption> <thead> <tr> <td></td> <th id="stud" scope="col"> Studio </th> <th id="apt" scope="col"> <abbr title="Apartment">Apt</abbr> </th> <th id="chal" scope="col"> Chalet </th> <th id="villa" scope="col"> Villa </th> </tr> </thead> <tbody> <tr> <th headers="par" id="pbed1"> 1 bedroom </th> <td headers="par pbed1 stud"> 11 </td> <td headers="par pbed1 apt"> 20 </td> <td headers="par pbed1 chal"> 25 </td> <td headers="par pbed1 villa"> 23 </td> </tr> <tr> <th headers="par" id="pbed2"> 2 bedroom </th> <td headers="par pbed2 stud"> - </td> <td headers="par pbed2 apt"> 43 </td> <td headers="par pbed2 chal"> 52 </td> <td headers="par pbed2 villa"> 32 </td> </tr> <tr> <th headers="par" id="pbed3"> 3 bedroom </th> <td headers="par pbed3 stud"> - </td> <td headers="par pbed3 apt"> 13 </td> <td headers="par pbed3 chal"> 15 </td> <td headers="par pbed3 villa"> 40 </td> </tr> </tbody> </table> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">id=</span><span class="s">"tblDesc"</span><span class="nt">></span>Column one has the location and size of accommodation, other columns show the type and number of properties available.<span class="nt"></p></span> <span class="nt"><table</span> <span class="na">aria-describedby=</span><span class="s">"tblDesc"</span><span class="nt">></span> […] </code></pre></div></div> </div></aside> <h3 class="ap" id="using-the-figure-element-to-mark-up-a-table-summary">Using the <code class="language-plaintext highlighter-rouge"><figure></code> element to mark up a table summary</h3> <p>In this approach, the table is wrapped in a <code class="language-plaintext highlighter-rouge"><figure></code> element. The <code class="language-plaintext highlighter-rouge"><figcaption></code> element contains the caption and summary text.</p> <p>Screen reader users navigating in “Tables Mode” are usually unable to identify a table by a caption applied like this. The caption part of the <code class="language-plaintext highlighter-rouge"><figcaption></code> element can be explicitly associated to the table by using the <code class="language-plaintext highlighter-rouge">aria-labelledby</code> attribute and the summary part by using the <code class="language-plaintext highlighter-rouge">aria-describedby</code> attributes. Note that this could lead to the caption and summary being read out multiple times.</p> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p><strong>Note:</strong> This HTML5 feature may not be as widely supported by assistive technology than other approaches for summaries on this page.</p> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <figure> <figcaption style="max-width: 19em; color: inherit;"> <strong>Paris: Availability of holiday accommodation</strong><br>Column one has the location and size of accommodation, other columns show the type and number of properties available. </figcaption> <table> <thead> <tr> <td></td> <th id="stud" scope="col"> Studio </th> <th id="apt" scope="col"> <abbr title="Apartment">Apt</abbr> </th> <th id="chal" scope="col"> Chalet </th> <th id="villa" scope="col"> Villa </th> </tr> </thead> <tbody> <tr> <th headers="par" id="pbed1"> 1 bedroom </th> <td headers="par pbed1 stud"> 11 </td> <td headers="par pbed1 apt"> 20 </td> <td headers="par pbed1 chal"> 25 </td> <td headers="par pbed1 villa"> 23 </td> </tr> <tr> <th headers="par" id="pbed2"> 2 bedroom </th> <td headers="par pbed2 stud"> - </td> <td headers="par pbed2 apt"> 43 </td> <td headers="par pbed2 chal"> 52 </td> <td headers="par pbed2 villa"> 32 </td> </tr> <tr> <th headers="par" id="pbed3"> 3 bedroom </th> <td headers="par pbed3 stud"> - </td> <td headers="par pbed3 apt"> 13 </td> <td headers="par pbed3 chal"> 15 </td> <td headers="par pbed3 villa"> 40 </td> </tr> </tbody> </table> </figure> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet: Not using WAI-ARIA</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><figure></span> <span class="nt"><figcaption></span> <span class="nt"><strong></span>Paris: Availability of holiday accommodation<span class="nt"></strong><br></span> <span class="nt"><span></span>Column one has the location and size of accommodation, other columns show the type and number of properties available.<span class="nt"></span></span> <span class="nt"></figcaption></span> <span class="nt"><table></span> […] <span class="nt"></table></span> <span class="nt"></figure></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code Snippet: Using WAI-ARIA</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><figure></span> <span class="nt"><figcaption></span> <span class="nt"><strong</span> <span class="na">id=</span><span class="s">"paris-caption"</span><span class="nt">></span>Paris: Availability of holiday accommodation<span class="nt"></strong><br></span> <span class="nt"><span</span> <span class="na">id=</span><span class="s">"paris-summary"</span><span class="nt">></span>Column one has the location and size of accommodation, other columns show the type and number of properties available.<span class="nt"></span></span> <span class="nt"></figcaption></span> <span class="nt"><table</span> <span class="na">aria-labelledby=</span><span class="s">"paris-caption"</span> <span class="na">aria-describedby=</span><span class="s">"paris-summary"</span><span class="nt">></span> […] <span class="nt"></table></span> <span class="nt"></figure></span> </code></pre></div></div> </div></aside> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> <p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p> <p><strong>Techniques:</strong></p> <ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H39">H39: Using caption elements to associate data table captions with data tables</a></li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/tables/multi-level/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Multi-Level Headers</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/tables/tips/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Tips and Tricks</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/tables/caption-summary.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/tables/caption-summary/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 27 July 2019 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1732542395990846989"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732542395990846989"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>